大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了Promise的用法，下面我们一起来继续学习模块化：
JavaScript本身是不支持模块化的，只不过后来一些社区的大佬制定了一个模块规范，主要分为两种，一个是用于服务器的CommonJs,比如nodeJs中的require；另一个是用于客户端的AMD，比如requireJs。后来ES6提供了通用的模块化方案：
ES6专门提供了import和export这两个小可爱
小白：那么它们都是用来做什么的呢？怎么用的呢？
格格：首先要开启服务器，整个流程是在服务器下进行的，Apache也好，编辑器自带的也好；下面就让我们带着疑问一起来看一下：
export：它是用来定义模块的，可以导出对象、函数、类、字符串等等：
// 1.jsexport const a = 1;console.log(a);// 1.html<script type="module"> import './1.js';</script>
上面的这个例子中，这两个文件是在同一目录下，但是引入的时候前面要加上(./)当前路径，不加就会报错，别问我为什么，大概是甲鱼的臀部，下面来看一下导出多个对象的例子：
// 1.jsconst a = 1;
let b = 2;function show(){
console.log(10);
}
export {
a,
b as c,
show
}
show(); // 10console.log(a); // 1console.log(b); // 2console.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。
其实还有很多的，这些只是一部分，之前我在高程上也看到许多，就不一一列举了
关于模块化我们都已经了然于心，预知类和继承如何，请听下回分解 （＾∀＾）/~~~
本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~
作者：苏日俪格
链接：https://www.jianshu.com/p/6c1b0e2b53c3
随时随地看视频
