模块化时代

在忍受了命名空间一大串的名字很多年之后，终于有了模块化。促使模块化诞生的另一个因素是依赖管理的问题。

限制

浏览器对资源加载有同源策略限制，也不支持编程化加载资源。（支持加载，不告诉你加载结果，自己猜。）

最终大部分加载器选择通过<script>标签加载，然后通过各种hack判断是否加载完成。

AMD

require.js将AMD发扬光大，成为AMD事实标准。

模块定义和使用：

  1. define(id?, dependencies?, function factory(){
  3.     return moduleContent;
  5. });

优点：浏览器直接使用。

Common.js / CMD

Common.js模块定义和使用：

  1. var dependency = require('xxx');
  3. // 模块定义
  4. exports.xxx = xxx;
  6. // 或者
  7. module.exports = moduleContent;

CMD模块定义和使用：

  1. define(function(require, exports, module) {
  2.     var a = require('./a')
  3.     var b = require('./b') // 依赖可以就近书写
  4. })

UMD

  1. (function (root, factory) {
  2.     if (typeof define === 'function' && define.amd) {
  3.         // AMD. Register as an anonymous module.
  4.         define(['b'], factory);
  5.     } else if (typeof module === 'object' && module.exports) {
  6.         // Node. Does not work with strict CommonJS, but
  7.         // only CommonJS-like environments that support module.exports,
  8.         // like Node.
  9.         module.exports = factory(require('b'));
  10.     } else {
  11.         // Browser globals (root is window)
  12.         root.returnExports = factory(root.b);
  13.     }
  14. }(this, function (b) {
  15.     //use b in some fashion.
  17.     // Just return a value to define the module export.
  18.     // This example returns an object, but the module
  19.     // can return a function as the exported value.
  20.     return {};
  21. }));

问题

基于运行时，部分实现依赖于hack，没有可靠的基础，虽然有完善的测试，但还是会碰到意外情况。

浏览器端限制多，导致hack多，配置项多。

优化工具不够好用。

无法复用生态圈，需要额外适配。