日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
JavaScript設(shè)計(jì)模式深入分析

一直都在考慮這個(gè)月分享大家什么東西***，原計(jì)劃是打算寫(xiě)一些HTML5中JS方面的內(nèi)容或者是AJAX方面的，可是自己由于表達(dá)能力，時(shí)間，還有個(gè)人工作方面的問(wèn)題，這個(gè)還是等下個(gè)月再做分享吧。

創(chuàng)新互聯(lián)主營(yíng)合川網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App定制開(kāi)發(fā),合川h5小程序制作搭建,合川網(wǎng)站營(yíng)銷(xiāo)推廣歡迎合川等地區(qū)企業(yè)咨詢(xún)

老規(guī)矩，開(kāi)始正文以前先交代自己寫(xiě)這篇文章的目的和一些注意事項(xiàng)：

1.首先本人一直從事前端開(kāi)發(fā)，所以除了JavaScript其他的語(yǔ)言了解不深，所以文章只會(huì)以JavaScript語(yǔ)言的角度去論證;

2.其實(shí)我個(gè)人在項(xiàng)目用過(guò)的模式也不多，對(duì)模式的概念的理解也沒(méi)有那么抽象，所以最近在面試中如果面試官問(wèn)到與模式相關(guān)的問(wèn)題，自己感覺(jué)在對(duì)答過(guò)程中很郁悶，很多東西表達(dá)不清楚，于是就找了些相關(guān)資料，才會(huì)有這篇文章分享;

3.JavaScript模式與前端的工作和成長(zhǎng)密不可分，因?yàn)檫@確實(shí)不是一個(gè)簡(jiǎn)單的話(huà)題，所以我只能盡力用簡(jiǎn)單表達(dá)和例子闡明，而且園子里有很多的高手，所以希望大家踴躍發(fā)言(由于水平有限，請(qǐng)大家多多指教，希望嘴下留情);

4.由于這篇文章更多的只是想起到一個(gè)介紹和講解的作用，并不打算對(duì)每種模式進(jìn)行細(xì)致的分析，所以每種模式只用到一個(gè)至二個(gè)例子，可能會(huì)造成這個(gè)例子的表達(dá)并不是***的或者不夠全面，如果各位看官覺(jué)得不過(guò)癮，可以再去查找相關(guān)資料;

5.做任何事都需要堅(jiān)持，寫(xiě)博客也是一樣，嘿嘿，每月至少一篇(文章確實(shí)較長(zhǎng)，希望能對(duì)朋友們有所幫助，重點(diǎn)部分在前言中有介紹，大家可以選擇感興趣的模式進(jìn)行深入)。

6.歡迎轉(zhuǎn)載，不過(guò)請(qǐng)注明出處，謝謝。

了解JavaScript設(shè)計(jì)模式我們需要知道的一些必要知識(shí)點(diǎn)：(內(nèi)容相對(duì)基礎(chǔ)，高手請(qǐng)?zhí)^(guò))

JavaScript閉包

1.閉包最常用的方式就是返回一個(gè)內(nèi)聯(lián)函數(shù)(何為內(nèi)聯(lián)函數(shù)?就是在函數(shù)內(nèi)部聲明的函數(shù));

2.在JavaScript中有作用域和執(zhí)行環(huán)境的問(wèn)題，在函數(shù)內(nèi)部的變量在函數(shù)外部是無(wú)法訪問(wèn)的，在函數(shù)內(nèi)部卻可以得到全局變量。由于種種原因，我們有時(shí)候需要得到函數(shù)內(nèi)部的變量，可是用常規(guī)方法是得不到的，這時(shí)我們就可以創(chuàng)建一個(gè)閉包，用來(lái)在外部訪問(wèn)這個(gè)變量。

3.閉包的用途 主要就是上一點(diǎn)提到的讀取函數(shù)內(nèi)部變量，還有一個(gè)作用就是可以使這些變量一直保存在內(nèi)存中。

4.使用閉包要注意，由于變量被保存在內(nèi)存中，所以會(huì)對(duì)內(nèi)存造成消耗，所以不能濫用閉包。解決方法是 在退出函數(shù)之前，將不使用的局部變量全部刪除。

***還是上一套閉包的代碼吧，這樣更直觀。

 
 
 
    
  
  
  
  1. function f(){  
    2. 
  
  
  
  2.  　　var n = 999;  
    3. 
  
  
  
  3.  　　function f1(){  
    4. 
  
  
  
  4.   　　 alert(n+=1);  
    5. 
  
  
  
  5.  　　 }  
    6. 
  
  
  
  6. 　　 return f1;  
    7. 
  
  
  
  7. 　　}  
    8. 
  
  
  
  8. 　　var result = f();  
    9. 
  
  
  
  9. result(); // 1000  
    10. 
  
  
  
  10. result(); // 1001  
    11. 
  
  
  
  11. result(); // 1002 
    12.

封裝：通過(guò)將一個(gè)方法或者屬性聲明為私用的，可以讓對(duì)象的實(shí)現(xiàn)細(xì)節(jié)對(duì)其他對(duì)象保密以降低對(duì)象之間的耦合程度，可以保持?jǐn)?shù)據(jù)的完整性并對(duì)其修改方式加以約束，這樣可以是代碼更可靠，更易于調(diào)試。封裝是面向?qū)ο蟮脑O(shè)計(jì)的基石。

盡管JavaScript是一門(mén)面向?qū)ο蟮恼Z(yǔ)言，可它并不具備將成員聲明為公用或私用的任何內(nèi)部機(jī)制，所以我們只能自己想辦法實(shí)現(xiàn)這種特性。下面還是通過(guò)一套完整的代碼去分析，介紹什么是私有屬性和方法，什么是特權(quán)屬性和方法，什么是公有屬性和方法，什么是公有靜態(tài)屬性和方法。

私有屬性和方法：函數(shù)有作用域，在函數(shù)內(nèi)用var 關(guān)鍵字聲明的變量在外部無(wú)法訪問(wèn)，私有屬性和方法本質(zhì)就是你希望在對(duì)象外部無(wú)法訪問(wèn)的變量。

特權(quán)屬性和方法：創(chuàng)建屬性和方法時(shí)使用的this關(guān)鍵字，因?yàn)檫@些方法定義在構(gòu)造器的作用域中，所以它們可以訪問(wèn)到私有屬性和方法;只有那些需要直接訪問(wèn)私有成員的方法才應(yīng)該被設(shè)計(jì)為特權(quán)方法。

共有屬性和方法：直接鏈在prototype上的屬性和方法，不可以訪問(wèn)構(gòu)造器內(nèi)的私有成員，可以訪問(wèn)特權(quán)成員，子類(lèi)會(huì)繼承所有的共有方法。

