JS篇 命名規範： AMD、CMD、CommonJS

如今流行的命名規範有如下幾種：

1. AMD規範　　　　　　　　實現者：requirejs、dojo 

2. CMD規範　　　　　　　　實現者：seajs

3. CommonJS規範　　　　  實現者：NodeJS

4. ES6中的規範

5. UMD(Universal)

 

AMD規範源於CommonJS中的Transport/C規範，格式以下：

define(id?, dependencies?, factory);

模塊名規範：

1. 模塊名由：多個string name 或者 '/'組成；

2. string name聽從駝峯規則，或者：'.', '..'；

3. 模塊名禁止帶擴展名，如：'.js'；

4. 頂級路徑模塊名以根空間開始，相對路徑模塊名：以'.', '..'開始；

依賴規範：

1. 若是是["require", "exports", "module"]，按照CommonJS規範，不然將參數做爲參數列表注入factory中。

工廠規範：

1. 無依賴參數時，經過toString來require依賴；有依賴參數則按依賴參數來訪問；

2. 依賴先執行，工廠後執行；

 

define.amd屬性

1. amd屬性標識該define函數遵照AMD規範，以區別於不遵照AMD的define函數；

2. amd規範若是更新，則會以amd2屬性爲名稱；

3. amd屬性的值是一個對象，但對象具體內容有實現者自定義；

 

與CommonJS的關係：

1. 只要CommonJS（實現者：NodeJS）的factory中無同步的require就能夠通用，由於瀏覽器端不支持，同時性能上也有影響。

 

CMD規範：

define(function(require, exports, module) {
  // The module code goes here
});

1. require(id)用於同步加載

2. require.async(idList, callback)用於異步加載

3. CMD區分CommonJS：module存在，define不存在屬於Node環境；module,define都存在屬於CMD環境；

 

 UMD：通用模塊定義方式，意在提供通用的代碼將實現包裹起來，在多種平臺下（AMD、CMD、Node、Browser Global）使用；

// 兼容AMD與瀏覽器全局變量：AMD環境中典型Case: 依賴模塊須要加載完成後，才執行本模塊；不然Global下則直接從Global取；
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['depModA', 'depModB'], function (depModA, depModB) {
            return (root.amdWebGlobal = factory(depModA, depModB));
        });
    } else if (typeof exports === 'object') {
        // Node or CMD.
        module.exports = factory(require('depModA'), require('depModB'));
    } else {
        // Browser globals
        root.amdWebGlobal = factory(root.depModA, root.depModB);
    }
}(this, function (depModA, depModB) {

    // ..... (implementation) 實現部分

    return {};
}));

我的認爲定義各環境通用的代碼能夠以下（還沒有使用，目前僅做參考）：

// 1. Module factory.
function factory(optionalDepList){

  // CODE ... implementation.
  console.log("Factory implementation");
  
  // return object or else.
  return;
}

// 2. Module name.
factory.modName = '...';
// 3. Dependant List.
factory.depList = [
  'dependModuleName1',
  'dependModuleName2'
];



// Universal CODE.
(function(root, factory){

  if(typeof define === 'function' && !!define.amd){
    // AMD
    define(factory.modName, factory.depList, factory);
  }else if(typeof define === 'function'){
    // CMD
    define(function(require, exports, module){
      module.exports = factory.apply(root, arguments) || module.exports;
    });
  }else if(typeof module === 'object' && typeof define === 'undefined'){
    // CommonJS|NodeJS
    module.exports = factory.apply(root, arguments) || module.exports;
  }else{
    // Browser global
    root[factory.modName] = factory.apply(root);
  }

})(this, factory);

 

 

 

 

參考：

1. CMD規範

2. AMD規範

3. SeaJS

4. UMD