[TOC]

模块的导入导出

在script中具名引入模块

<script type='module'>//注意加上属性
//js1.js
import {a,b} from './js2.js';//从js2.js中引入a，b，c元素,注意路径
console.log(c);//本身没有定义,c打印失败
console.log(a,b());//a,b由于引入打印成功 1 2 
console.(this);//严格模式，因此打印的是undefined
</script>

//js2.js
let a = 1;
let b = function(){
return 2;
};
let c = {name:'haha'};
export {a,b,c};

注意：

因为模块之间的依赖关系，JS引擎会延后解析模块的代码，等所有模块的代码都解析完了，才会执行。
模块script中默认使用的严格模式，因此全局中的this指向的是undefined。
模块导入的别名使用
在模块导入时，可能会发生变量名的冲突，或者希望对导入的变量进行重命名。
```
//js1.js
<script type='module'>
import {abcd as a，cdef as b} from './js2.js';
</script>
```
```
//js2.js
let abcd = 1；
export {abcd as a};
```
使用如上两种方式的代码进行代码的重命名。
模块的默认导出
如果外部模块代码中导出元素只有一个的话，可以使用默认导出。
```
//js1.js
<script type='module'>
import x from './js2.js';//会自动命名默认的元素
</script>
```
```
//js2.js
let a = 1；
export default a；
//原理如下，引入时是{default as x}
export {a as default};
```
使用如上代码进行代码的默认导出。
导出的是函数的时候，应该小写开头
导出的是对象的时候，应该大写开头
模块的批量导入
```
<script type='module'>
import * as api form './js2.js';
</script>
```
这样会把js1.js中的属性和方法挂到api来导入，调用的时候以api.属性\api.方法来进行调用。
但是，还是建议使用具名（具体名字）导入，方便打包工具（webpack等）来进行分析打包，减轻体积。
模块的混合导入方式
可以综合上面几种方式来导入
导出时，a as fault设置为默认，具名使用{}包裹。
1.接收时，接收默认元素不用{}包裹，接收具名使用{}包裹
2.接收时，使用 * as api接收，api.fault 调用默认，api.名字调用具名
模块的合并导出
在一个js2.js文件中编写import，export导入导出的信息，在html script type=’module’中使用src引用。
可以使用多个文件进行层级区分。
按需动态加载模块
因为import需要写在顶层，所以无法动态加载。 ```html
```
使用import函数进行动态加载，import函数不需要写在顶层，因此可以使用条件判断来动态加载。
<a name="iCccB"></a>
# 模块的独立作用域
```html
<script type="module">
    import { a, b } from "./js2.js";
    console.log(a, b, c);
</script>
<script>
    let c = 3;
    console.log(a);
</script>
/*最终结果为
报错
1 2 3*/
```
```
//js2.js
let a = 1;
let b = 2;
export { a, b };
```
对如上代码进行解释
1. 顺序相反，因为延迟解析。
2. 模块代码中的作用域就像顶级作用域中的函数作用域一样，顶级作用域中，不可以向模块代码内访问，包括从外部模块引入的变量。
3. 模块代码中，可以像函数作用域一样，向外访问顶级作用域的变量。
4. 外部模块间也是不可以互相访问的。
  参考文档
  http://houdunren.gitee.io/note/js/13%20%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1.html#%E4%BD%BF%E7%94%A8%E5%88%86%E6%9E%90

JS模块化开发

模块的导入导出

在script中具名引入模块

模块导入的别名使用

模块的默认导出

模块的批量导入

模块的混合导入方式

模块的合并导出

按需动态加载模块

参考文档