設計模式(Design Pattern)對於軟件開發來說其重要性不言而喻，代碼可復用、可維護、可擴展一直都是軟件工程中的追求！對於我一個學javascript的人來說，理解設計模式似乎有些困難，對僅切圖、做少量交互效果的FE甚至可能不會用到，但是當你開始使用Angular/Backbone等框架的時候，就無法避免設計模式、MVC/MVVM這些東西了（反正我是傷腦筋）。
我學設計模式是剛開始接觸編程大概三個月的時候，看一本書《大話設計模式》，里面用C#語言來寫，我很無語，因為強類型的編程語言對於我這種寫弱類型的毛頭小子來說，似乎又有困難啊，於是我就學C#基礎語法規則去了。。。今年年初我又學了JAVA的基礎語法規則。。。然而我的初衷已經被拋棄在一旁，落上了厚厚的灰層。對於自學編程的我來說，不知道學習編程的先后順序似乎吃虧不少，但是總要有開頭的！
以上可直接跳過
先來說一下我對“觀察者模式”的個人理解：觀察者模式又稱“發布-訂閱（Publish/Subscribe）模式”，發布與訂閱顯然是兩個不同對象的功能，比如RSS。知乎是一個發布者（發布一些對某方面問題的高贊同解答），我作為一個訂閱者（在我的郵箱里面訂閱了知乎的相關發布內容），我的同事以及我的老板都訂閱了知乎，所以在這個模型中，有一個發布者，有三個訂閱者。
在具體編程中，發布者有了新的內容，需要向訂閱者推送數據，那么新的內容（state）、訂閱者有哪些（observers）就是發布者需要包含的東西，誰訂閱了、誰退訂了則要對發布者中的訂閱者列表進行更新。以下是發布者的相關信息代碼解讀：
//發布者 function 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數組的時候，可以使用數組類的filter、forEach等新特性來處理。第三個notice函數表示發布者有了新東西，然后對訂閱者列表中的所有人通知他們我有新內容（state）了，你們拿去更新你們的郵箱吧。這里把內容傳遞給了每一個訂閱者的update更新功能。
那么訂閱者呢？訂閱者很簡單，只需要具有一個update功能即可（每一個訂閱者update可能不一樣，比如我是放進郵箱了，我的同事則將訂閱的拿來，並且順便把舊的刪掉了，我的上司則將數據轉發到Gmail去了）。下面是訂閱者相關信息代碼解讀：
//訂閱者 function Subscribe(){ this.update = function(data){ console.log(data); }; }
實際上，因為每一個訂閱者都有這個update，所以我們通常應該將其添加到構造器的原型上面，當對這個默認的update功能不滿足要求的時候，可以為每一個訂閱者的實例設置單獨的update，比如將這個data發送給別人。最后咱們看看怎么應用。
//實際應用 var 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();
大家看到，我們在最后對發布者手動設置了它的內容（state）並且要求他發出通知（notice）。在實際項目中，發布者的內容可能是從后台獲取的也可能是從前台某地方輸入的。然而發布者每次更新內容后又要手動調用通知是不是有點多余呢？既然更新了內容那就肯定要通知別人了啊。那我們就把內容的更新與發出通知進行綁定好了，看下面的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> //發布者 function Publisher(){ this.observers = []; var state = ""; //讓該內容不能直接訪問 //新增兩個對於state的操作 獲取/更新 this.getState=function(){ return state; } this.setState=function(value){ state = value; this.notice(); } } 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.getState()); //獲取發布者的內容 }; } //訂閱者 function Subscribe(){ this.update = function(data){ console.log(data); }; } //實際應用 var 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.setState("open "); //發布者更新了內容 </script> </body> </html>
對於以上的內容，或許並沒有跟我們的項目中實際出現的問題有關，那我們就來代入這種設計模式，做一個例子：三個文本框ABC，其中A可編輯，B與C不可編輯且B的值是A的值加上后綴"@w3c.com",C的值是A的值加上前綴"ID-"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <label>用戶名稱：<input type="text" id="pba" placeholder="請輸入用戶名稱" /></label><br /><br /> <label>生成郵箱：<input type="text" id="oba" readonly /></label> <label>生成ID：<input type="text" id="obb" readonly /></label> </div> <script type="text/javascript"> //發布者 function Publisher(obj){ this.observers = []; var state = obj.value; //讓該內容不能直接訪問 //新增兩個對於state的操作 獲取/更新 this.getState=function(){ return state; } this.setState=function(value){ state = value; this.notice(); } this.obj = obj; } 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.getState()); }; } //訂閱者 function Subscribe(obj){ this.obj = obj; this.update = function(data){ this.obj.value = data; }; } //實際應用 var oba = new Subscribe(document.querySelector("#oba")), obb = new Subscribe(document.querySelector("#obb")); var pba = new Publisher(document.querySelector("#pba")); pba.addOb(oba); pba.addOb(obb); oba.update = function(state){ this.obj.value = state+"@w3c.com"; } obb.update = function(state){ this.obj.value = "ID-"+state; } pba.obj.addEventListener('keyup',function(){ pba.setState(this.value); }); </script> </body> </html>
在《大話設計模式》一書中，提到類似的情況：如果針對發布者內容而訂閱者要做不同的事情呢？比如一個按鈕和三個矩形，點擊按鈕的時候，第一個矩形增加寬度，第二個矩形增加高度，第三個矩形則變成圓角矩形又該怎么做呢？當然我們可以在三個矩形的update內部寫具體的實現代碼，但是這update豈不是沒有一個具體的功能描述了嗎？該書中用“事件委托”解決了這個問題（此處事件委托和DOM中的事件委托應該是兩碼事），我個人理解這個“事件委托”在javascript中可以用一個數組表示，然后里面放各個訂閱者的不同名字的update，然后一一調用。
在《javascript設計模式》一書中，關於觀察者模式的實現也是采用”推“這種方式，章節的最后反問到如何實現”拉“這種方式呢？
我個人理解：發布者推送數據的時候有強制性，促使訂閱者更新（update），然而在”拉“這種模式中，發布者本身僅僅包含最新的內容，沒有通知（notice）沒有訂閱者列表，當訂閱者需要得到數據的時候在其對應的update方法里面傳入發布者對象即可。小白之見，請對該模式有不同理解的道友多多指正。o(∩_∩)o