模块化（二）

CommonJS

每个文件就是一个模块，内部定义的变量是属于这个模块的，不会对外暴露，也就是不会污染全局变量。
node和webpack都对commonjs原生支持。

核心思想是通过require方法同步加载所依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口.

浏览器不兼容CommonJs,原因是浏览器缺少module,export,require,global四个环境变量，如需使用要用工具转换。

commonJs采用同步加载不同模块文件，适用于服务端。因为模块文件都存放在服务器的各个硬盘上没读取加载时间快，适合服务端，不适用浏览器。

//index.js
var module = require('module.js);
module.aa('hello');

// module.js
module.exports = {
  aa: function () {
    console.log(str);
  }
}

AMD

异步加载模块，允许指定回调函数，等模块异步加载完成后即可调用回调函数。

AMD核心思想就是通过define定义一个模块，然后使用require来加载一个模块

// main.js
require(['jQuire', 'math'], function($, math) {
  // ...
})

// math,js
define(function() {
  // ...
})

CMD

CMD异步加载，跟AMD的主要区别在于，AMD依赖前置，提起加载依赖前置，CMD就近加载，按需加载。

产物seaJS，跟require JS使用有些类似。

CMD核心思想就是通过define定义一个模块，然后使用require来加载一个模块

<script src="./sea.js"></script>

<script>
// index.html
seajs.use('main.js');

// main.js
define(function(require, exports,module) {
  var module1 = require('module1.js');
  console.log(module1);
})

// module1.js
define (function(require,exports, module) {
  var arr = [1,2,3];
  exports.module1 = arr;
})

ES6

自带模块化，可以用import关键字引入模块，通过export关键字导出模块，功能较前几方案更强大，但由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的require。

使用import关键字引入模块，通过export关键字导出模块

总结：
CommonJS同步加载，适用于服务端、AMD异步加载完所有依赖、CMD异步按需加载、ES6自带模块化，使用最广泛。