1.觀察者模式

觀察者模式定義對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知。

JavaScript中通常采用事件模型替代傳統的觀察者模式

1.1 逐步實現觀察者模式

以客戶看房為例

首先指定誰充當發布者，如售樓處

然后給發布者添加一個緩存列表，用于存放回調函數以便通知訂閱者。這里為了讓訂閱者只接收自己感興趣的消息，增加一個標識key

最后發布消息時候，發布者遍歷緩存列表，依次觸發里面存放的訂閱者的回調函數

var salesOffices={}; salesOffices.clientList=[]; salesOffices.listen=function(key,fn){if(!this.clientList[key]){this.clientList[key]=[];}this.clientList[key].push(fn); } salesOffices.trigger=function(){var key=Array.prototype.shift.call(arguments),fns=this.clientList[key];if(!fns || fns.length === 0){return false;}for(var i=0,fn;fn=fns[i++];){fn.apply(this,arguments);} }salesOffices.listen('squareMeter88',function(price){//A訂閱88平房子消息console.log('價格='+price); });salesOffices.listen('squareMeter100',function(price)){//B訂閱100平房子消息console.log('價格='+price); }salesOffices.trigger('squareMeter88',200000); salesOffices.trigger('squareMeter100',300000);

1.2 觀察者模式通用實現

var Event=(function(){var clientList={},listen,trigger,remove;listen=function(key,fn){f(!this.clientList[key]){this.clientList[key]=[];}this.clientList[key].push(fn);};trigger=function(){var key=Array.prototype.shift.call(arguments),fns=this.clientList[key];if(!fns || fns.length === 0){return false;}for(var i=0,fn;fn=fns[i++];){fn.apply(this,arguments);}};remove=function(key,fn){var fns=clientList[key];if(!fns){return false;}if(!fn){fns&&(fns.length=0);//沒指定fn時，刪除全部}else{for(var l=fns.length-1;l>=0;l--){var _fn=fns[l];if(_fn === fn){fns.splice(l,1);}}}};return{listen:listen,trigger:trigger,remove:remove} })();Event.listen('squareMeter88',function(price){//A訂閱88平房子消息console.log('價格='+price); });Event.trigger('squareMeter88',200000);

?

轉載于:https://www.cnblogs.com/GongQi/p/4652770.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的《JavaScript设计模式与开发实践》读书笔记之观察者模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。