共有靜態(tài)屬性和方法：***的理解方式就是把它想象成一個(gè)命名空間，實(shí)際上相當(dāng)于把構(gòu)造器作為命名空間來(lái)使用。

 
 
 
    
  
  
  
  1. 　/* -- 封裝 -- */ 
    2. 
  
  
  
  2.  　　var _packaging = function(){  
    3. 
  
  
  
  3.     　　//私有屬性和方法  
    4. 
  
  
  
  4.     　　var name = 'Darren';  
    5. 
  
  
  
  5.     　　var method1 = function(){  
    6. 
  
  
  
  6.      　　  //...  
    7. 
  
  
  
  7.     　　}  
    8. 
  
  
  
  8.     　　//特權(quán)屬性和方法  
    9. 
  
  
  
  9.     　　this.title = 'JavaScript Design Patterns' ;  
    10. 
  
  
  
  10.     　　this.getName = function(){  
    11. 
  
  
  
  11.      　　  return name;  
    12. 
  
  
  
  12.     　　}  
    13. 
  
  
  
  13.  　　}  
    14. 
  
  
  
  14.  　　//共有靜態(tài)屬性和方法  
    15. 
  
  
  
  15.  　　_packaging._name = 'Darren code';  
    16. 
  
  
  
  16.  　　_packaging.alertName = function(){  
    17. 
  
  
  
  17.     　　alert(_packaging._name);  
    18. 
  
  
  
  18.  　　}  
    19. 
  
  
  
  19. 　　//共有屬性和方法  
    20. 
  
  
  
  20. 　　_packaging.prototype = {  
    21. 
  
  
  
  21.     　　init:function(){  
    22. 
  
  
  
  22.        　　//...  
    23. 
  
  
  
  23.     　　}  
    24. 
  
  
  
  24.  　　} 
    25.

#p#

繼承：繼承本身就是一個(gè)抽象的話(huà)題，在JavaScript中繼承更是一個(gè)復(fù)雜的話(huà)題，因?yàn)镴avaScript想要實(shí)現(xiàn)繼承有兩種實(shí)現(xiàn)方式，分別是類(lèi)式繼承和原型式繼承，每種實(shí)現(xiàn)的方式都需要采取不少措施，下面本人通過(guò)分析例子的方式講解JavaScript中這個(gè)很重要的話(huà)題。

 
 
 
    
  
  
  
  1. 　/* -- 類(lèi)式繼承 -- */ 
    2. 
  
  
  
  2.  　　//先聲明一個(gè)超類(lèi)  
    3. 
  
  
  
  3.  　　function Person(name){  
    4. 
  
  
  
  4.  　　　　this.name = name;  
    5. 
  
  
  
  5.  　　}  
    6. 
  
  
  
  6.  　　//給這個(gè)超類(lèi)的原型對(duì)象上添加方法 getName   
    7. 
  
  
  
  7.  　　Person.prototype.getName = function(){  
    8. 
  
  
  
  8.     　　return this.name;  
    9. 
  
  
  
  9.  　　}  
    10. 
  
  
  
  10.  　　//實(shí)例化這個(gè)超類(lèi)  
    11. 
  
  
  
  11.  　　var a = new Person('Darren1')  
    12. 
  
  
  
  12.  　　alert(a.getName());  
    13. 
  
  
  
  13.  　　//再聲明類(lèi)  
    14. 
  
  
  
  14.  　　function Programmer(name,sex){  
    15. 
  
  
  
  15.     　　//這個(gè)類(lèi)中要調(diào)用超類(lèi)Person的構(gòu)造函數(shù)，并將參數(shù)name傳給它  
    16. 
  
  
  
  16.     　　Person.call(this,name);  
    17. 
  
  
  
  17.     　　this.sex = sex;  
    18. 
  
  
  
  18.  　　}  
    19. 
  
  
  
  19. 　　 //這個(gè)子類(lèi)的原型對(duì)象等于超類(lèi)的實(shí)例  
    20. 
  
  
  
  20.  　　Programmer.prototype = new Person();  
    21. 
  
  
  
  21.  　　//因?yàn)樽宇?lèi)的原型對(duì)象等于超類(lèi)的實(shí)例，所以prototype.constructor這個(gè)方法也等于超類(lèi)構(gòu)造函數(shù)，你可以自己測(cè)試一下，如果沒(méi)這一步，alert(Programmer.prototype.constructor)，這個(gè)是Person超類(lèi)的引用，所以要從新賦值為自己本身  
    22. 
  
  
  
  22.  　　Programmer.prototype.constructor = Programmer;  
    23. 
  
  
  
  23.  　　//子類(lèi)本身添加了getSex 方法  
    24. 
  
  
  
  24.  　　Programmer.prototype.getSex = function(){  
    25. 
  
  
  
  25.     　　return this.sex;  
    26. 
  
  
  
  26.  　　}  
    27. 
  
  
  
  27.  　　//實(shí)例化這個(gè)子類(lèi)  
    28. 
  
  
  
  28.  　　var _m = new Programmer('Darren2','male');  
    29. 
  
  
  
  29.  　　//自身的方法  
    30. 
  
  
  
  30.  　　alert(_m.getSex());  
    31. 
  
  
  
  31.  　　//繼承超類(lèi)的方法  
    32. 
  
  
  
  32. 　　alert(_m.getName()); 
    33.

代碼都不難，只要對(duì) 原型鏈 有基礎(chǔ)就能理解。類(lèi)式繼承模式是JavaScript繼承主要的模式，幾乎所有用面向?qū)ο蠓绞骄帉?xiě)的JavaScript代碼中都用到了這種繼承，又因?yàn)樵诟鞣N流行語(yǔ)言中只有JavaScript使用原型式繼承，因此***還是使用類(lèi)式繼承。可是要熟悉JavaScript語(yǔ)言，原型繼承也是我們必須所了解的，至于在項(xiàng)目中是否使用就得看個(gè)人編碼風(fēng)格了。

 
 
 
    
  
  
  
  1. 　/* -- 原型式繼承 -- */ 
    2. 
  
  
  
  2.  　　//clone()函數(shù)用來(lái)創(chuàng)建新的類(lèi)Person對(duì)象  
    3. 
  
  
  
  3.  　　var clone = function(obj){  
    4. 
  
  
  
  4.     var _f = function(){};  
    5. 
  
  
  
  5.     　　//這句是原型式繼承最核心的地方，函數(shù)的原型對(duì)象為對(duì)象字面量  
    6. 
  
  
  
  6.     　　_f.prototype = obj;   
    7. 
  
  
  
  7.     　　return new _f;  
    8. 
  
  
  
  8.  　　}  
    9. 
  
  
  
  9.  　　//先聲明一個(gè)對(duì)象字面量  
    10. 
  
  
  
  10.  　　var Person = {  
    11. 
  
  
  
  11.     　　name:'Darren',  
    12. 
  
  
  
  12.     　　getName:function(){  
    13. 
  
  
  
  13.        　　return this.name;  
    14. 
  
  
  
  14.     　　}  
    15. 
  
  
  
  15.  　　}  
    16. 
  
  
  
  16.  　　//不需要定義一個(gè)Person的子類(lèi)，只要執(zhí)行一次克隆即可  
    17. 
  
  
  
  17.  　　var Programmer = clone(Person);  
    18. 
  
  
  
  18.  　　//可以直接獲得Person提供的默認(rèn)值，也可以添加或者修改屬性和方法  
    19. 
  
  
  
  19.  　　alert(Programmer.getName())  
    20. 
  
  
  
  20.  　　Programmer.name = 'Darren2' 
    21. 
  
  
  
  21.  　　alert(Programmer.getName())  
    22. 
  
  
  
  22.    
    23. 
  
  
  
  23.  　　//聲明子類(lèi),執(zhí)行一次克隆即可  
    24. 
  
  
  
  24.  　　var Someone = clone(Programmer); 
    25.

