javascript觀察者模式(經(jīng)典)_javascript技巧

《javascript觀察者模式(經(jīng)典)_javascript技巧》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、JavaScript觀察者模式（經(jīng)典）Observer模式也叫觀察者模式，是由GoF提出的23種軟件設(shè)計模式的一種。Observer模式是行為模式之一，它的作用是當(dāng)一個對象的狀態(tài)發(fā)生變化時，能夠自動通知其他關(guān)聯(lián)對象，自動刷新對象狀態(tài)。Observer模式的概念Observer模式是行為模式之一，它的作用是當(dāng)一個對象的狀態(tài)發(fā)生變化時，能夠自動通知其他關(guān)聯(lián)對彖，自動刷新對彖狀態(tài)。Observer模式提供給關(guān)聯(lián)對象一種同步通信的手段，使某個對象與依賴它的其他對象之間保持狀態(tài)同步。Observer模式的角色：Sub

2、ject（被觀察者）被觀察的對象。當(dāng)需要被觀察的狀態(tài)發(fā)牛變化時，需要通知隊列中所有觀察者對象。Subject需要維持（添加，刪除，通知）一個觀察者對象的隊列列表。ConereteSubject被觀察者的具體實現(xiàn)。包含一些基木的屈性狀態(tài)及其他操作。Observer（觀察者）接口或抽彖類。當(dāng)Subject的狀態(tài)發(fā)主變化時，Observer對彖將通過一個callback函數(shù)得到通知。ConcreteObserver觀察者的具體實現(xiàn)。得到通知后將完成一些具體的業(yè)務(wù)邏輯處理。觀察者模式（又叫發(fā)布者-訂閱者模式）應(yīng)該是

3、最常用的模式之一.在很多語言里都得到大量應(yīng)用.包描我們平時接觸的doin事件?也是js和doin之間實現(xiàn)的一種觀察者模式.div.onclick=functionclick（）{alert（”click，）}只要訂閱了div的click事件.當(dāng)點(diǎn)擊div的時候，functionclick就會被觸發(fā).那么到底什么是觀察者模式呢.先看看生活中的觀察者模式。好萊塢有句名言.“不要給我打電話，我會給你打電話”?這句話就解釋了一個觀察者模式的來龍去脈。其中“我”是發(fā)布者，“你”是訂閱者。再舉個例子，我來公司而試的時候

4、，完事Z后每個而試官都會對我說：“請留下你的聯(lián)系方式，有消息我們會通知你”。在這里“我”是訂閱者，面試官是發(fā)布者。所以我不用每天或者每小吋都去詢問面試結(jié)果，通訊的主動權(quán)掌握在了面試官手上。而我只需要提供-個聯(lián)系方式。觀察者模式可以很好的實現(xiàn)2個模塊之間的解耦。假如我正在一個團(tuán)隊里開發(fā)一個html5游戲.當(dāng)游戲開始的時候，需要加載一些圖片素材。加載好這些圖片之后開始才執(zhí)行游戲邏輯.假設(shè)這是一個需要多人合作的項目.我完成了Gamer和Map模塊，而我的同事A寫了一個圖片加載器loadimage.loadimag

5、e的代碼如下loadlmagc(imgAry,function(){Map.init();Gamer,init();})當(dāng)圖片加載好之后，再渲染地圖，執(zhí)行游戲邏輯?嗯，這個程序運(yùn)行良好.突然有一天，我想起應(yīng)該給游戲加上聲音功能.我應(yīng)該讓圖片加載器添上一行代碼.loadimage(imgAry,function(){Map.init();Gamer?init();Sount.init();})可是寫這個模塊的同事A去了外地旅游.于是我打電話給他，喂.你的loadTmage函數(shù)在哪，我能不能改一下，改了之后有沒

6、有副作用.如你所想,各種不淡定的事發(fā)生了.如果當(dāng)初我們能這樣寫呢：loadimage.listen("ready，,function(){Map.iniI();})loadlmagc.1istcn("ready',function(){Gamer?init();})loadTmage.1isten("ready',function(){Sount.init();})loadimage完成Z后，它根本不關(guān)心將來會發(fā)生什么，因為它的工作已經(jīng)完成了.接下來它只要發(fā)布一個信號.loadTmage.trigger("

7、ready，);那么監(jiān)聽了loadlmagc的'rcady，事件的對象都會收到通知.就像上個面試的例了?面試官根本不關(guān)心面試者們收到面試結(jié)果后會去哪吃飯.他只負(fù)責(zé)把面試者的簡丿力搜集到一起.當(dāng)而試結(jié)果岀來時照著簡丿力上的電話挨個通知.說了這么多概念，來一個具體的實現(xiàn).實現(xiàn)過程其實很簡單.面試者把簡歷扔到一個盒子里，然后面試官在合適的吋機(jī)拿著盒子里的簡歷挨個打電話通知結(jié)果.Events=function(){varlisten,log,obj,one,remove,trigger,_this;obj二{};_

8、this=this;listen=function(key,cvcntfn){//把簡歷扔盒子，key就是聯(lián)系方式.varstack,_ref;//stack是盒子stack二(_ref二obj[key])!二null?_ref:obj[key]二[];returnstack,push(eventfn);};one=function(key,eventfn){remove(key);returnlisten(ke