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

設(shè)計(jì)模式(Design Pattern)對于軟件開發(fā)來說其重要性不言而喻，代碼可復(fù)用、可維護(hù)、可擴(kuò)展一直都是軟件工程中的追求！對于我一個(gè)學(xué)javascript的人來說，理解設(shè)計(jì)模式似乎有些困難，對僅切圖、做少量交互效果的FE甚至可能不會用到，但是當(dāng)你開始使用Angular/Backbone等框架的時(shí)候，就無法避免設(shè)計(jì)模式、MVC/MVVM這些東西了（反正我是傷腦筋）。

我學(xué)設(shè)計(jì)模式是剛開始接觸編程大概三個(gè)月的時(shí)候，看一本書《大話設(shè)計(jì)模式》，里面用C#語言來寫，我很無語，因?yàn)閺?qiáng)類型的編程語言對于我這種寫弱類型的毛頭小子來說，似乎又有困難啊，于是我就學(xué)C#基礎(chǔ)語法規(guī)則去了。。。今年年初我又學(xué)了JAVA的基礎(chǔ)語法規(guī)則。。。然而我的初衷已經(jīng)被拋棄在一旁，落上了厚厚的灰層。對于自學(xué)編程的我來說，不知道學(xué)習(xí)編程的先后順序似乎吃虧不少，但是總要有開頭的！

以上可直接跳過

先來說一下我對“觀察者模式”的個(gè)人理解：觀察者模式又稱“發(fā)布-訂閱（Publish/Subscribe）模式”，發(fā)布與訂閱顯然是兩個(gè)不同對象的功能，比如RSS。知乎是一個(gè)發(fā)布者（發(fā)布一些對某方面問題的高贊同解答），我作為一個(gè)訂閱者（在我的郵箱里面訂閱了知乎的相關(guān)發(fā)布內(nèi)容），我的同事以及我的老板都訂閱了知乎，所以在這個(gè)模型中，有一個(gè)發(fā)布者，有三個(gè)訂閱者。

在具體編程中，發(fā)布者有了新的內(nèi)容，需要向訂閱者推送數(shù)據(jù)，那么新的內(nèi)容（state）、訂閱者有哪些（observers）就是發(fā)布者需要包含的東西，誰訂閱了、誰退訂了則要對發(fā)布者中的訂閱者列表進(jìn)行更新。以下是發(fā)布者的相關(guān)信息代碼解讀：