JavaScript設(shè)計(jì)模式的作用 - 提高代碼的重用性，可讀性，使代碼更容易的維護(hù)和擴(kuò)展。

1.單體模式，工廠模式，橋梁模式個(gè)人認(rèn)為這個(gè)一個(gè)優(yōu)秀前端必須掌握的模式，對(duì)抽象編程和接口編程都非常有好處。

2.裝飾者模式和組合模式有很多相似的地方，它們都與所包裝的對(duì)象實(shí)現(xiàn)同樣的接口并且會(huì)把任何方法的調(diào)用傳遞給這些對(duì)象。裝飾者模式和組合模式是本人描述的較吃力的兩個(gè)模式，我個(gè)人其實(shí)也沒(méi)用過(guò)，所以查了很多相關(guān)資料和文檔，請(qǐng)大家海涵。

3.門(mén)面模式是個(gè)非常有意思的模式，幾乎所有的JavaScript庫(kù)都會(huì)用到這個(gè)模式，假如你有逆向思維或者逆向編程的經(jīng)驗(yàn)，你會(huì)更容易理解這個(gè)模式(聽(tīng)起來(lái)有挑戰(zhàn)，其實(shí)一接觸你就知道這是個(gè)很簡(jiǎn)單的模式);還有配置器模式得和門(mén)面模式一塊拿來(lái)說(shuō)，這個(gè)模式對(duì)現(xiàn)有接口進(jìn)行包裝，合理運(yùn)用可以很多程度上提高開(kāi)發(fā)效率。這兩個(gè)模式有相似的地方，所以一塊理解的話(huà)相信都會(huì)很快上手的。

4.享元模式是一種以?xún)?yōu)化為目的的模式。

5.代理模式主要用于控制對(duì)象的訪問(wèn)，包括推遲對(duì)其創(chuàng)建需要耗用大量計(jì)算資源的類(lèi)得實(shí)例化。

6.觀察者模式用于對(duì)對(duì)象的狀態(tài)進(jìn)行觀察，并且當(dāng)它發(fā)生變化時(shí)能得到通知的方法。用于讓對(duì)象對(duì)事件進(jìn)行監(jiān)聽(tīng)以便對(duì)其作出響應(yīng)。觀察者模式也被稱(chēng)為“訂閱者模式”。

7.命令模式是對(duì)方法調(diào)用進(jìn)行封裝的方式，用命名模式可以對(duì)方法調(diào)用進(jìn)行參數(shù)化和傳遞，然后在需要的時(shí)候再加以執(zhí)行。

8.職責(zé)鏈模式用來(lái)消除請(qǐng)求的發(fā)送者和接收者之間的耦合。

JavaScript設(shè)計(jì)模式都有哪些?

單體(Singleton)模式： 絕對(duì)是JavaScript中最基本最有用的模式。

單體在JavaScript的有多種用途，它用來(lái)劃分命名空間?？梢詼p少網(wǎng)頁(yè)中全局變量的數(shù)量(在網(wǎng)頁(yè)中使用全局變量有風(fēng)險(xiǎn));可以在多人開(kāi)發(fā)時(shí)避免代碼的沖突(使用合理的命名空間)等等。

在中小型項(xiàng)目或者功能中，單體可以用作命名空間把自己的代碼組織在一個(gè)全局變量名下;在稍大或者復(fù)雜的功能中，單體可以用來(lái)把相關(guān)代碼組織在一起以便日后好維護(hù)。

使用單體的方法就是用一個(gè)命名空間包含自己的所有代碼的全局對(duì)象，示例：

 
 
 
    
  
  
  
  1. var functionGroup = {  
    2. 
  
  
  
  2.  　　　　name:'Darren',  
    3. 
  
  
  
  3.  　　　　method1:function(){  
    4. 
  
  
  
  4.  　　　　　　//code  
    5. 
  
  
  
  5.  　　　　},  
    6. 
  
  
  
  6.  　　　　init:function(){  
    7. 
  
  
  
  7.  　　　　　　//code  
    8. 
  
  
  
  8.  　　　　}  
    9. 
  
  
  
  9.  　　} 
    10.

或者

 
 
 
    
  
  
  
  1. var functionGroup  = new function myGroup(){  
    2. 
  
  
  
  2.  　　　　this.name = 'Darren';  
    3. 
  
  
  
  3.  　　　　this.getName = function(){  
    4. 
  
  
  
  4.  　　　　　　return this.name  
    5. 
  
  
  
  5.  　　　　}  
    6. 
  
  
  
  6.  　　　　this.method1 = function(){}  
    7. 
  
  
  
  7.  　　　　...  
    8. 
  
  
  
  8.  　　} 
    9.

工廠(Factory)模式：提供一個(gè)創(chuàng)建一系列相關(guān)或相互依賴(lài)對(duì)象的接口，而無(wú)需指定他們具體的類(lèi)。

工廠就是把成員對(duì)象的創(chuàng)建工作轉(zhuǎn)交給一個(gè)外部對(duì)象，好處在于消除對(duì)象之間的耦合(何為耦合?就是相互影響)。通過(guò)使用工廠方法而不是new關(guān)鍵字及具體類(lèi)，可以把所有實(shí)例化的代碼都集中在一個(gè)位置，有助于創(chuàng)建模塊化的代碼，這才是工廠模式的目的和優(yōu)勢(shì)。

舉個(gè)例子：你有一個(gè)大的功能要做，其中有一部分是要考慮擴(kuò)展性的，那么這部分代碼就可以考慮抽象出來(lái)，當(dāng)做一個(gè)全新的對(duì)象做處理。好處就是將來(lái)擴(kuò)展的時(shí)候容易維護(hù) - 只需要操作這個(gè)對(duì)象內(nèi)部方法和屬性，達(dá)到了動(dòng)態(tài)實(shí)現(xiàn)的目的。非常有名的一個(gè)示例 - XHR工廠：

 
 
 
    
  
  
  
  1. var XMLHttpFactory = function(){};　　　　　　//這是一個(gè)簡(jiǎn)單工廠模式  
    2. 
  
  
  
  2.  　　XMLHttpFactory.createXMLHttp = function(){  
    3. 
  
  
  
  3. 　　　　 var XMLHttp = null;  
    4. 
  
  
  
  4.  　　　　if (window.XMLHttpRequest){  
    5. 
  
  
  
  5.  　　　　　　XMLHttp = new XMLHttpRequest()  
    6. 
  
  
  
  6. 　　　　 }else if (window.ActiveXObject){  
    7. 
  
  
  
  7.  　　　　　　XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")  
    8. 
  
  
  
  8.  　　　　}  
    9. 
  
  
  
  9.  　　return XMLHttp;  
    10. 
  
  
  
  10.  　　}  
    11. 
  
  
  
  11.  　　//XMLHttpFactory.createXMLHttp()這個(gè)方法根據(jù)當(dāng)前環(huán)境的具體情況返回一個(gè)XHR對(duì)象。  
    12. 
  
  
  
  12.  　　var AjaxHander = function(){  
    13. 
  
  
  
  13.  　　　　var XMLHttp = XMLHttpFactory.createXMLHttp();  
    14. 
  
  
  
  14.  　　　　...  
    15. 
  
  
  
  15.  　　} 
    16.

