模塊模式

模塊模式

Module模式最初定義在傳統(tǒng)的軟件工程中见秤,為類提供私有和公有封裝的方法砂竖。在JavaScript中真椿,并不能可以直接聲明類鹃答,但我們可以使用閉包來封裝私有的屬性和方法,進(jìn)而模擬類的概念突硝,在JavaScript中實現(xiàn)Module模式测摔。通過這種方式,我們就使得一個單獨的對象擁有公有/私有方法和變量解恰,從而屏蔽來自全局作用域的特殊部分锋八,也就大大降低了變量聲明之間和函數(shù)聲明之間沖突的可能性。

var myModule = (function () {

// 私有變量
var privateVar = 0;

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

return {
    // 私有變量
    publicVar: "foo",

    // 公有函數(shù)
    publicFun: function (arg) {

        // 修改私有變量
        privateVar ++;

        // 傳入bar調(diào)用私有方法
        privateFun(arg);
    }
};
}) ();

在JavaScript中一個最廣泛使用的設(shè)計模式是模塊的模式护盈。模塊模式使用了JavaScript中的一個很棒的特性-閉包- 用來給你方法中的隱私一些控制這樣的第三方應(yīng)用程序不能訪問私有數(shù)據(jù)或覆蓋它挟纱。在這篇文章教你什么是閉包,它是如何工作的腐宋,以及如何利用它在你的JavaScript代碼中實現(xiàn)模塊模式紊服。

什么是閉包檀轨?

閉包是JavaScript語言的一種構(gòu)造。在JavaScript內(nèi)所有變量都能在全局范圍內(nèi)訪問欺嗤,除非變量在函數(shù)內(nèi)用var關(guān)鍵字聲明過参萄。

variable1 = 1; //全局范圍
var variable2 = 2; // 不在一個函數(shù)內(nèi): 全局范圍
   
function funcName() {
  variable3 = 3; // 沒用var關(guān)鍵字聲明: 全局范圍
  var variable4 = 4; //僅本地訪問
}

在一個函數(shù)內(nèi),你也可以獲得全局范圍和每個你所在的函數(shù)上級范圍的訪問權(quán)限煎饼。換句話說讹挎,函數(shù)內(nèi)聲明變量只能在函數(shù)包圍范圍內(nèi)訪問。

var globalvar = 1; //全局范圍

function outer() {
  var outervar = 2; // outer()范圍內(nèi)

  function inner() {
    var innervar = 3; // inner()范圍內(nèi)
    console.log(globalvar); // => 1
    console.log(outervar); // => 2
    console.log(innervar); // => 3
  }

  console.log(globalvar); // => 1
  console.log(outervar); // => 2
  console.log(innervar); // => Reference Error引用錯誤;
}

console.log(globalvar); // => 1
console.log(outervar); // => Reference Error引用錯誤
console.log(innervar); // => Reference Error引用錯誤

每一個真正的JavaScript程序員應(yīng)該知道這一點吆玖,除非他不思進(jìn)取筒溃。知道這一點,你可以得出這樣的結(jié)論沾乘,用一種辦法來保持你所有代碼在全局命名空間外铡羡,是正確的。這特別有用意鲸,當(dāng)你不想給任何人在未經(jīng)許可的情況下有重寫你任何代碼的機會烦周。你可以通過使用一個匿名函數(shù)(不給它命名,沒有被賦予一個變量)立即執(zhí)行自身怎顾。這是眾所周知的自調(diào)用匿名函數(shù)(SIAF)读慎,雖然它可能是更準(zhǔn)確地稱為立即調(diào)用的函數(shù)表達(dá) (IIFE–讀做“iffy”) -作者Ben Alman。

(function() {
    // 這函數(shù)立即執(zhí)行槐雾,內(nèi)部所有變量都是私有的
}());

緊接著右大括號夭委,是左右括號于是函數(shù)將立即執(zhí)行。圍繞整個函數(shù)表達(dá)式的括號不是運行的代碼必需的募强,但一般用作給其他開發(fā)人員的信號株灸,這是一個IIFE,而不是一個標(biāo)準(zhǔn)函數(shù)擎值。有些人喜歡在前面加上一個驚嘆號(!)或分號(;)慌烧,而不是用括號包起來。
用閉包的模塊模式
知道了閉包是什么鸠儿,我們就可以使用模塊模式創(chuàng)建對象屹蚊。通過返回一個對象或變量并賦給一個函數(shù)外變量,這樣我們可以暴露任何希望暴露給外界的进每,我們可以有公開和私有的方法汹粤。

