JavaScript模組化開發詳細分析

模組化開發在程式開發中是一個非常重要的概念，一個優秀的模組化專案的後期維護成本可以大大降低。本文主要介紹了JavaScript模組化開發的那些事，文中透過一個小故事比較直觀地闡述了模組化開發的過程。

小A是某個創業團隊的前端工程師，負責寫專案的Javascript程式。

全域變數衝突

根據自己的經驗，小A先把一些常用的功能抽出來，寫成函數放到一個公用檔案base.js：

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

小A把這些函數都放在_物件內，以防過多的全域變數造成衝突。他告訴團隊的其他成員，如果誰想使用這些函數，只要引入base.js就可以了。

小C是小A的同事，他向小A反映：自己的頁面引入了一個叫做underscore.js的類別庫，而且，這個類別庫也會佔用_這個全域變量，這樣一來就會跟base.js中的_衝突了。小A心想，underscore.js是第三方類別函式庫，估計不好改，但base.js已經在很多頁面鋪開，不可能改。最後小A只好無奈地把underscore.js佔用的全域變數改了。

此時，小A發現，把函數都放在一個名字空間內，可以減少全域變數衝突的機率，卻沒有解決全域變數衝突這個問題。

依賴

隨著業務的發展，小A又編寫了一系列的函數庫和UI元件，比方說標籤切換元件tabs.js，此元件需呼叫base.js以及util.js中的函數。

有一天，新同事小D跟小A反映，自己已經在頁面中引用了tabs.js，功能卻不正常。小A一看就發現問題了，原來小D不知道tabs.js依賴base.js以及util.js，他並沒有加入這兩個檔案的引用。於是，他馬上進行修改：

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

然而，功能還是不正常，此時小A教訓小D說：「都說是依賴，那被依賴方肯定要放在依賴方之前啊」。原來小D把base.js和util.js放到tabs.js之後了。

小A心想，他是作者，自然知道組件的依賴情況，但是別人就難說了，特別是新人。

過了一段時間，小A為標籤切換元件增加了功能，為了實現這個功能，tabs.js還需要呼叫ui.js中的函數。這時，小A發現了一個嚴重的問題，他需要在所有呼叫了tabs.js的頁面上增加ui.js的引用！ ！ ！

又過了一段時間，小A優化了tabs.js，這個元件已經不再依賴util.js，所以他在所有用到tabs.js的頁面中移除了util.js的引用，以提高效能。他這項修改，出大事了，測試組MM告訴他，有些頁面不正常了。小A一看，恍然大悟，原來某些頁面的其他功能用到了util.js中的函數，他把這個檔案的引用去掉導致​​出錯了。為了確保功能正常，他又把程式碼恢復了。

小A又想，有沒有辦法在修改依賴的同時不用逐一修改頁面，也不影響其他功能呢？

模組化

小A逛網路的時候，無意間發現了一種新奇的模組化編碼方式，可以把它之前遇到的問題全部解決。

在模組化程式設計方式下，每個檔案都是一個模組。每個模組都由一個名為define的函數建立。例如，把base.js改造成一個模組後，程式碼會變成這樣：

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

base.js向外提供的介面都會被加入到exports這個物件。而exports是一個局部變量，整個模組的程式碼都沒有佔用半個全域變數。

那要如何呼叫某個模組提供的介面呢？以tabs.js為例，它要依賴base.js和util.js：

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var p_tabs = _.$('tabs');
    // .... 其他代码
});

一個模組可以透過局部函數require來取得其他模組的介面。此時，變數_和util都是局部變量，並且，變數名稱完全是受開發者控制的，如果你不喜歡_，那也可以用base：

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

一旦要移除util.js、新增ui.js，那就只要修改tabs.js就可以了：

define(function(require, exports, module) {
    var base = require('base.js'), ui = require('ui.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

載入器

因為缺乏瀏覽器的原生支持，如果我們要用模組化的方式編碼，就必須藉助於一個叫做載入器（loader）的東西。

目前載入器的實作很多，像是require.js、seajs。而JRaiser類別庫也有自己的載入器。

#

以上是JavaScript模組化開發詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！