工廠模式又區(qū)分簡(jiǎn)單工廠模式和抽象工廠模式，上面介紹的是簡(jiǎn)單工廠模式，這種模式用的更多也更簡(jiǎn)單易用。抽象工廠模式的使用方法就是 - 先設(shè)計(jì)一個(gè)抽象類(lèi)，這個(gè)類(lèi)不能被實(shí)例化，只能用來(lái)派生子類(lèi)，***通過(guò)對(duì)子類(lèi)的擴(kuò)展實(shí)現(xiàn)工廠方法。 示例：

 
 
 
    
  
  
  
  1. var XMLHttpFactory = function(){};　     //這是一個(gè)抽象工廠模式  
    2. 
  
  
  
  2.  　　XMLHttpFactory.prototype = {  
    3. 
  
  
  
  3.     　　//如果真的要調(diào)用這個(gè)方法會(huì)拋出一個(gè)錯(cuò)誤，它不能被實(shí)例化，只能用來(lái)派生子類(lèi)  
    4. 
  
  
  
  4.     　　createFactory:function(){  
    5. 
  
  
  
  5.        　　throw new Error('This is an abstract class');  
    6. 
  
  
  
  6.     　　}  
    7. 
  
  
  
  7.  　　}  
    8. 
  
  
  
  8. 　　//派生子類(lèi)，文章開(kāi)始處有基礎(chǔ)介紹那有講解繼承的模式，不明白可以去參考原理  
    9. 
  
  
  
  9.  　　var XHRHandler = function(){  
    10. 
  
  
  
  10.     　　XMLHttpFactory.call(this);  
    11. 
  
  
  
  11.  　　};  
    12. 
  
  
  
  12. 　　XHRHandler.prototype = new XMLHttpFactory();  
    13. 
  
  
  
  13.  　　XHRHandler.prototype.constructor = XHRHandler;  
    14. 
  
  
  
  14.  　　//重新定義createFactory 方法  
    15. 
  
  
  
  15.  　　XHRHandler.prototype.createFactory = function(){  
    16. 
  
  
  
  16.     　　var XMLHttp = null;  
    17. 
  
  
  
  17.     　　if (window.XMLHttpRequest){  
    18. 
  
  
  
  18.        　　XMLHttp = new XMLHttpRequest()  
    19. 
  
  
  
  19.     　　}else if (window.ActiveXObject){  
    20. 
  
  
  
  20.        　　XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")  
    21. 
  
  
  
  21.     　　}  
    22. 
  
  
  
  22.     　　return XMLHttp;  
    23. 
  
  
  
  23.  　　} 
    24.

#p#

橋接(bridge)模式：在實(shí)現(xiàn)API的時(shí)候，橋梁模式灰常有用。在所有模式中，這種模式最容易立即付諸實(shí)施。

橋梁模式可以用來(lái)弱化它與使用它的類(lèi)和對(duì)象之間的耦合，就是將抽象與其實(shí)現(xiàn)隔離開(kāi)來(lái)，以便二者獨(dú)立變化;這種模式對(duì)于JavaScript中常見(jiàn)的時(shí)間驅(qū)動(dòng)的編程有很大益處，橋梁模式最常見(jiàn)和實(shí)際的應(yīng)用場(chǎng)合之一是時(shí)間監(jiān)聽(tīng)器回調(diào)函數(shù)。先分析一個(gè)不好的示例：

 
 
 
    
  
  
  
  1. element.onclick = function(){  
    2. 
  
  
  
  2.     　　new setLogFunc();  
    3. 
  
  
  
  3.  　　}; 
    4.

為什么說(shuō)這個(gè)示例不好，因?yàn)閺倪@段代碼中無(wú)法看出那個(gè)LogFunc方法要顯示在什么地方，它有什么可配置的選項(xiàng)以及應(yīng)該怎么去修改它。換一種說(shuō)法就是，橋梁模式的要訣就是讓接口“可橋梁”，實(shí)際上也就是可配置。把頁(yè)面中一個(gè)個(gè)功能都想象成模塊，接口可以使得模塊之間的耦合降低。

掌握橋梁模式的正確使用收益的不只是你，還有那些負(fù)責(zé)維護(hù)你代碼的人。把抽象于其實(shí)現(xiàn)隔離開(kāi)，可獨(dú)立地管理軟件的各個(gè)部分，bug也因此更容易查找。

橋梁模式目的就是讓API更加健壯，提高組件的模塊化程度，促成更簡(jiǎn)潔的實(shí)現(xiàn)，并提高抽象的靈活性。一個(gè)好的示例：

 
 
 
    
  
  
  
  1. element.onclick = function(){　　//API可控制性提高了，使得這個(gè)API更加健壯  
    2. 
  
  
  
  2.     　　new someFunction(element,param,callback);  
    3. 
  
  
  
  3. 　　} 
    4.

注：橋梁模式還可以用于連接公開(kāi)的API代碼和私有的實(shí)現(xiàn)代碼，還可以把多個(gè)類(lèi)連接在一起。在文章封裝介紹的部分提到過(guò)特權(quán)方法，也是橋梁模式的一種特例?！禞S設(shè)計(jì)模式》上找的示例，加深大家對(duì)這個(gè)模式的理解：

 
 
 
    
  
  
  
  1. 　//錯(cuò)誤的方式  
    2. 
  
  
  
  2. 　//這個(gè)API根據(jù)事件監(jiān)聽(tīng)器回調(diào)函數(shù)的工作機(jī)制，事件對(duì)象被作為參數(shù)傳遞給這個(gè)函數(shù)。本例中并沒(méi)有使用這個(gè)參數(shù)，而只是從this對(duì)象獲取ID。  
    3. 
  
  
  
  3.  　　addEvent(element,'click',getBeerById);  
    4. 
  
  
  
  4.  　　function(e){  
    5. 
  
  
  
  5.     　　var id = this.id;  
    6. 
  
  
  
  6.     　　asyncRequest('GET','beer.url?id=' + id,function(resp){  
    7. 
  
  
  
  7.        　　//Callback response  
    8. 
  
  
  
  8.       　　 console.log('Requested Beer: ' + resp.responseText);  
    9. 
  
  
  
  9.     　　});  
    10. 
  
  
  
  10.  　　}  
    11. 
  
  
  
  11.    
    12. 
  
  
  
  12.  　　//好的方式  
    13. 
  
  
  
  13.  　　//從邏輯上分析，把id傳給getBeerById函數(shù)式合情理的，且回應(yīng)結(jié)果總是通過(guò)一個(gè)毀掉函數(shù)返回。這么理解，我們現(xiàn)在做的是針對(duì)接口而不是實(shí)現(xiàn)進(jìn)行編程，用橋梁模式把抽象隔離開(kāi)來(lái)。  
    14. 
  
  
  
  14.  　　function getBeerById(id,callback){  
    15. 
  
  
  
  15.     　　asyncRequest('GET','beer.url?id=' + id,function(resp){  
    16. 
  
  
  
  16.        　　callback(resp.responseText)  
    17. 
  
  
  
  17.     　　});  
    18. 
  
  
  
  18.  　　}  
    19. 
  
  
  
  19.  　　addEvent(element,'click',getBeerByIdBridge);  
    20. 
  
  
  
  20.  　　function getBeerByIdBridge(e){  
    21. 
  
  
  
  21.     　　getBeerById(this.id,function(beer){  
    22. 
  
  
  
  22.        　　console.log('Requested Beer: ' + beer);  
    23. 
  
  
  
  23.     　　});  
    24. 
  
  
  
  24.  　　}　 
    25.

