Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例

1、Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例這篇文章主要介紹了Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例, 本文給出 3 種實(shí)現(xiàn)版本代碼, 同時(shí)給出了 Jquery 實(shí)現(xiàn)版本 , 需要的朋友可以參考下介紹觀察者模式又叫發(fā)布訂閱模式（ Publish/Subscribe ），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的觀察者對(duì)象，使得它們能夠自動(dòng)更新自己。使用觀察者模式的好處：1. 支持簡(jiǎn)單的廣播通信，自動(dòng)通知所有已經(jīng)訂閱過(guò)的對(duì)象。2. 頁(yè)面載入后目標(biāo)對(duì)象很容易與觀察者存在一種動(dòng)態(tài)關(guān)聯(lián)，增加了靈活性。3

2、. 目標(biāo)對(duì)象與觀察者之間的抽象耦合關(guān)系能夠單獨(dú)擴(kuò)展以及重用。正文（版本一）JS 里對(duì)觀察者模式的實(shí)現(xiàn)是通過(guò)回調(diào)來(lái)實(shí)現(xiàn)的， 我們來(lái)先定義一個(gè) pubsub 對(duì)象，其內(nèi)部包含了 3 個(gè)方法：訂閱、退訂、發(fā)布。代碼如下 :var pubsub = ;(function (q) var topics = , /回調(diào)函數(shù)存放的數(shù)組subUid = -1;/ 發(fā)布方法q.publish = function (topic, args) if (!topicstopic) return false;setTimeout(functionvar subscribers = topicstopic,len =

3、subscribers ? subscribers.length : 0;while (len-) subscriberslen.func(topic, args);, 0);return true;/ 訂閱方法q.subscribe = function (topic, func) if (!topicstopic) topicstopic = ;var token = (+subUid).toString ;topicstopic.push(token: token,func: func);return token;/ 退訂方法q.unsubscribe = function (token

4、) for (var m in topics) if (topicsm) for (var i = 0, j = topicsm.length; i if (topicsmi.token = token) topicsm.splice(i, 1);return token;return false; (pubsub);使用方式如下：代碼如下:/ 來(lái)，訂閱一個(gè)pubsub.subscribe(example1,functiondata) console.log(topics + : + data););/ 發(fā)布通知pubsub.publish(example1, hello world!);pu

5、bsub.publish(example1,test,(topics,a,b,c);pubsub.publish(example1, color: blue , text: hello);怎么樣？用起來(lái)是不是很爽？但是這種方式有個(gè)問(wèn)題，就是沒(méi)辦法退訂訂閱，要退訂的話必須指定退訂的名稱，所以我們?cè)賮?lái)一個(gè)版本：代碼如下 :/ 將訂閱賦值給一個(gè)變量，以便退訂vartestSubscription=pubsub.subscribe(example1, function (topics, data)console.log(topics + : + data););/ 發(fā)布通知pubsub.publish

6、(example1, hello world!);pubsub.publish(example1,test,a,b,c);pubsub.publish(example1, color: blue , text: hello);/ 退訂setTimeout(functionpubsub.unsubscribe(testSubscription);, 0);/ 再發(fā)布一次，驗(yàn)證一下是否還能夠輸出信息pubsub.publish(example1, hello again! will fail);(this版本二我們也可以利用原型的特性實(shí)現(xiàn)一個(gè)觀察者模式，代碼如下：代碼如下 :function Ob

7、server this.fns = ;Ototype = subscribe: function (fn) ,unsubscribe: function (fn) function (el) if (el != fn) return el;);,update: function (o, thisObj) var scope = thisObj | window;function (el) el.call(scope, o););/ 測(cè)試var o = new Observer;var f1 = function (data) console.log(Robbin: + d

8、ata + ,趕緊干活了！);var f2 = function (data) console.log(Randall: + data + , 找他加點(diǎn)工資去！ );o.subscribe(f1);o.subscribe(f2);o.update(Tom回來(lái)了！ )/ 退訂 f1o.unsubscribe(f1);/ 再來(lái)驗(yàn)證o.update(Tom回來(lái)了！ );如果提示找不到filter或者 forEach函數(shù)，可能是因?yàn)槟愕臑g覽器還不夠新，暫時(shí)不支持新標(biāo)準(zhǔn)的函數(shù)，你可以使用如下方式自己定義：代碼如下 :var scope = thisObj | window;for (var i = 0,

9、 j = this.length; i fn.call(scope, thisi, i, this);for (var i = 0, j = this.length; i if (!fn.call(scope, thisi, i, this) continue;a.push(thisi);return a;版本三如果想讓多個(gè)對(duì)象都具有觀察者發(fā)布訂閱的功能，我們可以定義一個(gè)通用的函數(shù)，然后將該函數(shù)的功能應(yīng)用到需要觀察者功能的對(duì)象上，代碼如下：代碼如下 :/ 通用代碼var observer = / 訂閱addSubscriber: function (callback) =callback;,/

10、 退訂removeSubscriber: function (callback) for (var i = 0; iif (this.subscribersi =callback) delete (this.subscribersi);,/ 發(fā)布publish: function (what) for(vari = 0; iif(typeofthis.subscribersi= function) this.subscribersi(what);,/ 將對(duì)象 o 具有觀察者功能make: function (o) for (var i in this) oi = thisi;o.subscri

11、bers = ;然后訂閱 2 個(gè)對(duì)象 blogger 和 user ，使用 observer.make方法將這 2 個(gè)對(duì)象具有觀察者功能，代碼如下：代碼如下 :var blogger = remend: function (id) var msg = dudu推薦了的帖子 : + id;this.publish(msg);var user = vote: function (id) var msg = 有人投票了 !ID= + id;this.publish(msg);observer.make(blogger);observer.make(user);使用方法就比較簡(jiǎn)單了，訂閱不同的回調(diào)函數(shù)

12、，以便可以注冊(cè)到不同的觀察者對(duì)象里（也可以同時(shí)注冊(cè)到多個(gè)觀察者對(duì)象里）：復(fù)制代碼代碼如下 :var tom = read: function (what) console.log(Tom看到了如下信息： + what);var mm = show: function (what) console.log(mm看到了如下信息： + what);/ 訂閱blogger.addSubscriber(tom.read);blogger.addSubscriber(mm.show);blogger.remend(123); /調(diào)用發(fā)布/ 退訂blogger.removeSubscriber(mm.sho

13、w);blogger.remend(456); /調(diào)用發(fā)布/ 另外一個(gè)對(duì)象的訂閱user.addSubscriber(mm.show);user.vote(789); /調(diào)用發(fā)布jQuery 版本根據(jù) jQuery1.7版新增的on/off功能，我們也可以定義 jQuery 版的觀察者：代碼如下 : (function ($) var o = $();$.publish = function; (jQuery);調(diào)用方法比上面3 個(gè)版本都簡(jiǎn)單：代碼如下 :/ 回調(diào)函數(shù)function handle(e, a, b, c) / e 是事件對(duì)象，不需要關(guān)注console.log(a + b + c);/ 訂閱$.subscribe(/some/topic, handle);/ 發(fā)布$.publish(/some/topic, a, b, c); /輸出 abc$.unsubscribe(/some/topic, handle); /退訂/ 訂閱$.subscribe(/some/topic, function (e, a, b, c)console.log(a + b + c););$.publish(/some/topic, a, b, c); /輸出 abc/ 退訂（退訂使用的是 /some/topic 名稱，而不是回調(diào)函數(shù)哦，和版本一