CommonJS 模块化详解

原生 javaScript 除了浏览器 api 以为外的就那样了, 但是 CommonJS 的出现 带来了各种 api, 使得 js 能够在各种平台应用上施展拳脚。 CommonJS 是一种 规范，nodeJs 以及 Webpack 都是遵循 CommonJs 规范打造。

只要在兼容 CommonJS 的系统中，javaScript 可以用来：

1. 服务器端的应用程序
2. 命令行工具
3. 图形界面应用程序 (Web)
4. 混合应用程序 （原生应用加壳，原生应用内嵌 web 页面等）

• node.js 的 模块系统就是参照 CommonJS 规范实现的, 也就是现在的主流规范：AMD。

node 模块

首先 node.js 是后端的
浏览器 不支持 CommonJS 模块化规范
是因为缺少 node.js 提供的 四个用于模块化的环境变量

• module
• exports
• require
• global

实现

但可以使用一些 CommonJS 格式转换工具来同样使用 nodeJs 类似的模块化功能

• Browserify
• tiny-browser-require

---

前端模块化

AMD

前端是异步加载模块的，所有 不能像服务器端那样同步加载模块。所以 异步模块加载标准 AMD 诞生了

AMD 规范 最主要是由 requireJS 实现的

• 模块的定义
  define(id?, dependencies?, factory)

1. 第一个参数 id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
2. 第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
3. 第三个参数，factory，是一个需要进行实例化的函数或者一个对象。

// 无依赖模块
define( {
    add : function( x, y ){
        return x + y ;
    }
} );

//  定义有依赖的模块
define(["alpha"], function( alpha ){
    return {
        verb : function(){
            return alpha.verb() + 1 ;
        }
    }
});

// 定义数据对象模块
define({
    users: [],
    members: []
});

// 具名模块
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});

// 包装模块
define(function(require, exports, module) {
    var a = require('a'),
          b = require('b');
    exports.action = function() {};
} );

• 模块的加载

// 第一个参数[module]，是一个数组，里面的成员是要加载的模块，callback是加载完成后的回调函数。如果将上述的代码改成AMD方式：
require([module], callback);
require(["math"], function (math) {
  math.add(2, 3);
});

CMD

seaJs 旗下的 模块化规范 其名 CMD 还是挺火的 且国人开发。

ES6

不多解释了