本文關鍵詞：JavaScript設計模式，由筆耕文化傳播整理發(fā)布。

    近日重讀《javascript面型對象編程指南》這本書，最后一章介紹了常見的JavaScript設計模式的實現(xiàn)。主要講解了四種設計模式：單例模式、工廠模式、裝飾器模式和觀察者模式。js作為動態(tài)語言，實現(xiàn)這四種模式的實例相對簡單，當然既然稱之為模式，那么吃透思想更重要，那么下面，由樂帝來實例講解四種模式。

   1.單例模式

   顧名思義，對象構造出來的是實例，從字面上理解，單例即單實例，這意味一個類只能創(chuàng)建一個實例對象。當需要創(chuàng)建一種類型或者一個類的唯一對象時，可使用該模式。以下兩個實例分別從全局變量和類屬性兩種角度構造單例。屬于對象創(chuàng)建型模式。

function Logger(){ if(typeof global_log==="undefined") { global_log=this;//沒有在函數(shù)內定義global_log所以被看成全局變量，并且此時this為window為全局對象 alert(this);//相當于初始化全局變量并且賦值為window，由于全局變量有唯一性，故可保證單例 } return global_log;//但問題在于全局變量有可能被覆蓋掉，造成實例流失 } var a = new Logger(); var b = new Logger(); console.log(a===b);
//另外一種單例模式：構造器屬性 function Logger(){//從面向對象的角度考慮，Logger是一個類 if(typeof Logger.single_instance==="undefined"){ Logger.single_instance=this;//Logger.single_instance則是類屬性，這個也可以實現(xiàn)單例，類屬性和私有屬性不同，類屬性是類實例公用的 alert(this); } return Logger.single_instance; } var a=new Logger() var b=new Logger() a===b;
           2.工廠模式

   總的來說，工廠模式屬于創(chuàng)建對象型模式，當有多個相似對象不知用哪種，可以考慮工廠模式。也屬于創(chuàng)建型模式。

//工廠模式 var MYAPP={}; MYAPP.dom={}; MYAPP.dom.Text=function(){ this.insert=function(where){ var txt=document.createTextNode(this.url); where.appendChild(txt); }; };//有三個相似的對象，三個對象中的方法一樣，從而使用也一樣 MYAPP.dom.Link=function(){ this.insert=function(where){ var link=document.createElement('a'); link.href=this.url; linlk.appendChild(document.createTextNode(this.url)); where.appendChild(link); }; }; MYAPP.dom.Image=function(){ this.insert=function(where){ var im=document.createElement('img'); im.src=this.url; where.appendChild(im); }; }; /* var o=new MYAPP.dom.Image(); * o.url=''; * o.insert(document.body); * * var o=new MYAPP.dom.Link(); * o.url=''; * o.insert(document.body); * * var o=new MYAPP.dom.Text(); * o.url=''; * o.insert(document.body); */ MYAPP.dom.factory=function(type){ return new MYAPP.dom[type]; }//當構造器過多時，查找不那么一目了然，用工廠函數(shù)方法動態(tài)操作，省去了如上注釋掉的操作或者if操作 var o=MYAPP.dom.factory("Image")//這種方法本質上用到了對象屬性的一一對應關系 o.url=''; o.insert(document.body);
          3.裝飾器模式

   此種模式是一種結構型模式，主要考慮如何拓展對象的功能。可以為一個基礎對象創(chuàng)建若干裝飾器對象以拓展其功能。由我們的程序自行選擇不同裝飾器，并使用它們。

var tree={}; tree.decorate=function(){ alert("make sure the tree will not fall"); } tree.getDecorator=function(deco){ tree[deco].prototype=this;//返回新對象并且原tree作為新對象的原型對象 return new tree[deco]; }; tree.RedBalls=function(){//tree的redball屬性也是對象 this.decorate=function(){ this.RedBalls.prototype.decorate();//首先調用原型對象decorate方法 alert("put on some red ball"); } }; tree.BlueBalls=function(){ this.decorate=function(){ this.BlueBalls.prototype.decorate();//首先調用原型對象decorate方法 alert("add blue ball"); } }; tree.Angel=function(){ this.decorate=function(){ this.Angel.prototype.decorate();//首先調用原型對象decorate方法 alert("an angel on the top"); } };//以上三個裝飾器可按照需要選擇 tree=tree.getDecorator("BlueBalls");//返回new tree["BlueBall"],并且保留對tree作為原型對象 tree=tree.getDecorator("RedBalls");//下兩個類似 tree=tree.getDecorator("Angel"); tree.decorate();//當調用最后的decorate方法時，，會分別上溯調用各自decorate方法中的原型對象方法調用 //裝飾器模式的實現(xiàn)，關鍵在構造新對象時不斷保留原對象作為原型對象，同時新對象的方法中，不斷調用原型對象的同名方法 //總的來說就是保存原有對象功能的前提下，不斷添加新的功能到原有對象
        4.觀察者模式

   此種模式屬于行為型模式，主要處理對象之間的交互通信的問題。通常包含兩類對象：發(fā)行商和訂閱商。

   

//觀察者模式 //觀察者模式分為推送和拉動兩類，推送模式是由發(fā)行商負責將消息通知給各個訂閱者，以下為推送模式實例 var observer={//觀察這對象 addSubscriber:function(callback){ this.subscribers[this.subscribers.length]=callback; },//添加訂閱者 removeSubscriber:function(callback){ for(var i=0;i

  本文關鍵詞：JavaScript設計模式，由筆耕文化傳播整理發(fā)布。

本文編號：339355