> 認識AMD、CMD、UMD、CommonJS > ### 1、AMD（Asynchromous Module Definition - 異步模塊定義） > > AMD是RequireJS在推廣過程中對模塊定義的規范化產出，AMD是異步加載模塊，推崇依賴前置。 ``` define('module1', ['jquery'], ($) => { //do something... }); ``` > ### 2、CMD（Common Module Definition - 公共模塊定義） > > CMD是SeaJS在推廣過程中對模塊定義的規范化產出，對于模塊的依賴，CMD是延遲執行，推崇依賴就近。 ``` define((require, exports, module) => { module.exports = { fun1: () => { var $ = require('jquery'); return $('#test'); } }; }); ``` > >如上代碼，只有當真正執行到fun1方法時，才回去執行jquery。 > >同時CMD也是延自CommonJS Modules/2.0規范 > > ### 3、CommonJS > >提到CMD，就不得不提起CommonJS，CommonJS是服務端模塊的規范，由于Node.js被廣泛認知。 >>根據CommonJS規范，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件并執行，最后返回文件內部的module.exports對象。 ``` //file1.js moudle.exports = { a: 1 }; //file2.js var f1 = require('./file1'); var v = f1.a + 2; module.exports ={ v: v }; ``` >>CommonJS 加載模塊是同步的，所以只有加載完成才能執行后面的操作。像Node.js主要用于服務器的編程，加載的模塊文件一般都已經存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規范比較適用。但如果是瀏覽器環境，要從服務器加載模塊，這是就必須采用異步模式。所以就有了 AMD CMD 解決方案。 > ### 4、UMD（Universal Module Definition - 通用模塊定義） > > UMD是AMD和CommonJS的一個糅合。AMD是瀏覽器優先，異步加載；CommonJS是服務器優先，同步加載。 > >既然要通用，怎么辦呢？那就先判斷是否支持node.js的模塊，存在就使用node.js；再判斷是否支持AMD（define是否存在），存在則使用AMD的方式加載。這就是所謂的UMD。 ``` ((root, factory) => { if (typeof define === 'function' && define.amd) { //AMD define(['jquery'], factory); } else if (typeof exports === 'object') { //CommonJS var $ = requie('jquery'); module.exports = factory($); } else { //都不是，瀏覽器全局定義 root.testModule = factory(root.jQuery); } })(this, ($) => { //do something... 這里是真正的函數體 }); ```