裝飾者(Decorator)模式：這個(gè)模式就是為對(duì)象增加功能(或方法)。

動(dòng)態(tài)地給一個(gè)對(duì)象添加一些額外的職責(zé)。就擴(kuò)展功能而言，它比生成子類(lèi)方式更為靈活。

裝飾者模式和組合模式有很多共同點(diǎn)，它們都與所包裝的對(duì)象實(shí)現(xiàn)統(tǒng)一的接口并且會(huì)把任何方法條用傳遞給這些對(duì)象?？墒墙M合模式用于把眾多子對(duì)象組織為一個(gè)整體，而裝飾者模式用于在不修改現(xiàn)有對(duì)象或從派生子類(lèi)的前提下為其添加方法。

裝飾者的運(yùn)作過(guò)程是透明的，這就是說(shuō)你可以用它包裝其他對(duì)象，然后繼續(xù)按之前使用那么對(duì)象的方法來(lái)使用，從下面的例子中就可以看出。還是從代碼中理解吧：

 
 
 
    
  
  
  
  1. //創(chuàng)建一個(gè)命名空間為myText.Decorations  
    2. 
  
  
  
  2.  　　var myText= {};  
    3. 
  
  
  
  3.  　　myText.Decorations={};  
    4. 
  
  
  
  4.  　　myText.Core=function(myString){  
    5. 
  
  
  
  5.     　　this.show = function(){return myString;}  
    6. 
  
  
  
  6.  　　}  
    7. 
  
  
  
  7.  　　//***次裝飾  
    8. 
  
  
  
  8.  　　myText.Decorations.addQuestuibMark =function(myString){  
    9. 
  
  
  
  9.     　　this.show = function(){return myString.show()+'?';};  
    10. 
  
  
  
  10.  　　}  
    11. 
  
  
  
  11.  　　//第二次裝飾  
    12. 
  
  
  
  12.  　　myText.Decorations.makeItalic = function(myString){  
    13. 
  
  
  
  13.     　　this.show = function(){return '
  14. '+myString.show()+'
    15. '};  
  
  
  
  15.  　　}  
    16. 
  
  
  
  16.  　　//得到myText.Core的實(shí)例  
    17. 
  
  
  
  17.  　　var theString = new myText.Core('this is a sample test String');  
    18. 
  
  
  
  18.  　　alert(theString.show());　　//output 'this is a sample test String'  
    19. 
  
  
  
  19.  　　theString = new myText.Decorations.addQuestuibMark(theString);  
    20. 
  
  
  
  20.  　　alert(theString.show());　　//output 'this is a sample test String?'  
    21. 
  
  
  
  21.  　　theString = new myText.Decorations.makeItalic (theString);  
    22. 
  
  
  
  22.  　　alert(theString.show());　　//output '
  23. this is a sample test String
    24. ' 

 

從這個(gè)示例中可以看出，這一切都可以不用事先知道組件對(duì)象的接口，甚至可以動(dòng)態(tài)的實(shí)現(xiàn)，在為現(xiàn)有對(duì)象增添特性這方面，裝飾者模式有極大的靈活性。

如果需要為類(lèi)增加特性或者方法，而從該類(lèi)派生子類(lèi)的解決辦法并不實(shí)際的話(huà)，就應(yīng)該使用裝飾者模式。派生子類(lèi)之所以會(huì)不實(shí)際最常見(jiàn)的原因是需要添加的特性或方法的數(shù)量要求使用大量子類(lèi)。

組合(Composite)模式：將對(duì)象組合成樹(shù)形結(jié)構(gòu)以表示“部分-整體”的層次結(jié)構(gòu)。它使得客戶(hù)對(duì)單個(gè)對(duì)象和復(fù)合對(duì)象的使用具有一致性。

組合模式是一種專(zhuān)為創(chuàng)建Web上的動(dòng)態(tài)用戶(hù)界面而量身定制的模式。使用這種模式，可以用一條命令在多個(gè)對(duì)象上激發(fā)復(fù)雜的或遞歸的行為。組合模式擅長(zhǎng)于對(duì)大批對(duì)象進(jìn)行操作。

組合模式的好處：1.程序員可以用同樣的方法處理對(duì)象的集合與其中的特定子對(duì)象;2.它可以用來(lái)把一批子對(duì)象組織成樹(shù)形結(jié)構(gòu)，并且使整棵樹(shù)都可被便利。

組合模式適用范圍：1.存在一批組織成某處層次體系的對(duì)象(具體結(jié)構(gòu)可能在開(kāi)發(fā)期間無(wú)法知道);2.希望對(duì)這批對(duì)象或其中的一部分對(duì)象實(shí)話(huà)一個(gè)操作。

其實(shí)組合模式就是將一系列相似或相近的對(duì)象組合在一個(gè)大的對(duì)象，由這個(gè)大對(duì)象提供一些常用的接口來(lái)對(duì)這些小對(duì)象進(jìn)行操作，代碼可重用，對(duì)外操作簡(jiǎn)單。例如：對(duì)form內(nèi)的元素，不考慮頁(yè)面設(shè)計(jì)的情況下，一般就剩下input了，對(duì)于這些input都有name和value的屬性，因此可以將這些input元素作為form對(duì)象的成員組合起來(lái)，form對(duì)象提供對(duì)外的接口，便可以實(shí)現(xiàn)一些簡(jiǎn)單的操作，比如設(shè)置某個(gè)input的value，添加/刪除某個(gè)input等等。

這種模式描述起來(lái)比較吃力，我從《JS設(shè)計(jì)模式》上找個(gè)一個(gè)實(shí)例，大家還是看代碼吧：先創(chuàng)建組合對(duì)象類(lèi)

 
 
 
    
  
  
  
  1. // DynamicGallery Class  
    2. 
  
  
  
  2.  　　var DynamicGallery = function (id) { // 實(shí)現(xiàn)Composite，GalleryItem組合對(duì)象類(lèi)   
    3. 
  
  
  
  3.     　　this.children = [];  
    4. 
  
  
  
  4.     　　this.element = document.createElement('div');  
    5. 
  
  
  
  5.     　　this.element.id = id;  
    6. 
  
  
  
  6.     　　this.element.className = 'dynamic-gallery';  
    7. 
  
  
  
  7.  　　}  
    8. 
  
  
  
  8.  　　DynamicGallery.prototype = {  
    9. 
  
  
  
  9.     　　// 實(shí)現(xiàn)Composite組合對(duì)象接口   
    10. 
  
  
  
  10.     　　add: function (child) {  
    11. 
  
  
  
  11.        　　this.children.push(child);  
    12. 
  
  
  
  12.        　　this.element.appendChild(child.getElement());  
    13. 
  
  
  
  13.     　　},  
    14. 
  
  
  
  14.     　　remove: function (child) {  
    15. 
  
  
  
  15.        　　for (var node, i = 0; node = this.getChild(i); i++) {  
    16. 
  
  
  
  16.           　　if (node == child) {  
    17. 
  
  
  
  17.              　　this.children.splice(i, 1);  
    18. 
  
  
  
  18.             　　 break;  
    19. 
  
  
  
  19.           　　}  
    20. 
  
  
  
  20.        　　}  
    21. 
  
  
  
  21.        　　this.element.removeChild(child.getElement());  
    22. 
  
  
  
  22.     　　},  
    23. 
  
  
  
  23.     　　getChild: function (i) {  
    24. 
  
  
  
  24.        　　return this.children[i];  
    25. 
  
  
  
  25.     　　},  
    26. 
  
  
  
  26.     　　// 實(shí)現(xiàn)DynamicGallery組合對(duì)象接口   
    27. 
  
  
  
  27.     　　hide: function () {  
    28. 
  
  
  
  28.        　　for (var node, i = 0; node = this.getChild(i); i++) {  
    29. 
  
  
  
  29.           　　node.hide();  
    30. 
  
  
  
  30.        　　}  
    31. 
  
  
  
  31.        　　this.element.style.display = 'none';  
    32. 
  
  
  
  32.    　　},  
    33. 
  
  
  
  33.     　　show: function () {  
    34. 
  
  
  
  34.        　　this.element.style.display = 'block';  
    35. 
  
  
  
  35.        　　for (var node, i = 0; node = getChild(i); i++) {  
    36. 
  
  
  
  36.           　　node.show();  
    37. 
  
  
  
  37.        　　}  
    38. 
  
  
  
  38.     　　},  
    39. 
  
  
  
  39.     　　// 幫助方法   
    40. 
  
  
  
  40.     　　getElement: function () {  
    41. 
  
  
  
  41.        　　return this.element;  
    42. 
  
  
  
  42.     　　}  
    43. 
  
  
  
  43.  　　} 
    44.

再創(chuàng)建葉對(duì)象類(lèi)

 
 
 
    
  
  
  
  1. var GalleryImage = function (src) { // 實(shí)現(xiàn)Composite和GalleryItem組合對(duì)象中所定義的方法   
    2. 
  
  
  
  2.     　　this.element = document.createElement('img');  
    3. 
  
  
  
  3.     　　this.element.className = 'gallery-image';  
    4. 
  
  
  
  4.     　　this.element.src = src;  
    5. 
  
  
  
  5.  　　}  
    6. 
  
  
  
  6.  　　GalleryImage.prototype = {  
    7. 
  
  
  
  7.     　　// 實(shí)現(xiàn)Composite接口   
    8. 
  
  
  
  8.     　　// 這些是葉結(jié)點(diǎn)，所以我們不用實(shí)現(xiàn)這些方法，我們只需要定義即可   
    9. 
  
  
  
  9.     　　add: function () { },  
    10. 
  
  
  
  10.     　　remove: function () { },  
    11. 
  
  
  
  11.     　　getChild: function () { },  
    12. 
  
  
  
  12.     　　// 實(shí)現(xiàn)GalleryItem接口   
    13. 
  
  
  
  13.     　　hide: function () {  
    14. 
  
  
  
  14.        　　this.element.style.display = 'none';  
    15. 
  
  
  
  15.     　　},  
    16. 
  
  
  
  16.     　　show: function () {  
    17. 
  
  
  
  17.        　　this.element.style.display = '';  
    18. 
  
  
  
  18.     　　},  
    19. 
  
  
  
  19.    　　// 幫助方法   
    20. 
  
  
  
  20.     　　getElement: function () {  
    21. 
  
  
  
  21.       　　return this.element;  
    22. 
  
  
  
  22.     　　}  
    23. 
  
  
  
  23.  　　}  
    24.

現(xiàn)在我們可以使用這兩個(gè)類(lèi)來(lái)管理圖片：

 
 
 
    
  
  
  
  1. var topGallery = new DynamicGallery('top-gallery');   
    2. 
  
  
  
  2.  　　topGallery.add(new GalleryImage('/img/image-1.jpg'));   
    3. 
  
  
  
  3.  　　topGallery.add(new GalleryImage('/img/image-2.jpg'));   
    4. 
  
  
  
  4.  　　topGallery.add(new GalleryImage('/img/image-3.jpg'));   
    5. 
  
  
  
  5.  　　var vacationPhotos = new DyamicGallery('vacation-photos');   
    6. 
  
  
  
  6.  　　for(var i = 0, i < 30; i++){   
    7. 
  
  
  
  7.  　　　　vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg'));   
    8. 
  
  
  
  8.  　　}   
    9. 
  
  
  
  9.  　　topGallery.add(vacationPhotos);   
    10. 
  
  
  
  10.  　　topGallery.show();   
    11. 
  
  
  
  11.  　　vacationPhotos.hide();  
    12.

#p#

門(mén)面(facade)模式：門(mén)面模式是幾乎所有JavaScript庫(kù)的核心原則

子系統(tǒng)中的一組接口提供一個(gè)一致的界面，門(mén)面模式定義了一個(gè)高層接口，這個(gè)接口使得這一子系統(tǒng)更加容易使用，簡(jiǎn)單的說(shuō)這是一種組織性的模式，它可以用來(lái)修改類(lèi)和對(duì)象的接口，使其更便于使用。

門(mén)面模式的兩個(gè)作用：1.簡(jiǎn)化類(lèi)的接口;2.消除類(lèi)與使用它的客戶(hù)代碼之間的耦合。

門(mén)面模式的使用目的就是圖方面。

想象一下計(jì)算機(jī)桌面上的那些快捷方式圖標(biāo)，它們就是在扮演一個(gè)把用戶(hù)引導(dǎo)至某個(gè)地方的接口的角色，每次操作都是間接的執(zhí)行一些幕后的命令。

你在看這篇的博客的時(shí)候我就假設(shè)你已經(jīng)有JavaScript的使用經(jīng)驗(yàn)了，那么你一定寫(xiě)過(guò)或者看過(guò)這樣的代碼：

 
 
 
    
  
  
  
  1. var addEvent = function(el,type,fn){  
    2. 
  
  
  
  2.     　　if(window.addEventListener){  
    3. 
  
  
  
  3.        　　el.addEventListener(type,fn);  
    4. 
  
  
  
  4.     　　}else if(window.attachEvent){  
    5. 
  
  
  
  5.        　　el.attachEvent('on'+type,fn);  
    6. 
  
  
  
  6.     　　}else{  
    7. 
  
  
  
  7.        　　el['on'+type] = fn;  
    8. 
  
  
  
  8.     　　}  
    9. 
  
  
  
  9.  　　} 
    10.

這個(gè)就是一個(gè)JavaScript中常見(jiàn)的事件監(jiān)聽(tīng)器函數(shù)，這個(gè)函數(shù)就是一個(gè)基本的門(mén)面，有了它，就有了為DOM節(jié)點(diǎn)添加事件監(jiān)聽(tīng)器的簡(jiǎn)便方法。

現(xiàn)在要說(shuō)門(mén)面模式的精華部分了，為什么說(shuō)JavaScript庫(kù)幾乎都會(huì)用這種模式類(lèi)。假如現(xiàn)在要設(shè)計(jì)一個(gè)庫(kù)，那么***把其中所有的工具元素放在一起，這樣更好用，訪問(wèn)起來(lái)更簡(jiǎn)便?？创a：

 
 
 
    
  
  
  
  1. //_model.util是一個(gè)命名空間  
    2. 
  
  
  
  2.  　　_myModel.util.Event = {  
    3. 
  
  
  
  3.     　　getEvent:function(e){  
    4. 
  
  
  
  4.        　　return e|| window.event;  
    5. 
  
  
  
  5.     　　},  
    6. 
  
  
  
  6.     　　getTarget:function(e){  
    7. 
  
  
  
  7.        　　return e.target||e.srcElement;  
    8. 
  
  
  
  8.     　　},  
    9. 
  
  
  
  9.     　　preventDefault:function(e){  
    10. 
  
  
  
  10.        　　if(e.preventDefault){  
    11. 
  
  
  
  11.           　　e.preventDefault();  
    12. 
  
  
  
  12.        　　}else{  
    13. 
  
  
  
  13.           　　e.returnValue = false;  
    14. 
  
  
  
  14.        　　}  
    15. 
  
  
  
  15.     　　}  
    16. 
  
  
  
  16.  　　};  
    17. 
  
  
  
  17.  　　//事件工具大概就是這么一個(gè)套路，然后結(jié)合addEvent函數(shù)使用  
    18. 
  
  
  
  18.  　　addEvent(document.getElementsByTagName('body')[0],'click',function(e){  
    19. 
  
  
  
  19.     　　alert(_myModel.util.Event.getTarget(e));  
    20. 
  
  
  
  20.  　　}); 
    21.

個(gè)人認(rèn)為，在處理游覽器差異問(wèn)題時(shí)***的解決辦法就是把這些差異抽取的門(mén)面方法中，這樣可以提供一個(gè)更一致的接口，addEvent函數(shù)就是一個(gè)例子。

適配置器(Adapter)模式：將一個(gè)類(lèi)的接口轉(zhuǎn)換成客戶(hù)希望的另外一個(gè)接口。適配器模式使得原本由于接口不兼容而不能一起工作的那些類(lèi)可以一起工作，使用這種模式的對(duì)象又叫包裝器，因?yàn)樗麄兪窃谟靡粋€(gè)新的接口包裝另一個(gè)對(duì)象。