Publisher(){ this.observers = []; this.state = ""; } Publisher.prototype.addOb=function(observer){ var flag = false; for (var i = this.observers.length - 1; i >= 0; i--) { if(this.observers[i]===observer){ flag=true; } }; if(!flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ var observers = this.observers; for (var i = 0; i < observers.length; i++) { if(observers[i]===observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ var observers = this.observers; for (var i = 0; i < observers.length; i++) { observers[i].update(this.state); }; }

以上在遍歷observers數(shù)組的時(shí)候，可以使用數(shù)組類的filter、forEach等新特性來處理。第三個(gè)notice函數(shù)表示發(fā)布者有了新東西，然后對訂閱者列表中的所有人通知他們我有新內(nèi)容（state）了，你們拿去更新你們的郵箱吧。這里把內(nèi)容傳遞給了每一個(gè)訂閱者的update更新功能。

那么訂閱者呢？訂閱者很簡單，只需要具有一個(gè)update功能即可（每一個(gè)訂閱者update可能不一樣，比如我是放進(jìn)郵箱了，我的同事則將訂閱的拿來，并且順便把舊的刪掉了，我的上司則將數(shù)據(jù)轉(zhuǎn)發(fā)到Gmail去了）。下面是訂閱者相關(guān)信息代碼解讀：

Subscribe(){ this.update = function(data){ console.log(data); }; }

實(shí)際上，因?yàn)槊恳粋�(gè)訂閱者都有這個(gè)update，所以我們通常應(yīng)該將其添加到構(gòu)造器的原型上面，當(dāng)對這個(gè)默認(rèn)的update功能不滿足要求的時(shí)候，可以為每一個(gè)訂閱者的實(shí)例設(shè)置單獨(dú)的update，比如將這個(gè)data發(fā)送給別人。最后咱們看看怎么應(yīng)用。

oba = new Subscribe(), obb = new Subscribe(); var pba = new Publisher(); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ console.log(state+"hello!"); } obb.update = function(state){ console.log(state+"world!"); } pba.state = "open "; pba.notice();

大家看到，我們在最后對發(fā)布者手動設(shè)置了它的內(nèi)容（state）并且要求他發(fā)出通知（notice）。在實(shí)際項(xiàng)目中，發(fā)布者的內(nèi)容可能是從后臺獲取的也可能是從前臺某地方輸入的。然而發(fā)布者每次更新內(nèi)容后又要手動調(diào)用通知是不是有點(diǎn)多余呢？既然更新了內(nèi)容那就肯定要通知別人了啊。那我們就把內(nèi)容的更新與發(fā)出通知進(jìn)行綁定好了，看下面的代碼：

Document Publisher(){ []; (){ return state; } (value){ state = value; this.notice(); } } Publisher.prototype.addOb=function(observer){ ; ) { observer){ flag=true; } }; flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ .observers; ) { observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ .observers; ) { observers[i].update( }; } Subscribe(){ (data){ console.log(data); }; } Subscribe(), obb = new Subscribe(); Publisher(); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ console.log(state); } obb.update = function(state){ console.log(state); } pba.setState(

對于以上的內(nèi)容，或許并沒有跟我們的項(xiàng)目中實(shí)際出現(xiàn)的問題有關(guān)，那我們就來代入這種設(shè)計(jì)模式，做一個(gè)例子：三個(gè)文本框ABC，其中A可編輯，B與C不可編輯且B的值是A的值加上后綴"@w3c.com",C的值是A的值加上前綴"ID-"。

Document用戶名稱：生成郵箱：生成ID： Publisher(obj){ []; (){ return state; } (value){ state = value; this.notice(); } obj; } Publisher.prototype.addOb=function(observer){ ; ) { observer){ flag=true; } }; flag){ this.observers.push(observer); } return this; } Publisher.prototype.removeOb=function(observer){ .observers; ) { observer){ observers.splice(i,1); } }; return this; } Publisher.prototype.notice=function(){ .observers; ) { observers[i].update(this.getState()); }; } Subscribe(obj){ obj; (data){ data; }; } )), obb )); )); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ ; } obb.update = function(state){ state; } pba.obj.addEventListener((){ pba.setState(this.value); });

在《大話設(shè)計(jì)模式》一書中，提到類似的情況：如果針對發(fā)布者內(nèi)容而訂閱者要做不同的事情呢？比如一個(gè)按鈕和三個(gè)矩形，點(diǎn)擊按鈕的時(shí)候，第一個(gè)矩形增加寬度，第二個(gè)矩形增加高度，，第三個(gè)矩形則變成圓角矩形又該怎么做呢？當(dāng)然我們可以在三個(gè)矩形的update內(nèi)部寫具體的實(shí)現(xiàn)代碼，但是這update豈不是沒有一個(gè)具體的功能描述了嗎？該書中用“事件委托”解決了這個(gè)問題（此處事件委托和DOM中的事件委托應(yīng)該是兩碼事），我個(gè)人理解這個(gè)“事件委托”在javascript中可以用一個(gè)數(shù)組表示，然后里面放各個(gè)訂閱者的不同名字的update，然后一一調(diào)用。

在《JavaScript設(shè)計(jì)模式》一書中，關(guān)于觀察者模式的實(shí)現(xiàn)也是采用”推“這種方式，章節(jié)的最后反問到如何實(shí)現(xiàn)”拉“這種方式呢？

我個(gè)人理解：發(fā)布者推送數(shù)據(jù)的時(shí)候有強(qiáng)制性，促使訂閱者更新（update），然而在”拉“這種模式中，發(fā)布者本身僅僅包含最新的內(nèi)容，沒有通知（notice）沒有訂閱者列表，當(dāng)訂閱者需要得到數(shù)據(jù)的時(shí)候在其對應(yīng)的update方法里面?zhèn)魅氚l(fā)布者對象即可。小白之見，請對該模式有不同理解的道友多多指正。o(∩_∩)o 

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