先摘抄一下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>
登入後複製
模組之間如果用了太多的全局發布—訂閱模式來通信,那麼模組與模組之間的聯繫就被隱藏到了背後。我們最終會搞不清楚訊息來自哪個模組,或者訊息會流向哪些模組,這又會給我們的維護帶來一些麻煩,也許某個模組的作用就是暴露一些介面給其他模組調用。