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

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

   1.單例模式

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

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

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

//工廠模式 var MYAPP={}; MYAPP.dom={}; MYAPP.dom.Text=function(){ this.insert=function(where){ var txt=document.createTextNode(this.url); where.appendChild(txt); }; };//有三個(gè)相似的對(duì)象，三個(gè)對(duì)象中的方法一樣，從而使用也一樣 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]; }//當(dāng)構(gòu)造器過多時(shí)，查找不那么一目了然，用工廠函數(shù)方法動(dòng)態(tài)操作，省去了如上注釋掉的操作或者if操作 var o=MYAPP.dom.factory("Image")//這種方法本質(zhì)上用到了對(duì)象屬性的一一對(duì)應(yīng)關(guān)系 o.url=''; o.insert(document.body);
          3.裝飾器模式

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

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

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

   

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

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

本文編號(hào)：339355