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

2、. 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用。正文（版本一）JS 里對觀察者模式的實現是通過回調來實現的， 我們來先定義一個 pubsub 對象，其內部包含了 3 個方法：訂閱、退訂、發布。代碼如下 :var pubsub = ;(function (q) var topics = , /回調函數存放的數組subUid = -1;/ 發布方法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);使用方式如下：代碼如下:/ 來，訂閱一個pubsub.subscribe(example1,functiondata) console.log(topics + : + data););/ 發布通知pubsub.publish(example1, hello world!);pu

5、bsub.publish(example1,test,(topics,a,b,c);pubsub.publish(example1, color: blue , text: hello);怎么樣？用起來是不是很爽？但是這種方式有個問題，就是沒辦法退訂訂閱，要退訂的話必須指定退訂的名稱，所以我們再來一個版本：代碼如下 :/ 將訂閱賦值給一個變量，以便退訂vartestSubscription=pubsub.subscribe(example1, function (topics, data)console.log(topics + : + data););/ 發布通知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);/ 再發布一次，驗證一下是否還能夠輸出信息pubsub.publish(example1, hello again! will fail);(this版本二我們也可以利用原型的特性實現一個觀察者模式，代碼如下：代碼如下 :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););/ 測試var o = new Observer;var f1 = function (data) console.log(Robbin: + d

8、ata + ,趕緊干活了！);var f2 = function (data) console.log(Randall: + data + , 找他加點工資去！ );o.subscribe(f1);o.subscribe(f2);o.update(Tom回來了！ )/ 退訂 f1o.unsubscribe(f1);/ 再來驗證o.update(Tom回來了！ );如果提示找不到filter或者 forEach函數，可能是因為你的瀏覽器還不夠新，暫時不支持新標準的函數，你可以使用如下方式自己定義：代碼如下 :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;版本三如果想讓多個對象都具有觀察者發布訂閱的功能，我們可以定義一個通用的函數，然后將該函數的功能應用到需要觀察者功能的對象上，代碼如下：代碼如下 :/ 通用代碼var observer = / 訂閱addSubscriber: function (callback) =callback;,/

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

11、bers = ;然后訂閱 2 個對象 blogger 和 user ，使用 observer.make方法將這 2 個對象具有觀察者功能，代碼如下：代碼如下 :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);使用方法就比較簡單了，訂閱不同的回調函數

12、，以便可以注冊到不同的觀察者對象里（也可以同時注冊到多個觀察者對象里）：復制代碼代碼如下 :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); /調用發布/ 退訂blogger.removeSubscriber(mm.sho

13、w);blogger.remend(456); /調用發布/ 另外一個對象的訂閱user.addSubscriber(mm.show);user.vote(789); /調用發布jQuery 版本根據 jQuery1.7版新增的on/off功能，我們也可以定義 jQuery 版的觀察者：代碼如下 : (function ($) var o = $();$.publish = function; (jQuery);調用方法比上面3 個版本都簡單：代碼如下 :/ 回調函數function handle(e, a, b, c) / e 是事件對象，不需要關注console.log(a + b + c);/ 訂閱$.subscribe(/some/topic, handle);/ 發布$.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 名稱，而不是回調函數哦，和版本一