AMD、CMD、CommonJS、UMD和ES Module的写法

相信大家经常看到AMD、CMD、CommonJS、UMD和ES Module这几个js模块化名词，但是对这些名词都是一知半解，今天就跟大家梳理一下这些名词和对应的技术细节。之所以出现这些js模块化规范是因为早期的js语言是没有模块化体系的，开发者为了方便代码组织，逐渐形成AMD和CMD规范，后来出现了主要在nodejs中使用的CommonJS规范，这么多的规范出来后，为了代码复用，又提出了UMD规范来统一兼容AMD、CMD、CommonJS，随着js语言的发展，规范的制定者也意识到模块化的重要性，于是增加了ES Module。

1. AMD

define(['jquery'], function(jquery){ // 此为工厂函数
    function myFunc(){
        // 依赖 jquery
    };
 
    // 暴露公共方法
    return myFunc;
})

RequireJS就是AMD的一个典型的实现

2. CMD

define(function(require, exports, module) {
    var jquery = require('./jquery'); // 就近书写依赖
    
    function myFunc(){
        // 依赖 jquery
    }
 
    // 通过 exports 对外提供接口
    exports.myFunc = myFunc;
 
    // 或者通过 module.exports 提供整个接口
    module.exports = {
        myFunc: myFunc
    };
})

Sea.js就是CMD的一个典型的实现

3. CommonJS

var $ = require('jquery');

function myFunc(){}

module.exports = myFunc;

nodejs就是CommonJS的一个典型的实现

4. UMD（兼容全局变量、AMD、CMD和CommonJS）

;(function(global, factory){
    'use strict';
    
    if(typeof module === 'object' && typeof module.exports === 'object'){
        module.exports = global.document ? factory(global, true) : function(w){
            if(!w.document){
                throw new Error('jQuery requires a window with a document');
            }
            return factory(w);
        };
    }else if(define && define.cmd){
        define(function(){
            return factory(global);
        });
    }else{
        factory(global);
    }
})(typeof window !== 'undefined' ? window : this, function(window, noGlobal){
    // 核心逻辑代码

    // 使代码支持 amd 模块加载
    if(typeof define === 'function' && define.amd){
        define('jquery', [], function(){
            return jQuery;
        });
    }

    return {
        add: function(a, b){
            return a + b;
        }
    }
});

大部分的库都做到兼容处理

5. ES Module

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
 
export {firstName, lastName, year};

现在大部分的开发都写es6的语法了，借助babel进行转换兼容。