Javascript 設(shè)計(jì)模式 -- Module（模塊）模式

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

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

方法一對(duì)象字面量表示法

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

 /**
 * 使用字面量表示法定義模塊
 */
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)和組織。它提供了一種包裝混合公有/私有方法和變量的方式
，防止其污染全局命名空間，防止其泄露到全局作用域。通過(guò)該模式，只需返回一個(gè)公有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

云服務(wù)器 GPU云服務(wù)器 module模式 javascript設(shè)計(jì)模式 javascript命令模式 javascript嚴(yán)格模式

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85439.html

相關(guān)文章

深入了解Javascript模塊化編程

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

騫諱護(hù) 2019-08-19 14:53 評(píng)論0 收藏0
Javascript模塊化編程之【模塊的寫法】

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

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

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

Nino 2019-08-21 12:10 評(píng)論0 收藏0
Javascript設(shè)計(jì)模式學(xué)習(xí)之Module(模塊)模式

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

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

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

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

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

付倫 2019-08-19 17:19 評(píng)論0 收藏0