js模块化发展历程

第一阶段——无模块化

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

第二阶段——commonJS规范

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

1. 通过require引入模块
2. 通过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;

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

第三阶段——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 = ...
})

第五阶段——ES6的模块化

使用ES6的语法，export和import实现模块化，用的比较多就不介绍了。缺点是浏览器暂不支持，需要babel编译过

特殊规范——UMD

兼容AMD，CommonJS 模块化语法。
总结：