JS設計模式之Module（模塊）模式、Revealing Module（揭示模塊）模式

xavier 發(fā)布于2019-08-23 14:40 / 1543人閱讀

摘要：模塊模式概念模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和共有封裝的方法。應用將暴露的公有指針指向到私有函數(shù)和屬性上參考設計模式設計模式系列文章設計模式之工廠模式設計模式之單例模式設計模式之外觀模式設計模式之模塊模式揭示模塊模式

Module（模塊）模式 概念

Module模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和共有封裝的方法。

通過這種方式，能夠使一個多帶帶的對象擁有共有/私有方法和變量，從而屏蔽來自全局作用局的特殊部分。
產(chǎn)生的結果是：函數(shù)名與在頁面上其他腳本定義的函數(shù)沖突的可能性降級

應用

實現(xiàn)一個簡單的計數(shù)器

orderModule外的代碼無法直接讀取getNum(),addNum()和subNum(),orderNum變量實際上是與全局作用域隔離的，因此它表現(xiàn)的就像是一個四有變量，他的存在被局限于模塊的閉包內(nèi)，因此唯一能訪問其作用域的代碼就是這三個函數(shù)。

這樣實現(xiàn)同時也進行了有效的命名空間設置。

var orderModule = (function() {
    var orderNum = 1;

    return {
        getNum: function() {
            return orderNum;
        },
        addNum: function() {
            orderNum = orderNum + 1;
        },
        subNum: function() {
            orderNum = orderNum > 1 ? orderNum - 1 : orderNum;
        }
    }
})();

orderModule.getNum();

Revealing Module（揭示模塊）模式 概念

揭示模塊模式是在模塊模式的基礎上進行改進，在私有范圍內(nèi)簡單定義所有的函數(shù)和變量，并返回一個匿名對象，它擁有指向私有函數(shù)的指針，該函數(shù)是展示為共有的方法。

應用

var orderModule = (function() {
    var orderNum = 1;
    
    function getNum() {
        return orderNum;
    }
    
    function addNum() {
       orderNum = orderNum + 1;
    }
    
    function subNum() {
        orderNum = orderNum > 1 ? orderNum - 1 : orderNum;
    }

    //將暴露的公有指針指向到私有函數(shù)和屬性上
    return {
        get: getNum,
        add: addNum,
        sub: subNum
    }
})();

orderModule.get();

參考

《JavaScript設計模式》

JS設計模式系列文章

JS設計模式之Factory（工廠）模式
JS設計模式之Singleton（單例）模式
JS設計模式之Facade（外觀）模式
JS設計模式之Module（模塊）模式、Revealing Module（揭示模塊）模式

云服務器 GPU云服務器 module模式 Java設計模式之（五）——代理模式 js中module JS設計模式

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100963.html

Javascript 設計模式 -- Revealing Module（揭示模塊）模式

摘要：在模塊代碼底部，它會很容易指出哪些函數(shù)和變量可以被公開訪問，從而改善可讀性。這是因為私有函數(shù)將繼續(xù)引用私有實現(xiàn)，該模式不適用與公有成員，只適用于函數(shù)。引用私有變量的公有對象成員也遵守無補丁規(guī)則。這是對Module模式的一個改進版本。方便集中管理公有API，使公有API更簡潔清楚。 var myRevealingModule = function () { var priv...

Apollo 2019-08-21 10:23 評論0 收藏0
JS設計模式之Facade（外觀）模式

摘要：概念模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。參考設計模式設計模式系列文章設計模式之模塊模式揭示模塊模式設計模式之單例模式設計模式之外觀模式概念 Facade模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性?？梢园阉氤墒呛喕疉PI來展示給其他開發(fā)人員。優(yōu)缺點優(yōu)點簡化接口使用者與代碼解耦易于使用缺點存在隱性成本，性...

xiaodao 2019-08-23 13:57 評論0 收藏0
JS設計模式之Singleton（單例）模式

摘要：定義限制類的實例化次數(shù)只能是一次。如果該實例不存在的情況下，可以通過一個方法創(chuàng)建一個類來實現(xiàn)創(chuàng)建類的新實例，如果實例已經(jīng)存在，它會簡單返回該對象的引用。適用場景需要頻繁實例化然后銷毀的對象。頻繁訪問數(shù)據(jù)庫或文件的對象。定義限制類的實例化次數(shù)只能是一次。如果該實例不存在的情況下，可以通過一個方法創(chuàng)建一個類來實現(xiàn)創(chuàng)建類的新實例，如果實例已經(jīng)存在，它會簡單返回該對象的引用。適用場景 ...

SillyMonkey 2019-08-23 14:31 評論0 收藏0
JS設計模式--Factory(工廠)模式

摘要：對解耦是很有用對。設計模式系列文章設計模式之觀察者模式發(fā)布訂閱模式設計模式之工廠模式設計模式之單例模式設計模式之外觀模式設計模式之模塊模式揭示模塊模式工廠模式提供一個通用的接口來創(chuàng)建對象示例 //Car構造函數(shù) function Car(option) { this.doors = option.doors || 4 this.color = option...

UsherChen 2019-08-26 13:35 評論0 收藏0
JS設計模式之Obeserver（觀察者）模式、Publish/Subscribe（發(fā)布/訂閱）模式

摘要：觀察者模式定義設計模式中對的定義一個對象稱為維持一系列依賴于它觀察者的對象，將有關狀態(tài)的任何變更自動通知給它們。如圖模式比較觀察者模式則多了一個類似于話題調(diào)度中心的流程，發(fā)布者和訂閱者解耦。 Obeserver（觀察者）模式定義《js設計模式》中對Observer的定義：一個對象（稱為subject）維持一系列依賴于它（觀察者）的對象，將有關狀態(tài)的任何變更自動通知給它們。《設計模...

荊兆峰 2019-08-26 13:37 評論0 收藏0