從表面上看，它和門(mén)面模式有點(diǎn)相似，差別在于它們?nèi)绾胃淖兘涌?，門(mén)面模式展現(xiàn)的是一個(gè)簡(jiǎn)化的接口，它并不提供額外的選擇，而適配器模式則要把一個(gè)接口轉(zhuǎn)換為另一個(gè)接口，它并不會(huì)濾除某些能力，也不會(huì)簡(jiǎn)化接口。先來(lái)一個(gè)簡(jiǎn)單的示例看看：

 
 
 
    
  
  
  
  1. //假如有一個(gè)3個(gè)字符串參數(shù)的函數(shù)，但是現(xiàn)在擁有的卻是一個(gè)包含三個(gè)字符串元素的對(duì)象，那么就可以用一個(gè)配置器來(lái)銜接二者  
    2. 
  
  
  
  2.  　　var clientObject = {  
    3. 
  
  
  
  3.     　　str1:'bat',  
    4. 
  
  
  
  4.     　　str2:'foo',  
    5. 
  
  
  
  5.     　　str3:'baz' 
    6. 
  
  
  
  6.  　　}  
    7. 
  
  
  
  7.  　　function interfaceMethod(str1,str2,str3){  
    8. 
  
  
  
  8.  　　　　alert(str1)  
    9. 
  
  
  
  9.  　　}  
    10. 
  
  
  
  10.  　　//配置器函數(shù)  
    11. 
  
  
  
  11.  　　function adapterMethod(o){  
    12. 
  
  
  
  12.     　　interfaceMethod(o.str1, o.str2, o.str3);  
    13. 
  
  
  
  13.  　　}  
    14. 
  
  
  
  14.  　　adapterMethod(clientObject)  
    15. 
  
  
  
  15.  　　//adapterMethod函數(shù)的作為就在于對(duì)interfaceMethod函數(shù)進(jìn)行包裝，并把傳遞給它的參數(shù)轉(zhuǎn)換為后者需要的形式。 
    16.

