ES6基础语法之模块化怎么实现

本篇内容介绍了"ES6基础语法之模块化怎么实现"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

ES6 引入了模块化， ES6 的模块化分为导出（export） @与导入（import）两个模块。

ES6模块化特点：

（1）ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

（2） 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

（3） 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

（4） 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

一、export与import基本使用

export 命令用于导出， import 命令 用于导入：

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

test1.js

// import { name,sex } from "../export/module1.js";// console.log(name); //孙悟空// console.log(sex);  //男//或导入部分变量import { sex } from "../export/module1.js";console.log(sex);  //男

Demo01.html

二、网页中直接import模块

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

HTML:

                                                                        
姓名:
                
性别:
        

三、as的使用

（1）as在export中的用法：变量使用别名,隐藏模块内部的变量

module2.js：

let name = "孙悟空";let sex = "男";export {name as expName,sex as expSex};

HTML:

                                                                        
姓名:
                
性别:
        

（2）as在import中的用法：导入多个模块的变量,使用as解决命名冲突。

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

module3.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "猪八戒";let sex = "男";export {name,sex};

HTML:

                                                                        
姓名:
                
性别:
                
                
姓名:
                
性别:
           

四、导入模块中的函数和类

（1）导入模块中的函数

module4.js

// function Add(...items)// {//         let sum = 0;//         for(let item of items)//         {//                 sum += item;//         }//         return sum;// }// export{Add};//或export function Add(...items){        let sum = 0;        for(let item of items)        {                sum += item;        }        return sum;};

HTML

（2）导入模块中的类：

module4.js

// class Student// {//         constructor(stuno,stuname) //         {//                 this.stuno = stuno;//                 this.stuname = stuname;//         }//         sayHi()//         {//                 console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);//         }// }// export {Student};//或export class Student{        constructor(stuno,stuname)         {                this.stuno = stuno;                this.stuname = stuname;        }        sayHi()        {                console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);        }}

HTML

五、import的特点

module5.js

let name = "孙悟空";let sex = "男";let emp = {name:"孙悟空",sex:"男"};export {name,sex,emp};

HTML

六、模块的整体import加载

module5.js

let name = "孙悟空";let sex = "男";let emp = {name:"孙悟空",sex:"男"};export {name,sex,emp};

HTML

七、export default命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载，export default 向外暴露的

成员，可以使用任意变量来接收，解决上述问题。

export default 命令特点:

（1）在一个文件或模块中，export、import 可以有多个，export default 仅有一个。

（2）export default 中的 default 是对应的导出接口变量。

（3）导入导出不需要{}符号。

（4）export default 向外暴露的成员，可以使用任意变量来接收。

（1）export default导出变量

module6.js

//export default导出变量不需要var//export var a = 10; // 正确// 正确var a = 10;export default a;// 错误//export default var a = 10;

HTML

（2）export default导出函数

module6.js

function Add(...items){        let sum = 0;        for(let item of items)        {                sum += item;        }        return sum;}//此处Add不需要{}export default Add

HTML

八、export与import的复合写法

export 与 import 可以在同一模块使用，我们称为复合使用。

（1）复合使用的基本语法

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

module7.js

//复合使用的语法let emp = {name:"猪八戒",sex:"男"};export { name, sex } from './module1.js';// //上面的export等于如下：// // import { name, sex } from './module1.js';// // export { name, sex };export {emp}

HTML

（2）复合写法实现接口改名

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

module7.js

//复合写法实现接口改名let emp = {name:"猪八戒",sex:"男"};export { name as myname, sex as mysex } from './module1.js';export {emp}

HTML

（3）转换为默认接口

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

module7.js

// 转换为默认接口let emp = {name:"猪八戒",sex:"男"};export {name as default,sex} from './module1.js';export {emp}

HTML

（4）默认接口转换为命名接口

module6.js

function Add(...items){        let sum = 0;        for(let item of items)        {                sum += item;        }        return sum;}//此处Add不需要{}export default Add

module7.js

//将默认接口转换为命名接口export {default as sum} from './module6.js';

HTML

（5）导出所有接口

module1.js

// export let name = "孙悟空";// export let sex = "男";//或let name = "孙悟空";let sex = "男";export {name,sex};

module7.js

//导出所有export * from './module1.js'

HTML

"ES6基础语法之模块化怎么实现"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！