ES6的模块化

我们知道很多语言都有属于自己的模块化规则，可以按照特定的规则来定义和使用引用模块。但是在ES6之前，js是不支持模块化的。那怎么办？其实前端也是有自己的社区的，他们也想着得使用模块化，因为确实好。于是社区制定了一套模块加载方案，有CommonJS、AMD和CMD三种规范。其中Commonjs的代表是nodeJs；AMD的代表是requireJs, curlJs；CMD的代表是seaJs。比较主流的是CommonJS和AMD。
其实也别想着那么复杂，它们只不过是按照自己特定规则来定义和引入模块而已，实现都是一样只是规则有所有差异而已。
因为社区制定的模块化规范比较乱，所以ES6出来就统一了这个问题。那我们就来看看ES6中的模块规范的详细规则

总结两个关键字

• export
• import

export用于导出模块，import用于导入模块；
当然根据不同的export和不同的import语句，导入和导出的结果会有所差异，下面一起来看看

我们知道一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果想从外部能够读取模块内部的某个变量，显然使用<script src=""></script>在src中指定要引入的文件的形式会引入整个文件中的所有东西，这样不好。ES6中使用export导出命令可以导出特定的某些需要的变量

1. 批量导出导入

在需要导出的js文件中， 使用 export{} 批量导出变量

let x = 100;
let y = [1,2,3,4,5];
let str = "asd123"
let fun1 = ()=>{
    console.log("fun1")
}
export{x,y,str,fun1}

对应的使用import{} from "文件地址" 批量引入变量

import {x,y,str,fun1} from '文件目录';

2. export导出变量时，使用as改变变量的变量名

//lib.js文件
let a = "apple"
let b = "banana"
export {a as apple, b as banana}

对应import时，需要使用as后的名称

import {apple, banana} from "./lib";
console.log(apple,banana);

3. 可以在变量定义处单独导出一个或者多个变量

//lib.js文件
export let foo = ()=> {
  console.log("fnFoo") ;
  return "foo"
},
bar = "s,tringBar";

对应使用import{} from "文件目录"导入

import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

4. 当需要单独导出一个数据时，该数据没有变量名，可使用export default导出

//lib.js文件
export default "abc";

对应的使用，使用import xxx from "文件目录"来导入。此时的xxx就是给导出数据取得变量名

import defaultString from "./lib";
console.log(defaultString);

5. 将要导出的变量as为default，在import的时候，该变量的名字就可以自定义了。但要注意每个模块默认接口就一个

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

6. 可以使用通配符*号批量导入所有导出的变量

import * as circle from './circle';

7. 使用import '文件路径'的方式，相当于引入文件；可以是相对路径或者绝对路径

import 'https://code.jquery.com/jquery-3.3.1.js'

并且这种形式，无论你引入多少次，只会导入执行一次

8. 使用import()函数动态引入

默认import语法不能写到if之类里面，使用import()可以动态引入,类似node里面require()；
import()返回值，是个promise对象，可以使用then()

import('./modules/1.js').then(res=>{
  console.log(res.a+res.b);
});

以上差不多就是模块的所有格式！

总的来说，使用模块化还需注意几点：
a. 使用模块需要添加type="module"，告知浏览器这里是跟模块化相关的代码

<script type="module">
  import './modules/1.js';//这种格式相当于引入1.js文件
</script>

b. import有提升效果，会自动提升到顶部，首先执行
c. ES6导入的模块都是属于引用，每一个导入的js模块都是活的， 每一次访问该模块的变量或者函数都是最新的。也就是说导出去模块内容，如果里面有定时器更改，外面也会改动。这跟社区定义的Commonjs、AMD、CMD有所不同
d. 大括号里面的变量名，必须与被导入模块对外接口的名称相同。跟对象的解构类似
e. 文件路径，.js后缀可以省略