摘要:總結上面的大部分方式都可以互相組合使用的,一般來說如果要設計系統,可能會用到松耦合擴展,私有狀態和子模塊這樣的方式。
簡介
Module模式是JavaScript編程中一個非常通用的模式,一般情況下,大家都知道基本用法,本文嘗試著給大家更多該模式的高級使用方式。
首先我們來看看Module模式的基本特征:
模塊化,可重用
封裝了變量和function,和全局的namaspace不接觸,解耦合
只暴露可用public的方法,其它私有方法全部隱藏
關于Module模式,最早是由YUI的成員Eric Miraglia在2007年左右(原文為4年前,文章發布日期為2011年所以我算了一下是4年前)提出了這個概念,我們將從一個簡單的例子來解釋一下基本的用法(如果你已經非常熟悉了,請忽略這一節)。
基本用法先看一下最簡單的一個實現,代碼如下:
var Calculator = function (eq) { //這里可以聲明私有成員 var eqCtl = document.getElementById(eq); return { // 暴露公開的成員 add: function (x, y) { var val = x + y; eqCtl.innerHTML = val; } }; };
我們可以通過如下的方式來調用:
var calculator = new Calculator("eq"); calculator.add(2, 2);
大家可能看到了,每次用的時候都要new一下,也就是說每個實例在內存里都是一份copy,如果你不需要傳參數或者沒有一些特殊苛刻的要求的話,我們可以在最后一個}后面加上一個括號,來達到自執行的目的,這樣該實例在內存中只會存在一份copy,不過在展示他的優點之前,我們還是先來看看這個模式的基本使用方法吧。
匿名閉包==匿名閉包==是讓一切成為可能的基礎,而這也是JavaScript最好的特性,我們來創建一個最簡單的閉包函數,函數內部的代碼一直存在于閉包內,在整個運行周期內,該閉包都保證了內部的代碼處于私有狀態。
(function () { // ... 所有的變量和function都在這里聲明,并且作用域也只能在這個匿名閉包里 // ...但是這里的代碼依然可以訪問外部全局的對象 }());
注意,匿名函數后面的括號,這是JavaScript語言所要求的,因為如果你不聲明的話,JavaScript解釋器默認是聲明一個function函數,有括號,就是創建一個函數表達式,也就是自執行,用的時候不用和上面那樣在new了,當然你也可以這樣來聲明:
(function () {/* 內部代碼 */})();
不過我們推薦使用第一種方式,關于函數自執行,我后面會有專門一篇文章進行詳解,這里就不多說了。
引用全局變量JavaScript(非嚴格模式下)有一個特性叫做隱式全局變量,不管一個變量有沒有用過,JavaScript解釋器反向遍歷作用域鏈來查找整個變量的var聲明,如果沒有找到var,解釋器則假定該變量是全局變量,如果該變量用于了賦值操作的話,之前如果不存在的話,解釋器則會自動創建它,這就是說在匿名閉包里使用或創建全局變量非常容易,不過比較困難的是,代碼比較難管理,尤其是閱讀代碼的人看著很多區分哪些變量是全局的,哪些是局部的。
不過,好在在匿名函數里我們可以提供一個比較簡單的替代方案,我們可以將全局變量當成一個參數傳入到匿名函數然后使用,相比隱式全局變量,它又清晰又快,我們來看一個例子:
(function ($, YAHOO) { // 這里,我們的代碼就可以使用全局的jQuery對象了,YAHOO也是一樣 } (jQuery, YAHOO));
現在很多類庫里都有這種使用方式,比如jQuery源碼。
不過,有時候可能不僅僅要使用全局變量,而是也想聲明全局變量,如何做呢?我們可以通過匿名函數的返回值來返回這個全局變量,這也就是一個基本的Module模式,來看一個完整的代碼:
var blogModule = (function () { var my = {}, privateName = "segmentfault"; function privateAddTopic(data) { // 這里是內部處理代碼 } my.Name = privateName; my.AddTopic = function (data) { privateAddTopic(data); }; return my; } ());
上面的代碼聲明了一個全局變量blogModule,并且帶有2個可訪問的屬性:blogModule.AddTopic和blogModule.Name,除此之外,其它代碼都在匿名函數的閉包里保持著私有狀態。同時根據上面傳入全局變量的例子,我們也可以很方便地傳入其它的全局變量。
高級用法上面的內容對大多數用戶已經很足夠了,但我們還可以基于此模式延伸出更強大,易于擴展的結構,讓我們一個一個來看。
擴展==Module模式==的一個限制就是所有的代碼都要寫在一個文件,但是在一些大型項目里,將一個功能分離成多個文件是非常重要的,因為可以多人合作易于開發。再回頭看看上面的全局參數導入例子,我們能否把blogModule自身傳進去呢?答案是肯定的,我們先將blogModule傳進去,添加一個函數屬性,然后再返回就達到了我們所說的目的,上代碼:
var blogModule = (function (my) { my.AddPhoto = function () { //添加內部代碼 }; return my; } (blogModule));
這段代碼,看起來是不是有C#里擴展方法的感覺?有點類似,但本質不一樣哦。同時盡管var不是必須的,但為了確保一致,我們再次使用了它,代碼執行以后,blogModule下的AddPhoto就可以使用了,同時匿名函數內部的代碼也依然保證了私密性和內部狀態。
松耦合擴展上面的代碼盡管可以執行,但是必須先聲明blogModule,然后再執行上面的擴展代碼,也就是說步驟不能亂,怎么解決這個問題呢?我們來回想一下,我們平時聲明變量的都是都是這樣的:
var cnblogs = cnblogs || {} ;
這是確保cnblogs對象在存在的時候直接用,不存在的時候直接賦值為{},我們來看看如何利用這個特性來實現Module模式的任意加載順序:
var blogModule = (function (my) { // 添加一些功能 return my; } (blogModule || {}));
通過這樣的代碼,每個多帶帶分離的文件都保證這個結構,那么我們就可以實現任意順序的加載,所以,這個時候的var就是必須要聲明的,因為不聲明,其它文件讀取不到哦。
緊耦合擴展雖然松耦合擴展很牛叉了,但是可能也會存在一些限制,比如你沒辦法重寫你的一些屬性或者函數,也不能在初始化的時候就是用Module的屬性。緊耦合擴展限制了加載順序,但是提供了我們重載的機會,看如下例子:
var blogModule = (function (my) { var oldAddPhotoMethod = my.AddPhoto; my.AddPhoto = function () { // 重載方法,依然可通過oldAddPhotoMethod調用舊的方法 }; return my; } (blogModule));
通過這種方式,我們達到了重載的目的,當然如果你想在繼續在內部使用原有的屬性,你可以調用oldAddPhotoMethod來用。
克隆與繼承var blogModule = (function (old) { var my = {}, key; for (key in old) { if (old.hasOwnProperty(key)) { my[key] = old[key]; } } var oldAddPhotoMethod = old.AddPhoto; my.AddPhoto = function () { // 克隆以后,進行了重寫,當然也可以繼續調用oldAddPhotoMethod }; return my; } (blogModule));
這種方式靈活是靈活,但是也需要花費靈活的代價,其實該對象的屬性對象或function根本沒有被復制,只是對同一個對象多了一種引用而已,所以如果老對象去改變它,那克隆以后的對象所擁有的屬性或function函數也會被改變,解決這個問題,我們就得是用遞歸,但遞歸對function函數的賦值也不好用,所以我們在遞歸的時候eval相應的function。不管怎么樣,我還是把這一個方式放在這個帖子里了,大家使用的時候注意一下就行了。
跨文件共享私有對象通過上面的例子,我們知道,如果一個module分割到多個文件的話,每個文件需要保證一樣的結構,也就是說每個文件匿名函數里的私有對象都不能交叉訪問,那如果我們非要使用,那怎么辦呢? 我們先看一段代碼:
var blogModule = (function (my) { var _private = my._private = my._private || {}, _seal = my._seal = my._seal || function () { delete my._private; delete my._seal; delete my._unseal; }, _unseal = my._unseal = my._unseal || function () { my._private = _private; my._seal = _seal; my._unseal = _unseal; }; return my; } (blogModule || {}));
任何文件都可以對他們的局部變量_private設屬性,并且設置對其他的文件也立即生效。一旦這個模塊加載結束,應用會調用 blogModule._seal()"上鎖",這會阻止外部接入內部的_private。如果這個模塊需要再次增生,應用的生命周期內,任何文件都可以調用_unseal() ”開鎖”,然后再加載新文件。加載后再次調用 _seal()”上鎖”。
子模塊最后一個也是最簡單的使用方式,那就是創建子模塊
blogModule.CommentSubModule = (function () { var my = {}; // ... return my; } ());
盡管非常簡單,我還是把它放進來了,因為我想說明的是子模塊也具有一般模塊所有的高級使用方式,也就是說你可以對任意子模塊再次使用上面的一些應用方法。
總結上面的大部分方式都可以互相組合使用的,一般來說如果要設計系統,可能會用到松耦合擴展,私有狀態和子模塊這樣的方式。另外,我這里沒有提到性能問題,但我認為Module模式效率高,代碼少,加載速度快。使用松耦合擴展允許并行加載,這更可以提升下載速度。不過初始化時間可能要慢一些,但是為了使用好的模式,這是值得的。
參考文章:
http://yuiblog.com/blog/2007/06/12/module-pattern/
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
本文轉自TOM大叔的深入理解JavaScript系列
【深入理解JavaScript系列】文章,包括了原創,翻譯,轉載,整理等各類型文章,原文是TOM大叔的一個非常不錯的專題,現將其重新整理發布。謝謝大叔。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78410.html
摘要:前言大家學的時候,經常遇到自執行匿名函數的代碼,今天我們主要就來想想說一下自執行。其實,前面兩個例子里的變量,也可以換成,因為和外面的不在一個作用于,所以不會出現問題,這也是匿名函數閉包的威力。 前言 大家學JavaScript的時候,經常遇到自執行匿名函數的代碼,今天我們主要就來想想說一下自執行。 在詳細了解這個之前,我們來談了解一下自執行這個叫法,本文對這個功能的叫法也不一定完全對...
摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...
摘要:函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此,...
摘要:模塊化是隨著前端技術的發展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為和。特別指出,事件不等同于異步,回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React,本人對寫代碼有潔癖,代碼也是藝術。此篇是準備篇,工欲善其事,必先利其器。我們先在代...
閱讀 4746·2021-10-13 09:39
閱讀 1956·2019-08-29 11:12
閱讀 1150·2019-08-28 18:16
閱讀 1863·2019-08-26 12:16
閱讀 1249·2019-08-26 12:13
閱讀 2996·2019-08-26 10:59
閱讀 2302·2019-08-23 18:27
閱讀 2996·2019-08-23 18:02