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:

网页中import模块姓名:性别:

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

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

HTML:

as在export中的用法姓名:性别:

（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:

as在import中的用法姓名:性别:姓名:性别:

四、导入模块中的函数和类（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