大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了Promise的用法，下面我们一起来继续学习模块化：
JavaScript本身是不支持模块化的，只不过后来一些社区的大佬制定了一个模块规范，主要分为两种，一个是用于服务器的CommonJs,比如nodeJs中的require；另一个是用于客户端的AMD，比如requireJs。后来ES6提供了通用的模块化方案：
ES6专门提供了import和export这两个小可爱
小白：那么它们都是用来做什么的呢？怎么用的呢？
格格：首先要开启服务器，整个流程是在服务器下进行的，Apache也好，编辑器自带的也好；下面就让我们带着疑问一起来看一下：
export：它是用来定义模块的，可以导出对象、函数、类、字符串等等：
// 1.js
export const a = 1;
console.log(a);
// 1.html
<script type="module">
import ‘./1.js‘;
</script>
上面的这个例子中，这两个文件是在同一目录下，但是引入的时候前面要加上(./)当前路径，不加就会报错，别问我为什么，大概是甲鱼的臀部，下面来看一下导出多个对象的例子：
// 1.js
const a = 1;
let b = 2;
function show(){
console.log(10);
}
export {
a,
b as c,
show
}
show(); // 10
console.log(a); // 1
console.log(b); // 2
console.log(c); // c is not defined 因为在这个js里他还是b，只不过导出到另外一个文件里才叫c
// 1.html
<script type="module">
import {a,c,show} from ‘./1.js‘;
show(); // 10
console.log(a); // 1
console.log(c); // 2
console.log(b); // b is not defined 已经将导入的b更名为c，所以这里叫c
</script>
上面的例子中可以将export导出的内容通过as进行更名
小白：import也可以有这样的操作么？
格格：那是必须的呀，他们都是一家子的，这可不能偏心啊
import导入的也可以通过as改名：
// 1.html
<script type="module">
import * as goto from ‘./1.js‘; // * 代表1.js中导出的全部的内容，但是不能直接输出*，必须改名
console.log(goto); // 整个json对象
console.log(goto.a); // 1
goto.show(); // 10
</script>
导出的方式还有另外一种：export default {}
那么export和export default的区别就是：前者导出的东西需要在导入的时候加{}，而后者则不需要：
// 1.js
const a = 1;
const b = 2;
const c = 3;
export {a,b}
export default c;
// 1.html
<script type="module">
import c,{a,b} from ‘./1.js‘; // 同时导入export和export default的时候，必须把默认的放在前面
console.log(a,b,c); // 1 2 3
</script>
另外，import除了以上特性之外，还有：
引入的路径既可以是相对路径也可以是绝对路径，还可以是网络路径，比如引入网上的jquery.js；
import还拥有提升特性，就像是var变量提升一样，在实行代码之前会被提到代码的顶部
import可以动态引入，但是import不能放入放到代码块哦
小白：什么是动态引入？
格格：动态引入其实就是基于promise语法，根据promise机制来实现动态引入，首先来看一个例子：
// 1.html
<script type="module">
import(‘./1.js‘).then(res =>{
console.log(res.a); // 1
});
</script>
有了这种机制就可以实现按需加载，比如先载入jquery.js再使用jquery的方法，或者根据条件选择动态加载哪个模块；
关于模块还需要强调的一点就是它默认就是严格模式，也就是默认在顶部有一个‘use strict’
小白：什么是严格模式？
格格：所谓严格模式也就是改掉一些编程不好的习惯，可以理解为把一个山寨的土匪收编为正规军的感觉：
严格模式相关规定还是挺多的：
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀0表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface）
- 其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
作者：苏日俪格
链接：https://www.jianshu.com/p/6c1b0e2b53c3
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
原文地址：https://www.cnblogs.com/kelly-sunshine/p/10767791.html