模塊模式

模塊模式

Module模式最初定義在傳統的軟件工程中,為類提供私有和公有封裝的方法。在JavaScript中,并不能可以直接聲明類,但我們可以使用閉包來封裝私有的屬性和方法,進而模擬類的概念,在JavaScript中實現Module模式。通過這種方式,我們就使得一個單獨的對象擁有公有/私有方法和變量,從而屏蔽來自全局作用域的特殊部分,也就大大降低了變量聲明之間和函數聲明之間沖突的可能性。

var myModule = (function () {

// 私有變量
var privateVar = 0;

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

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

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

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

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

在JavaScript中一個最廣泛使用的設計模式是模塊的模式。模塊模式使用了JavaScript中的一個很棒的特性-閉包- 用來給你方法中的隱私一些控制這樣的第三方應用程序不能訪問私有數據或覆蓋它。在這篇文章教你什么是閉包,它是如何工作的,以及如何利用它在你的JavaScript代碼中實現模塊模式。

什么是閉包?

閉包是JavaScript語言的一種構造。在JavaScript內所有變量都能在全局范圍內訪問,除非變量在函數內用var關鍵字聲明過。

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

在一個函數內,你也可以獲得全局范圍和每個你所在的函數上級范圍的訪問權限。換句話說,函數內聲明變量只能在函數包圍范圍內訪問。

var globalvar = 1; //全局范圍

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

  function inner() {
    var innervar = 3; // inner()范圍內
    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程序員應該知道這一點,除非他不思進取。知道這一點,你可以得出這樣的結論,用一種辦法來保持你所有代碼在全局命名空間外,是正確的。這特別有用,當你不想給任何人在未經許可的情況下有重寫你任何代碼的機會。你可以通過使用一個匿名函數(不給它命名,沒有被賦予一個變量)立即執行自身。這是眾所周知的自調用匿名函數(SIAF),雖然它可能是更準確地稱為立即調用的函數表達 (IIFE–讀做“iffy”) -作者Ben Alman。

(function() {
    // 這函數立即執行,內部所有變量都是私有的
}());

緊接著右大括號,是左右括號于是函數將立即執行。圍繞整個函數表達式的括號不是運行的代碼必需的,但一般用作給其他開發人員的信號,這是一個IIFE,而不是一個標準函數。有些人喜歡在前面加上一個驚嘆號(!)或分號(;),而不是用括號包起來。
用閉包的模塊模式
知道了閉包是什么,我們就可以使用模塊模式創建對象。通過返回一個對象或變量并賦給一個函數外變量,這樣我們可以暴露任何希望暴露給外界的,我們可以有公開和私有的方法。

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

這就是模塊模式的本質。您還可以使用參數傳入或縮寫常用資源的名稱:

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

我傳入jQuery和window,被分別縮寫為$和w。注意我沒有傳任何東西作為第三個參數。這樣參數undefined將是undefined,所以它完美地工作。有些人這樣處理undefined是因為無論如何,它是可編輯的。所以,如果你判斷某某是否是undefined,但undefined可能已經改變,你的比較將不起作用。這種技術保證它將按預期工作。

透露模塊模式revealing module pattern

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

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

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

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

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

對比正常的模塊模式,透露模塊模式有幾個優點:
所有函數的聲明和實現都在同一個地方,從而制造較少的混亂。
私有函數現在可以訪問公開函數,如果他們需要。
當一個公開函數需要調用另一個公開函數時,他們調用publicFunc2(),而不是用this.publicFunc2(),從而節省了幾個字符。
透露模塊模式的唯一真正的缺點,正如我所說,是你必須寫更多的代碼,因為你必須先寫好函數然后再把它的名字寫在return語句內,盡管它最終可能會因為你可以忽略this.部分而節省你的代碼。

擴展模塊模式

我想談的最后一件事是使用模塊模式擴展已經存在的模塊。這很常用,當為jQuery之類的庫做插件,如下。

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

return $;    
}(jQuery));

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,462評論 2 378

推薦閱讀更多精彩內容