理解前端模組化（CommonJs,AMD和CMD）-js教程-PHP中文網

前端模組規格有三種：CommonJs,AMD和CMD。

　　CommonJs用在伺服器端，AMD和CMD用在瀏覽器環境。

　　AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。

　　CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出。

　　AMD:提前執行（非同步載入：依賴先執行）+延遲執行

　　CMD:延遲執行（運行到需加載，根據順序執行）

#　模組

　　函數寫法

function f1(){
    //...
}
function f2(){
    //...
}

登入後複製

　　模組就是實作特定功能的文件，把幾個函數放在一個檔案裡就構成了一個模組。需要的時候載入這個文件，呼叫其中的函數即可。

　　但這樣做會污染全域變數，無法保證不與其他模組發生變數名稱衝突，而且模組成員之間沒什麼關係。

　　物件寫法

var module = {
　　star : 0,
　　f1 : function (){
　　　　//...
　　},
　　f2 : function (){
　　　　//...
　　}
};
module.f1();
module.star = 1;

登入後複製

　　模組寫成一個對象，模組成員都封裝在物件裡，透過呼叫物件屬性，存取使用模組成員。但同時也暴露了模組成員，外部可以修改模組內部狀態。

　　立即執行函數

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log(&#39;ok&#39;);
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
module.f1();  //ok
console.log(module.star)  //undefined

登入後複製

　　外部無法存取內部私有變數

　CommonJs

　　CommonJS是伺服器端模組的規範，由Node推廣使用。由於服務端程式設計的複雜性，如果沒有模組很難與作業系統及其他應用程式互動。使用方法如下：

math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2

登入後複製

　　根據CommonJS規格: