先摘抄一下javascript設計模式與開發實踐一書中的文字介紹//現實中的發布訂閱模式
小明最近看上了一套房子，到了售樓處之後才被告知，該樓盤的房子早已售罄。還好售樓MM告訴小明，不久後還有一些尾盤推出，開發商正在辦理相關手續，手續辦好後便可以購買。 但到底是什麼時候，目前還沒有人能夠知道。於是小明記下了售樓處的電話，以後每天都會打電話過去詢問是不是已經到了購買時間。除了小明，還有小紅、小強、小龍也會每天向售樓諮詢這個問題。一個星期過後，售MM 決 定辭職，因為厭倦了每天回答1000 個相同內容的電話。
當然現實中沒有這麼笨的銷售公司，實際上故事是這樣的：小明離開之前，把電話號碼留在了售樓處。售樓MM 答應他，新樓盤一推出就馬上發訊息通知小明。小紅、小強和小龍也是一樣，他們的電話號都被記在售樓處的花名冊上，新樓盤推出的時候，售樓MM會翻開花名冊，遍歷上面的電話號碼，依次發送一條短信來通知他們。在剛剛的例子中，發送簡訊通知就是一個典型的發布—訂閱模式，小明、小紅等購買者都是訂閱者，他們訂閱了房子開售的消息。售樓處作為發布者，會在適當的時候遍歷花名冊上的電話 號碼，依序給購屋者發布訊息。
可以發現，在這個範例中使用發布—訂閱模式有著顯而易見的優點。購屋者不用再天天打電話給售樓處諮詢開售時間，在適當的時間點，售樓處作為發布者會通知這些消息訂閱者。購屋者和售樓處之間不再強耦合在一起，當有新的購屋者出現時，他只需把手機號碼留在售樓處，售樓處不關心購房者的任何情況，不管購房者是男是女還是一隻猴子。 而售 樓處的任何變動也不會影響購買者，比如售樓MM 離職，售樓處從一樓搬到二樓，這些 改變都跟購房者無關，只要售樓處記得發短信這件事情。
首先要指定好誰充當發布者（例如售樓處）；然後給發布者添加一個緩存列表，用於存放回調函數以便通知訂閱者（售樓處的花名冊）； 最後發布訊息的時候，發布者會遍歷這個快取列表，依序觸發裡面存放的訂閱者回呼函數（遍歷花名冊，挨個發送簡訊）。另外，我們也可以往回呼函數裡填入一些參數，訂閱者可以接收這些參數。這是很有必要的，例如售樓處可以在發給訂閱者的短信裡加上房子的單價、面積、容積率等信息，訂閱者接收到這些信息之後可以進行各自的處理：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>观察者模式</title> </head> <body> <button id="count">点我</button> <p id="show"></p> <script> //我的个人理解 //发布者首先需要一个对象来保存事件的回调函数，这个对象的属性就是事件类型，比如{"click":[fn1,fn2],"mouseover":[fn3,fn4]} //订阅事件:首先要判断这个事件类型是否存在当前的对象上，如果不存在那就初始化一下就是添加这个属性，并且给这个属性的值设置为空数组 //如果已经存在了那么久开始把该对调函数push进去对应的属性的值， 该值为一个数组 //发布事件:发布事件就要一个个的通知订阅者，还有就是你发布了什么事件。这里要有if判断， // 先从参数中取出要发布事件的key,然后获取到key对应的回调函数数组，取出数组后先判断数组是否存在或者数组长度是否为0，如果不存在或者为0 //就结束程序，若上述条件不成立就执行for循环，一次遍历回调函数数组，并执行里面的函数，这里需要改变回调函数的this指向。防止丢之 //this。 //移出事件：先判断要移出的key的值是否为空，若空则退出程序否则再判断是否传入了要移出哪个回调函数，若空，则认为要移出全部的函数，就把数组长度设置为0 // //下面是js设计模式与开发实践上的实现过程 var Event=(function(){ var clientList={}, listen, trigger, remove; listen=function(key,fn){ if(!clientList[key]){ clientList[key]=[]; } clientList[key].push(fn); }; trigger=function(){ var key=Array.prototype.shift.call(arguments), cb=clientList[key]; if(!cb||cb.length==0){ return false;//如果没有保存回调函数就退出程序 } for(var i=0;i<cb.length;i++ ){ cb[i].apply(this,arguments);//为什么要用applly呢，这是为了把触发时传入的参数传入给cb[i]对应的回调函数里面使用并且还要改变this指向 } }; remove=function (key,fn) { var cb=clientList[key]; if(!cb){ return false;//如果要移除的key的值为空就代表没有人订阅该key和设置回调函数则直接返回 } if(!fn){//如果没有传入具体的回调函数，表示需要取消key对应的消息的所有订阅 cb&&(cb.length=0);//这里cb是已经存在了就把cb的length设置为0.我有疑问，到这里其实cb不会不存在了吧上面如果不存在就退出了如何会走到这一步？ } else{ for(var l=0;l<cb.length;l++){ var _cb=cb[l]; if(_cb===fn){//寻找哪个和要删除的回调函数一样 cb.splice(l,1);//从l处删除一个元素 } } } }; return { listen:listen, trigger:trigger, remove:remove }//这里返回这个对象其实是相当于中介代理的意思，请看下面的实际例子解释： //我们给每个发布者对象都添加了listen 和trigger 方法，以及一个缓存列表clientList， //这其实是一种资源浪费。 //小明跟售楼处对象还是存在一定的耦合性，小明至少要知道售楼处对象的名字是 //才能顺利的订阅到事件。 //因此返回一个通用的对象，不必知道这个对象的名字，只需要把这个对象的一个引用给一个变量就行了 })(); Event.listen("A",fn1=function(data){ console.log(data); }) Event.listen("A",fn2=function(data){ console.log(data); }) Event.remove("A",fn1); Event.trigger("A","猴赛雷啊"); </script> <script> var a=(function(){ var count=0; var btn=document.getElementById('count'); btn.onclick=function () { Event.trigger('add',count++); } })(); var b=(function () { var p=document.getElementById('show'); Event.listen('add',function(data){ p.innerHTML=data; }) })(); </script> </body> </html>登入後複製
模組之間如果用了太多的全局發布—訂閱模式來通信，那麼模組與模組之間的聯繫就被隱藏到了背後。我們最終會搞不清楚訊息來自哪個模組，或者訊息會流向哪些模組，這又會給我們的維護帶來一些麻煩，也許某個模組的作用就是暴露一些介面給其他模組調用。