var Module = (function() {
// 下面函數(shù)是私有的,但可以被公開函數(shù)訪問
function privateFunc() { … };
// 返回一個對象賦予Module
return {
    publicFunc: function() {
        privateFunc(); // publicFunc可以直接訪問privateFunc
    }
};
}());

這就是模塊模式的本質(zhì)田晚。您還可以使用參數(shù)傳入或縮寫常用資源的名稱:

var Module = (function($, w, undefined) {
// …
// return {…};
}(jQuery, window));

我傳入jQuery和window嘱兼,被分別縮寫為$和w。注意我沒有傳任何東西作為第三個參數(shù)贤徒。這樣參數(shù)undefined將是undefined芹壕,所以它完美地工作胃惜。有些人這樣處理undefined是因為無論如何,它是可編輯的哪雕。所以船殉,如果你判斷某某是否是undefined,但undefined可能已經(jīng)改變斯嚎,你的比較將不起作用利虫。這種技術(shù)保證它將按預(yù)期工作。

透露模塊模式revealing module pattern

透露模塊模式是另一種方式來寫模塊模式堡僻,需要更多點代碼糠惫,但有時更容易理解和閱讀。不同于在IIFE中定義所有私有變量并在返回對象中定義公開方法钉疫,你把所有方法都寫在IIFE中硼讽,只是“透露”哪些是你想公開在return語句內(nèi)的。

var Module = (function() {
// 現(xiàn)在所有函數(shù)直接互訪
var privateFunc = function() {
    publicFunc1();
};

var publicFunc1 = function() {
    publicFunc2();
};

var publicFunc2 = function() {
    privateFunc();
};

// 返回對象賦予Module
return {
    publicFunc1: publicFunc1,
    publicFunc2: publicFunc2
};
}());

對比正常的模塊模式牲阁,透露模塊模式有幾個優(yōu)點:
所有函數(shù)的聲明和實現(xiàn)都在同一個地方固阁,從而制造較少的混亂。
私有函數(shù)現(xiàn)在可以訪問公開函數(shù)城菊,如果他們需要备燃。
當(dāng)一個公開函數(shù)需要調(diào)用另一個公開函數(shù)時,他們調(diào)用publicFunc2()凌唬,而不是用this.publicFunc2()并齐,從而節(jié)省了幾個字符。
透露模塊模式的唯一真正的缺點客税,正如我所說况褪,是你必須寫更多的代碼,因為你必須先寫好函數(shù)然后再把它的名字寫在return語句內(nèi)更耻,盡管它最終可能會因為你可以忽略this.部分而節(jié)省你的代碼测垛。

擴展模塊模式

我想談的最后一件事是使用模塊模式擴展已經(jīng)存在的模塊。這很常用酥夭,當(dāng)為jQuery之類的庫做插件赐纱,如下脊奋。

1 2 3 4 5 6 7   
var jQuery = (function($) {
$.pluginFunc = function() {
    …
}

return $;    
}(jQuery));

此代碼是相當(dāng)靈活的熬北,因為你甚至不需要var jQuery=或接近尾部的return語句。沒有它們jQuery仍將可以用這個新方法擴展诚隙。實際上返回和賦值整個jQuery對象讶隐,可能在性能上有損失,但是久又,如果你想在擴展jQuery的同時巫延,分配jQuery到一個新的變量名效五,你只需改變第一行的jQuery為任何你想要的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末炉峰,一起剝皮案震驚了整個濱河市畏妖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌疼阔,老刑警劉巖戒劫,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異婆廊,居然都是意外死亡迅细,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門淘邻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茵典,“玉大人,你說我怎么就攤上這事宾舅⊥嘲ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵筹我,是天一觀的道長砂吞。 經(jīng)常有香客問我,道長崎溃,這世上最難降的妖魔是什么蜻直? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮袁串,結(jié)果婚禮上概而,老公的妹妹穿的比我還像新娘。我一直安慰自己囱修,他們只是感情好赎瑰,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著破镰,像睡著了一般餐曼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鲜漩,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天源譬,我揣著相機與錄音,去河邊找鬼孕似。 笑死踩娘,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的喉祭。 我是一名探鬼主播养渴,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼雷绢,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了理卑?” 一聲冷哼從身側(cè)響起翘紊,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎藐唠,沒想到半個月后霞溪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡中捆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年鸯匹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泄伪。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡殴蓬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蟋滴,到底是詐尸還是另有隱情染厅,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布津函,位于F島的核電站肖粮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏尔苦。R本人自食惡果不足惜涩馆,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望允坚。 院中可真熱鬧魂那,春花似錦、人聲如沸稠项。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽展运。三九已至活逆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間拗胜,已是汗流浹背蔗候。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留挤土,地道東北人琴庵。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像仰美,于是被迫代替她去往敵國和親迷殿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容