JavaScript模組化程式設計規範

當一個網站複雜度較高需要多人協作開發時，傳統的非模組化程式設計模式容易導致程式碼衝突和依賴等問題，而模組化程式設計的誕生正是為了解決此類問題。然而，在ES6之前，原生JavaScript是不支援模組化的，因此就出現了一系列的JavaScript庫來實現此功能，這些庫主要遵循以下三種規範：

① CommonJS
② AMD
③ CMD

接下來我就粗略地講講這三種規範。

一、CommonJS規範

關鍵詞： module，exports，require

CommonJS規範下的模組呼叫是同步的，也就是說必須等模組載入完成之後，接下來的程式碼才能繼續執行。因此，該規範主要適用於服務端，因為服務端可以直接從硬碟中呼叫所需要的模組，而這個過程速度是非常快的。相比之下，通過網路呼叫所需模組的瀏覽器客戶端則不適合使用該規範。

目前使用該規範的典型代表有：Node.js、微信小程式。

下面以Node.js中的兩個小例子，簡單講講CommonJS規範下的模組化程式設計。

1. 無返回值的模組呼叫

//module.js
console.log(`這是一個模組。`);

//main.js
require(`./module`);    // 或寫成 require(`./module.js`)，但千萬注意不能寫成 require(`module`)

以上module.js和main.js兩個檔案處於同一目錄下。

2. 有返回值的模組呼叫

//module.js
function foo(){
    console.log(`這是一個模組。`);
}
module.exports = {        // 此處提供模組對外介面
    foo: foo    // 此處對外介面中的方法名不一定要與以上定義的方法名一致，比如可以寫成 func: foo，那麼此時呼叫時就應該寫成 module.func()
};

//main.js
var module = require(`./module.js`);    // 載入module模組
module.foo();   // 此處呼叫module模組下的foo方法，該方法名須與模組中對外介面方法名一致

二、AMD規範

關鍵詞： define，require

與CommonJS不同，AMD規範下的模組呼叫是非同步的，主要適用於瀏覽器客戶端。

目前使用該規範的典型代表有：require.js、curl.js。

下面以require.js為例，簡單講講AMD規範下的模組化程式設計。

<!--HTML-->
<script src="scripts/require.js"></script>
<script src="scripts/main.js" data-main="scripts/main"></script>

1. 無返回值的模組呼叫

//module.js
console.log(`這是一個模組。`);

//main.js
require([`scripts/module`]);   // 請求的模組路徑用陣列表示

2. 有返回值的模組呼叫

//module.js
function foo(){
    console.log(`這是一個模組。`);
}
define(function(){
    return {
        foo: foo
    }
});

//main.js
require([`scripts/module`],function(module){
    module.foo();
}); 

三、CMD規範

關鍵詞： use，define，require，exports，module

CMD規範結合了以上兩種規範的特點，既可以同步呼叫，也可以非同步呼叫，在語法上也非常相似。

目前使用該規範的典型代表有：sea.js。

下面就以sea.js為例，簡單講講CMD規範下的模組化程式設計。

<!--HTML-->
<script src="scripts/sea.js"></script>
<!--引入主模組，模組根目錄為sea.js所在目錄，有點類似於C語言中的main函式-->
<script type="text/javascript">
    seajs.use(`main`);
</script>

1. 無返回值的模組呼叫

//module.js
console.log(`這是一個模組。`);

//main.js
define(function(require,exports,module){
    require(`module`);
});

這裡需要重點說明一下，define()中回撥函式中所傳引數名稱不允許修改。

2. 有返回值的模組呼叫

定義模組：

//module.js
function foo(){
    console.log(`這是一個模組。`);
}
define(function(require,exports,module){
    //也可以直接通過return方式暴露模組介面，這樣就與AMD規範相同
    module.exports = {
        foo: foo
    }
});

呼叫模組存在同步和非同步兩種方式：

① 同步呼叫

//main.js
define(function(require,exports,module){
    var module = require(`module`);
    module.foo();
});

② 非同步呼叫

//main.js
define(function(require,exports,module){
    require.async(`module`,function(module){
        module.foo();
    }); 
});

本次有關JavaScript模組化程式設計規範的分享就到這裡，若有不到之處，歡迎指正，謝謝！