適配器模式的工作機(jī)制是：用一個(gè)新的接口對(duì)現(xiàn)有類(lèi)得接口進(jìn)行包裝。

示例：適配兩個(gè)庫(kù)。下面的例子要實(shí)現(xiàn)的是從Prototype庫(kù)的$函數(shù)到Y(jié)UI的get方法的轉(zhuǎn)換。

 
 
 
    
  
  
  
  1. //先看它們?cè)诮涌诜矫娴牟顒e  
    2. 
  
  
  
  2.  　　//Prototype $ function   
    3. 
  
  
  
  3.  　　function $(){  
    4. 
  
  
  
  4.     　　var elements = new Array();  
    5. 
  
  
  
  5.     　　for(var i=0;i
  
  
  
  6.        　　var element = arguments[i];  
    7. 
  
  
  
  7.        　　if(typeof element == 'string'){  
    8. 
  
  
  
  8.           　　element = document.getElementById(element);  
    9. 
  
  
  
  9.        　　}  
    10. 
  
  
  
  10.        　　if(typeof.length ==1)    return element;  
    11. 
  
  
  
  11.        　　elements.push(element);  
    12. 
  
  
  
  12.     　　}  
    13. 
  
  
  
  13.     　　return elements;  
    14. 
  
  
  
  14.  　　}  
    15. 
  
  
  
  15.  　　//YUI get method  
    16. 
  
  
  
  16.  　　YAHOO.util.Dom.get = function(el){  
    17. 
  
  
  
  17.     　　if(YAHOO.lang.isString(el)){  
    18. 
  
  
  
  18.        　　return document.getElementById(el);  
    19. 
  
  
  
  19.     　　}  
    20. 
  
  
  
  20.     　　if(YAHOO.lang.isArray(el)){  
    21. 
  
  
  
  21.        　　var c =[];  
    22. 
  
  
  
  22.        　　for(var i=0,len=el.length;i
  
  
  
  23.           　　c[c.length] = YAHOO.util.Dom.get(el[i]);  
    24. 
  
  
  
  24.        　　}  
    25. 
  
  
  
  25.        　　return c;  
    26. 
  
  
  
  26.     　　}  
    27. 
  
  
  
  27.     　　if(el){  
    28. 
  
  
  
  28.        　　return el;  
    29. 
  
  
  
  29.     　　}  
    30. 
  
  
  
  30.     　　return null;  
    31. 
  
  
  
  31.  　　}  
    32. 
  
  
  
  32.  　　//二者區(qū)別就在于get具有一個(gè)參數(shù)，且可以是HTML,字符串或者數(shù)組；而$木有正是的參數(shù)，允許使用者傳入任意數(shù)目的參數(shù)，不管HTML還是字符串。  
    33. 
  
  
  
  33.  　　//如果需要從使用Prototype的$函數(shù)改為使用YUI的get方法（或者相反，那么用適配器模式其實(shí)很簡(jiǎn)單）  
    34. 
  
  
  
  34.  　　function PrototypeToYUIAdapter(){  
    35. 
  
  
  
  35.     　　return YAHOO.util.Dom.get(arguments);  
    36. 
  
  
  
  36.  　　}  
    37. 
  
  
  
  37.  　　function YUIToPrototypeAdapter(el){  
    38. 
  
  
  
  38.     　　return $.apply(window,el instanceof Array?el:[el]);  
    39. 
  
  
  
  39.  　　} 
    40.

