模块格式：CommonJS AMD CMD UMD ES6

皆为前端工程化中定义模块(module)的规则，如：模块标识，模块依赖，模块实现，模块对外接口，模块加载；

实现时有：异步，同步，依赖前置，依赖就近，预执行，懒执行，软依赖，硬依赖，模块对象支持类型等差异；

Javascript的灵活性、借鉴性、标准难产落地性，带来模块的实现方式(运行时加载/编译静态加载)有本质的差异，代码风格(require,return/import,export)有形式上的差异。

---

CommonJS

CommonJS Modules/1.0规范，概述, wiki

在服务器上或本地桌面应用程序，定义了模块格式，如node模块的实现，

仅支持对象类型的模块，同步加载。

如模块qux：

// filename: qux.js

// dependencies
var $ = require('jquery');

// methods
function foo(){};

// exposed public method (single)
module.exports = foo;

// filename: qux.js
var $ = require('jquery');
var _ = require('underscore');

// methods
function foo(){};    //    private because it's omitted from module.exports (see below)
function bar(){};    //    public because it's defined in module.exports
function baz(){};    //    public because it's defined in module.exports

// exposed public methods
module.exports = {
    bar: bar,
    baz: baz
};

AMD

Asynchronous Module Definition, 概述, Why AMD?

异/同步加载

支持对象、函数、构造器、字符串、JSON等各种类型的模块。

AMD 早期实现为 依赖前置，提前执行

define(id?, dependencies?, factory);

如模块qux：

// filename: qux.js
define(['jquery'], function ($) {
     
    // methods
    function foo(){
     };

    // exposed public methods
    return foo;
});

// filename: qux.js
define(['jquery', 'underscore'], function ($, _) {
     
    // methods
    function foo(){
     }; // private because it's not returned (see below)
    function bar(){
     }; // public because it's returned
    function baz(){
     }; // public because it's returned

    // exposed public methods
    return {
        bar: bar,
        baz: baz
    }
});

兼容CommonJS规范：

// filename: qux.js
define(function (require, exports, module) {
     
    // dependencies
    var $ = require('jquery');
    _ = require('underscore');

    // exposed public methods
    exports.foo= function () {
     }
});

CMD

Common Module Definition, 概述, 中文

define(function(require,exports,module){...});

CMD实现为 依赖就近，延迟执行

UMD

Universal Module Definition

识别当前环境所支持的模块风格，兼容不同的加载规范

// code from https://github.com/tangshuang/omd
(function(factory){
     
    "use strict";

    // change to your module name
    var NAME = 'omd';

    if(typeof define == 'function' && (define.cmd || define.amd)) { // amd & cmd
        define(function(require){
     
            var requires = {
                /**
                 * dependences: 
                 * 1. need to fill requires
                 * 2. use require, moudule name should be defined before
                 * 3. relative path is not allowed in cmd & amd mode
                 */
                // 'jquery' : require('jquery'),
                // 'bootstrap' : require('bootstrap')
            };
            var _require_ = function(key) {
     
                return requires[key];
            }
            return factory(_require_);
        });
    }
    else if(typeof module !== 'undefined' && typeof exports === 'object') { // nodejs
        module.exports = factory(require); // in node, require can be used everywhere generally
    }
    else { // none module
        this[NAME] = factory(function(key){
     
            return this[key];
        }.bind(this));
    }
}).call(this || (typeof window !== 'undefined' ? window : global),function(require){
     
    "use strict";

    // require('jquery');

    /**
     * use return object to export. i.e.
     * return {
        name : 'module name',
        init : function(opotions) {},
        destory : function() {}
     };
     */

});

(function (root, factory) {
     
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
     
    // methods
    function foo(){
     }; // private because it's not returned (see below)
    function bar(){
     }; // public because it's returned
    function baz(){
     }; // public because it's returned

    // exposed public methods
    return {
        bar: bar,
        baz: baz
    }
}));

ES6

import, export

ES标准下的模块，具有静态结构特性，编译时 Tree Shaking 可去 dead-code ；

---

引用自及扩展阅读：

• Modules - CommonJS Spec Wiki
• Modules | Node.js Documentation
• Why Web Modules?
• David Calhoun: What is AMD, CommonJS, and UMD?
• 黄玄：JavaScript Module Loader
• 黄玄：JavaScript 模块化七日谈
• 阮一峰：Module 的语法 - ECMAScript 6入门
• 阮一峰：Javascript模块化编程
• 掘金：JavaScript 模块简史
• 玉伯：前端模块化开发那点历史 · seajs/seajs
• GongYong：Node.js模块的接口设计模式