八、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
// 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