Common JS、AMD、CMD 和 UMD 的区别

Common JS

• 一个单独的文件就是一个模块，有本身的做用域。在一个文件里定义的变量、函数、类都是私有的，对其余文件不可见。
• 加载模块使用 require 方法，该方法读取一个文件并执行，最后返回该文件内部的 exports 对象。
• 模块加载的顺序，按照其在代码中出现的顺序。加载模块是同步的，因此只有加载完才能执行后面的操做。
• 模块能够屡次加载，可是只会在第一次加载时运行一次，而后运行结果就被缓存，之后再加载，就会直接读取缓存结果。要想让模块再次运行，必须清除缓存。

像 Node.js 主要用于服务器的编程，加载的模块文件通常都已经存在本地硬盘，因此加载起来比较快，不用考虑异步加载的方式，因此 CommonJS 规范比较适用。但若是是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。因此就有了 AMD 和 CMD 解决方案。

AMD

• 异步加载模块规范，这样模块和模块的依赖能够被异步加载。这和浏览器的异步加载模块的环境恰好匹配。
• 本规范只定义了一个函数 define，它是全局变量。
• define.amd 是听从 AMD 规范的一个特殊标识符，它的值为一个对象。

CMD

• 本规范只定义了一个函数 define，它是全局变量。
• define.cmd 是听从 CMD 规范的一个特殊标识符，它的值为一个对象。

if (typeof define === "function" && define.cmd) {
  // 有 Sea.js 等 CMD 模块加载器存在
}

复制代码

UMD

UMD 是但愿解决跨平台的解决方案。

• UMD 是 AMD 和 Common JS 的糅合。
• AMD 以浏览器第一的原则发展，异步加载模块。
• Common JS 以服务器第一原则发展，选择同步加载，它的模块无需包装。
• UMD 先判断是否支持 Node.js 的模块（ exports ） 是否存在，存在则使用 Node.js 模块模式。而后再判断是否支持 AMD （ define 是否存在 ），存在则使用 AMD 方式加载模块。

(function(window, factory){
    if(typeof exports === 'object'){
        // Common JS
        module.exports = factory();
    }else if(typeof define === 'function' && defined.amd){
        // AMD 方式
        define(factory);
    }else{
        window.eventUtil = factory();
    }
})(this, function(){
    // module ...
})

复制代码

扩展

• 前端模块化开发那点历史
• Sea.js是如何工做的？