每日JavaScript之模块加载

参考文章：
http://es6.ruanyifeng.com/#docs/module-loader
https://juejin.im/post/5bea425751882508851b45d6
https://www.jianshu.com/p/b7db6224a4aa

首先，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。所以写大项目中，因为大项目依赖关系非常复杂，而还有全局变量污染还有命名冲突的危险，所以JavaScript之前一直被人看作是“玩具语言”（没有像Python简洁的import）。

后来出现了四种规范：
AMD (require.js)
CMD (sea.js)
CommonJS (node.js)
ES6 模块 (原生JS）

因为AMD和CMD规范已经逐渐被淘汰，所以我们只来学习CommonJS和ES6模块。

首先说明，es6默认是开启严格模式，有着如下限制：

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀 0 表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）

CommonJS
Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。
实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。

CommonJS 规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。这是因为服务器中模块都在磁盘中，读取非常快。
但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式（因为网络原因），因此浏览器端一般采用 AMD 规范或者ES6加载。

ES6加载
语法可以浏览阮一峰老师
http://es6.ruanyifeng.com/#docs/module
主要就是export和import两个关键字
在测试时有需要注意的地方:
node不支持ES6加载，在node环境使用会报错，所以暂时只能用在浏览器端。
使用时，script标签要加上type="module"属性，否则会报错

Uncaught SyntaxError: Unexpected token {

最后测试要有服务器环境，反则会报跨域错误，这可能是chrome浏览器防止XSS攻击，建议使用Firefox浏览器（没测试）或者使用express简单的搭个服务器，也可以

npm install http-server -g

const firstName = 'Michael'
const lastName = 'Jackson'
const year = 1958

const isLove = () => console.log('当然不是啦')
export {firstName, lastName, year, isLove}

<script type="module">
    import {firstName, lastName, year, isLove} from './export.js';
    isLove()
    console.log(year)
  </script>

打开控制台就可以看到输出了。

ES6 模块与 CommonJS 模块的差异
建议直接阅读阮一峰老师的书籍
http://es6.ruanyifeng.com/#docs/module-loader#ES6-模块与-CommonJS-模块的差异
主要差异：
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成
简单的说，CommonJS会缓存值，而ES6会动态更新值。

还有其他内容比较深入，请阅读阮一峰老师的ES6入门。

我喜欢JavaScript的最大原因就是ES6的简洁强大（像Python，哈哈）

扩展阅读
http://huangxuan.me/js-module-7day/#/