1、module模块化
ES6在语言标准的层面上，实现了模块功能，而且相对比较简单，取代了之前的CommonJS和AMD规范，成为了浏览器通用的解决方案。
2、module模块的主要功能
-
export：命令用于规定模块的对外接口 -
import：命令用于输入其他模块提供的功能
一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果希望外部能够读取模块内部的某个变量，就必须使用关键字export关键字输出该变量。
3、模块的导出
一个文件就是一个独立的js文件，导出模块文件，就是导出一个js文件，用法 使用 export导出
export 需要导出的内容
3.1、导出变量
示例：导出test.js中的data变量
// test.js
let data = '测试数据';
export { data };
可以同时导出多个数据变量
// test.js
let data = '测试数据';
let target = 20;
export { data, target };
3.2、导出函数或类
export function fn(){
return '测试数据'
}
3.3、as关键字重命名
很多情况下，导出的变量就是原本js文件中的变量（函数）名，但是在某些特定的场合可能需要对导出的变量进行重命名，这时便需要使用as关键字。
function fn(){
return '测试数据'
}
function test(){
return '测试数据2'
}
export {
fn as add,
test as minus
};
注意：export规定的是对外的接口，必须与模块内部的变量建立一一对应的关系。
如以下几种使用方法就会出现报错
// 报错情形一
export 1;
// 报错情形二
let data = 3;
export data;
同理，函数的导出也是一样的。
3.3、整体的导出
export导出内容时，import必须使用花括号包裹，但是使用export default导出时，便不需要花括号包裹了
如：
//test.js使用export default导出
let data = 20;
export default data;
//use.js使用import导入时
import data from './modules/test.js'
4、导入模块
使用export命令定义模块的对外接口后，其他的js文件就可以通过import命令加载这个模块。
引入方式
import 模块名
4.1、引入整个js文件
// 引入整个test.js文件
import './modules/test.js'
4.2、引入模块中的某个变量（export导出方式下）
// 引入test.js文件中的变量data
import { data } from './modules.test.js'
4.3、引入模块中的多个变量（export导出方式下）
// 引入test.js文件中的变量data
import { data1, data2, data3 } from './modules.test.js'
注意，花括号内的变量名必须与被导出的模块的变量名的名称一致
4.4、as关键字修改inport 导入后的变量名
在某些需求可能为了避免与本js文件变量名重名的情况下，选择导入时修改变量名，这时需要使用as关键字。
import { name as userName } from './modules/data.js';
4.5、import使用时具有变量提升的特性
在使用import导入时，它是具有提升的特性的，会提升到整个模块的头部，首先执行
fn(); //在该js文件中使用fn函数
import { fn } from './modules/data.js';//import的执行早于fn的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
4.6、import不能使用表达式
因为import是静态执行的，所以不能使用表达式或者一些其他替代的方式去处理，比如：
// 报错情形一
import { 'a'+'b' } from './modules/data.js'; //使用的方式是错误的
// 报错情形二
let data = './modules/data.js'
import { name } from data; //使用的方式是错误的
4.8、import导入模块中的对象
import * as obj from './modules/data.js';
// 这个时候你就以使用obj这个Module对象了
console.log(obj.a);
4.7、import的特点
- 可以使用相对路径也可以使用绝对路径
- import模块只会导入一次，无论你引入多少次
- import 的导入语句会进行提升,提升到最顶部,首先执行
- 导出去的模块内容,如果里面发生有定时器发生导出内容的改变,外边导入的也会发生改变,不像Comment会缓存
5、import动态导入
import()是动态的导入，类似于node中的require()
// import() 引入返回一个promise对象
import('./data.js').then(res => {
console.log(res);
})
使用动态导入的优点：
- 按需导入模块加载模块
- 使用更加便捷
- 路径可以动态设置