介绍模块化发展历程

一、第一阶段——无模块化

• 将所有JS文件都放在一块，代码执行顺序就按照文件的顺序执行。
• 缺点是污染全局作用域。每一个模块都是暴露在全局中的，容易产生命名冲突。还有要手动处理各代码的依赖关系。

<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>
<script src="main.js"></script>
<script src="other.js"></script>

二、第二阶段——commonJS规范

是一个JavaScript模块化的规范，一个文件就是一个模块，内部定义的变量就属于这个模块里的，不会对外暴露，所以不会污染全局变量。

• 通过require引入模块
• 通过module.exports导出模块

//a.js
var num = 100;
var add = function(val){
   return val + num
}
module.exports.num = num;
module.exports.add = add ;
//b.js
var moduleA = require('./a.js')
var fn = moduleA.add;

• 同步加载模块，等当前模块加载完成了才进行下一步，服务器端文件都是保存在硬盘上，所以同步加载没问题。但是浏览器上，需要把文件从服务器端请求过来，比较慢，所以同步加载不适合用在浏览器上

三、第三阶段——AMD规范

因为commonJS规范不适用于浏览器，因为要从服务器加载文件，不能用同步模式，所以有了AMD规范，该规范的实现，就是requireJs了。

define(function () {
    var alertName = function (str) {
      alert("I am " + str);
    }
    var alertAge = function (num) {
      alert("I am " + num + " years old");
    }
    return {
      alertName: alertName,
      alertAge: alertAge
    };
  });
//引入模块：
require(['alert'], function (alert) {
  alert.alertName('JohnZhu');
  alert.alertAge(21);
});

• 依赖前置，require([dep1, dep2],callback)，先加载依赖再执行回调函数
• 优点是可以在浏览器环境中异步加载模块，而且可以并行加载多个模块

四、第四阶段——CMD规范

和requirejs非常类似，即一个js文件就是一个模块，但是可以通过按需加载的方式，而不是必须在模块开始就加载所有的依赖。

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

特殊规范——UMD

CommonJS、AMD、CMD并行的状态下，就需要一种方案能够兼容他们，这样我们在开发时，就不需要再去考虑依赖模块所遵循的规范了，而UMD的出现就是为了解决这个问题。

五、第五阶段——ES6的模块化

• 定义：通过import引入依赖，通过export导出依赖
• 机制：ES6的模块机制在依赖模块时并不会先去预加载整个脚本，而是生成一个只读引用，并且静态解析依赖，等到执行代码时，再去依赖里取出实际需要的模块
• 特点：编译时加载，不允许在里边引用变量，必须为真实的文件路径。可以通过调用import()语句，会生成一个promise去加载对应的文件，这样子就是运行时加载，可以在路径里边编写变量
• 缺点：浏览器暂不支持，需要babel编译过