Javascript 設計模式 -- Module（模塊）模式

KoreyLee 發(fā)布于2019-08-21 10:23 / 3429人閱讀

摘要：使用字面量表示法定義模塊方法二模式模式使用閉包封裝私有狀態(tài)和組織。它提供了一種包裝混合公有私有方法和變量的方式，防止其污染全局命名空間，防止其泄露到全局作用域。

方法一對象字面量表示法

在對象字面量表示法中，一個對象被描述為一組包含在大括號中，以逗號分隔的 name/value 對。對象內(nèi)的名稱可以是字符串或標識符，后面跟著一個冒號。對象中最后一個 name/value 對不加逗號，否則會出錯。

 /**
 * 使用字面量表示法定義模塊
 */
var myModule = {

    myProperty: "someValue",

    myConfig: {
        useCaching: true,
        language: "en"
    },

    myMethod: function () {
        console.log("the first method");
    },

    myMethod2: function () {
        console.log("the second method");
    },

};

console.log(myModule.myProperty);           // someValue
console.log(myModule.myConfig);             // {useCaching: true, language: "en"}
console.log(myModule.myConfig.useCaching);  // true
myModule.myMethod();                        // the first method
myModule.myMethod2();                       // the second method

方法二 Module模式

Module模式使用閉包封裝“私有”狀態(tài)和組織。它提供了一種包裝混合公有/私有方法和變量的方式
，防止其污染全局命名空間，防止其泄露到全局作用域。通過該模式，只需返回一個公有API，而其他的一切則都維持在私有閉包里。

/**
 * Module方法定義
 */
var myNameSpace = (function () {

    // 私有變量
    var myPrivateVar = 0;

    // 私有函數(shù)
    var myPrivateMethod = function (foo) {
        console.log(foo);
    };


    // 公有API
    return {

        // 公有變量
        myPublicVar: "foo",

        // 公有方法
        myPublicFunction: function (bar) {

            // 操作私有變量
            myPrivateVar ++;

            // 調(diào)用私有函數(shù)
            myPrivateMethod(bar);
        },

        // 公有方法二
        myPublicFunction2: function () {
            console.log("success");
        }
    };
}) ();

console.log(myNameSpace.myPrivateVar);          // undefined
console.log(myNameSpace.myPrivateVar);          // undefined
console.log(myNameSpace.myPublicVar);           // foo
console.log(myNameSpace.myPublicFunction);      // Function
myNameSpace.myPublicFunction2();                // success
myNameSpace.myPublicFunction("i am first");     // i am first

云服務器 GPU云服務器 module模式 javascript設計模式 javascript命令模式 javascript嚴格模式

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

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

深入了解Javascript模塊化編程

摘要：我們將簡單地創(chuàng)建一個匿名函數(shù)并立即執(zhí)行它。注意這對包裹匿名函數(shù)的最外層括號。幸運的是，我們的匿名函數(shù)提供了簡單的變通方法。另外，它還維護了一個利用匿名函數(shù)閉包的私有的內(nèi)置狀態(tài)。本文譯自Ben Cherry的《JavaScript Module Pattern: In-Depth》。雖然個人不太認同js中私有變量存在的必要性，但是本文非常全面地介紹了Javascript中模塊化模...

騫諱護 2019-08-19 14:53 評論0 收藏0
Javascript模塊化編程之【模塊的寫法】

摘要：模塊化編程，已經(jīng)成為一個迫切的需求。但是，不是一種模塊化編程語言，它不支持類，更遑論模塊了。本文總結(jié)了當前模塊化編程的最佳實踐，說明如何投入實用。就是模塊的基本寫法。這樣做除了保證模塊的獨立性，還使得模塊之間的依賴關系變得明顯。隨著WEB的快速崛起，網(wǎng)頁越來越像桌面程序，需要一個團隊分工協(xié)作、進度管理、單元測試等等......開發(fā)者不得不使用軟件工程的方法，管理網(wǎng)頁的業(yè)務邏輯。 Ja...

Riddler 2019-08-20 10:28 評論0 收藏0
分享JS模塊化寫法

摘要：模塊化編程，已經(jīng)成為一個迫切的需求。但是，不是一種模塊化編程語言，它不支持類，更遑論模塊了。一原始寫法模塊就是實現(xiàn)特定功能的一組方法。但是，這樣的寫法會暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫。就是模塊的基本寫法。隨著網(wǎng)站逐漸變成互聯(lián)網(wǎng)應用程序，嵌入網(wǎng)頁的Javascript代碼越來越龐大，越來越復雜。網(wǎng)頁越來越像桌面程序，需要一個團隊分工協(xié)作、進度管理、單元測試等等......開...

Nino 2019-08-21 12:10 評論0 收藏0
Javascript設計模式學習之Module(模塊)模式

摘要：實現(xiàn)模塊的幾種方法對象字面量表示法模式模式模式模塊對象字面量對象字面量型完整版配置對象基本方法根據(jù)配置信息輸出內(nèi)容重寫當前的配置信息輸出結(jié)果值模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和公有封裝的方法。該模式返回一個對象。 javascript實現(xiàn)模塊的幾種方法: 對象字面量表示法 Module模式 AMD模式 CommonJS模式 ECMAScript Harmony模塊 ...

付永剛 2019-08-19 17:48 評論0 收藏0
JavaScript 模塊化現(xiàn)狀

摘要：比如，這種模擬并不符合某些邊緣情況。然而，使用，結(jié)果是在引導模塊時，將指向，與使用的行為一致。這將更容易完成代碼庫的過渡，并使成為可能。原文作者：Johannes Ewald @Jhnnns 原文鏈接：The state of JavaScript modules 已獲原作者授權翻譯及發(fā)布 showImg(https://segmentfault.com/img/bVOpwz?w...

draveness 2019-08-20 16:52 評論0 收藏0
深入理解JavaScript系列3:全面解析Module模式

摘要：總結(jié)上面的大部分方式都可以互相組合使用的，一般來說如果要設計系統(tǒng)，可能會用到松耦合擴展，私有狀態(tài)和子模塊這樣的方式。簡介 Module模式是JavaScript編程中一個非常通用的模式，一般情況下，大家都知道基本用法，本文嘗試著給大家更多該模式的高級使用方式。首先我們來看看Module模式的基本特征：模塊化，可重用封裝了變量和function，和全局的namaspace不接觸...

付倫 2019-08-19 17:19 評論0 收藏0