享元(Flyweight)模式：運(yùn)用共享技術(shù)有效地支持大量細(xì)粒度的對(duì)象。

享元模式可以避免大量非常相似類(lèi)的開(kāi)銷(xiāo)。在程序設(shè)計(jì)中有時(shí)需要生成大量細(xì)粒度的類(lèi)實(shí)例來(lái)表示數(shù)據(jù)。如果發(fā)現(xiàn)這些實(shí)例除了幾個(gè)參數(shù)外基本傷都是相同的，有時(shí)就能夠受大幅度第減少需要實(shí)例化的類(lèi)的數(shù)量。如果能把這些參數(shù)移到類(lèi)實(shí)例外面，在方法調(diào)用時(shí)將他們傳遞進(jìn)來(lái)，就可以通過(guò)共享大幅度地減少單個(gè)實(shí)例的數(shù)目。

從實(shí)際出發(fā)說(shuō)說(shuō)自己的理解吧。

組成部分

“享元”：抽離出來(lái)的外部操作和數(shù)據(jù);

“工廠”：創(chuàng)造對(duì)象的工廠;

“存儲(chǔ)器”：存儲(chǔ)實(shí)例對(duì)象的對(duì)象或數(shù)組，供“享元”來(lái)統(tǒng)一控制和管理。

應(yīng)用場(chǎng)景

1. 頁(yè)面存在大量資源密集型對(duì)象;

2. 這些對(duì)象具備一定的共性，可以抽離出公用的操作和數(shù)據(jù)

關(guān)鍵

1. 合理劃分內(nèi)部和外部數(shù)據(jù)。

既要保持每個(gè)對(duì)象的模塊性、保證享元的獨(dú)立、可維護(hù)，又要盡可能多的抽離外部數(shù)據(jù)。

2. 管理所有實(shí)例

既然抽離出了外部數(shù)據(jù)和操作，那享元就必須可以訪問(wèn)和控制實(shí)例對(duì)象。在JavaScript這種動(dòng)態(tài)語(yǔ)言中，這個(gè)需求是很容易實(shí)現(xiàn)的：我們可以把工廠生產(chǎn)出的對(duì)象簡(jiǎn)單的扔在一個(gè)數(shù)組中。為每個(gè)對(duì)象設(shè)計(jì)暴露給外部的方法，便于享元的控制。

優(yōu)點(diǎn)

1. 將能耗大的操作抽離成一個(gè)，在資源密集型系統(tǒng)中，可大大減少資源和內(nèi)存占用;

2. 職責(zé)封裝，這些操作獨(dú)立修改和維護(hù);

缺點(diǎn)

1. 增加了實(shí)現(xiàn)復(fù)雜度。

將原本由一個(gè)工廠方法實(shí)現(xiàn)的功能，修改為了一個(gè)享元+一個(gè)工廠+一個(gè)存儲(chǔ)器。

2. 對(duì)象數(shù)量少的情況，可能會(huì)增大系統(tǒng)開(kāi)銷(xiāo)。

示例：

 
 
 
    
  
  
  
  1. //汽車(chē)登記示例  
    2. 
  
  
  
  2.  　　var Car = function(make,model,year,owner,tag,renewDate){  
    3. 
  
  
  
  3.  　　　　this.make=make;  
    4. 
  
  
  
  4.  　　　　this.model=model;  
    5. 
  
  
  
  5.  　　　　this.year=year;  
    6. 
  
  
  
  6.  　　　　this.owner=owner;  
    7. 
  
  
  
  7.  　　　　this.tag=tag;  
    8. 
  
  
  
  8.  　　　　this.renewDate=renewDate;  
    9. 
  
  
  
  9.  　　}  
    10. 
  
  
  
  10.  　　Car.prototype = {  
    11. 
  
  
  
  11.  　　　　getMake:function(){  
    12. 
  
  
  
  12.  　　　　　　return this.make;  
    13. 
  
  
  
  13.  　　　　},  
    14. 
  
  
  
  14.  　　　　getModel:function(){  
    15. 
  
  
  
  15.  　　　　　　return this.model;  
    16. 
  
  
  
  16.  　　　　},  
    17. 
  
  
  
  17.  　　　　getYear:function(){  
    18. 
  
  
  
  18.  　　　　　　return this.year;  
    19. 
  
  
  
  19.  　　　　},  
    20. 
  
  
  
  20.  　　　　transferOwner:function(owner,tag,renewDate){  
    21. 
  
  
  
  21.  　　　　　　this.owner=owner;  
    22. 
  
  
  
  22.  　　　　　　this.tag=tag;  
    23. 
  
  
  
  23.  　　　　　　this.renewDate=renewDate;  
    24. 
  
  
  
  24.  　　　　},  
    25. 
  
  
  
  25.  　　　　renewRegistration:function(renewDate){  
    26. 
  
  
  
  26.  　　　　　　this.renewDate=renewDate;  
    27. 
  
  
  
  27.  　　　　}  
    28. 
  
  
  
  28.  　　}  
    29. 
  
  
  
  29.  　　//數(shù)據(jù)量小到?jīng)]多大的影響，數(shù)據(jù)量大的時(shí)候?qū)τ?jì)算機(jī)內(nèi)存會(huì)產(chǎn)生壓力，下面介紹享元模式優(yōu)化后  
    30. 
  
  
  
  30.  　　//包含核心數(shù)據(jù)的Car類(lèi)  
    31. 
  
  
  
  31.  　　var Car=function(make,model,year){  
    32. 
  
  
  
  32.  　　　　this.make=make;  
    33. 
  
  
  
  33.  　　　　this.model=model;  
    34. 
  
  
  
  34.  　　　　this.year=year;  
    35. 
  
  
  
  35.                                                 
    
                                                當(dāng)前題目：JavaScript設(shè)計(jì)模式深入分析                                                
    
                                                標(biāo)題來(lái)源：http://m.5511xx.com/article/cdicsee.html