後端程式設計師JS模組化使用說明

這次帶給大家後端程式設計師JS模組化使用說明，後端程式設計師JS模組化使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

基礎模式

匿名閉包

匿名閉包是很常用的程式碼隔離方式，宣告匿名物件並立即執行。 匿名函數中聲明的變數和方法以及匿名函數本身不會污染到函數體外，同時匿名函數的呼叫形成一個閉包，使函數體內可以使用函數體外宣告的變數和方法。

(function () {    // ... all vars and functions are in this scope only
    // still maintains access to all globals}());

全域導入

我們知道JavaScript 全域變數的作用域貫穿全域，在函數內也可以使用甚至宣告全域變量，這樣很容易導致程式碼混亂難以管理。
全域導入模式是匿名閉包的變種，增加參數導入全域變量，約定在匿名函數內部只能透過導入的參數來存取外部的模組，從而使模組間的依賴清晰，便於管理。

(function ($, YAHOO) {    // now have access to globals jQuery (as $) and YAHOO in this code}(jQuery, YAHOO));

這種約定不能強制阻止函數體內部存取全域變量，其中一個解決方案是把所有的模組都使用這種方式處理，僅把模組本身導出到全域變量，這樣就可以大幅減少全域變數的使用。

模組導出

模組導出就是將立即執匿名函數的結果傳回賦值給一個全域變數。匿名函數僅將開放的物件傳回，其內部定義的變數、函數仍然對外部不可見。

var MODULE = (function () {    var my = {},
        privateVariable = 1;    function privateMethod() {        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {        // ...
    };    return my;
}());

進階模式

擴充模式

JavaScript 物件支援熱擴充，結合全域導入模式，我們可以擴充模組。

var MODULE = (function (my) {
    my.anotherMethod = function () {        // added method...
    };    return my;
}(MODULE));

這種模式假定 MODULE 已經宣告過，如果沒有宣告呼叫會出錯。

寬擴充模式

寬擴充模式透過一個技巧，呼叫匿名函數傳遞 MODULE || {} 作為參數，解決 MODULE 如果未事先申明呼叫出錯的問題。這個模式還隱藏著一個妙處，就是多個擴充模式可以並行地被呼叫不被堵塞。

var MODULE = (function (my) {    // add capabilities...
    return my;
}(MODULE || {}));

緊擴充模式

寬擴充模式非常棒，但有一個缺點是對無法安全地處理方法屬性的重載。緊擴充模式保持對舊有方法的引用，在定義的新方法中可以靈活地重複使用舊有方法的功能。

var MODULE = (function (my) {    var old_moduleMethod = my.moduleMethod;
    my.moduleMethod = function () {        // method override, has access to old through old_moduleMethod...
    };    return my;
}(MODULE));

複製和繼承

var MODULE_TWO = (function (old) {    var my = {},
        key;    for (key in old) {        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {        // override method on the clone, access to super through super_moduleMethod
    };    return my;
}(MODULE));

克隆和繼承模式差不多是對原有模組影響最小的模組重用方式，這種模式通淺克隆舊模組屬性的方式進行重用，可以結合緊擴充模式處理方法重載的問題。需要注意的是，這是一種淺克隆，當舊模組的屬性是物件的時候，針對這個物件的修改，將會對新舊兩個模組相互影響。

跨文件私有狀態

當一個模組分拆成多個文件，使用寬擴充模式會發現一個限制，各文件中的方法會維護自己的私有狀態而無法在模組的多個文件中共享，下面的範例展示如何在這種情況下對私有狀態再同一個模組見共享。

var MODULE = (function (my) {    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {            delete my._private;            delete my._seal;            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };    // permanent access to _private, _seal, and _unseal
    return my;
}(MODULE || {}));

每個檔案維護一個本地變數 _private，用來分享給別的模組。當模組被載入之後，呼叫 MODULE._seal 銷毀本地變數 _private 的外部存取屬性。如果模組需要擴充，載入檔案之前呼叫 _unseal 將本機變數 _private 輸出到外部存取的屬性，載入之後，呼叫  _seal 銷毀外部存取的屬性。

子模組

子模組就是將模組的屬性也定義為模組，可以靈活使用上述的各種模式。

MODULE.sub = (function () {    var my = {};    // ...
    return my;
}());

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用JS實作加密解密運算

#怎麼利用JS做出引用傳遞與值傳遞

以上是後端程式設計師JS模組化使用說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！