深入理解JavaScript系列（32）：設計模式之觀察者模式
- 2020 年 1 月 7 日
- 筆記
觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。
使用觀察者模式的好處：
- 支援簡單的廣播通訊，自動通知所有已經訂閱過的對象。
- 頁面載入後目標對象很容易與觀察者存在一種動態關聯，增加了靈活性。
- 目標對象與觀察者之間的抽象耦合關係能夠單獨擴展以及重用。
正文（版本一）
JS里對觀察者模式的實現是通過回調來實現的，我們來先定義一個pubsub對象，其內部包含了3個方法：訂閱、退訂、發布。
var pubsub = {}; (function (q) { var topics = {}, // 回調函數存放的數組 subUid = -1; // 發布方法 q.publish = function (topic, args) { if (!topics[topic]) { return false; } setTimeout(function () { var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len--) { subscribers[len].func(topic, args); } }, 0); return true; }; //訂閱方法 q.subscribe = function (topic, func) { if (!topics[topic]) { topics[topic] = []; } var token = (++subUid).toString(); topics[topic].push({ token: token, func: func }); return token; }; //退訂方法 q.unsubscribe = function (token) { for (var m in topics) { if (topics[m]) { for (var i = 0, j = topics[m].length; i < j; i++) { if (topics[m][i].token === token) { topics[m].splice(i, 1); return token; } } } } return false; }; } (pubsub));
複製程式碼
使用方式如下：
//來，訂閱一個 pubsub.subscribe('example1', function (topics, data) { console.log(topics + ": " + data); }); //發布通知 pubsub.publish('example1', 'hello world!'); pubsub.publish('example1', ['test', 'a', 'b', 'c']); pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);
複製程式碼
怎麼樣？用起來是不是很爽？但是這種方式有個問題，就是沒辦法退訂訂閱，要退訂的話必須指定退訂的名稱，所以我們再來一個版本：
//將訂閱賦值給一個變數，以便退訂 var testSubscription = pubsub.subscribe('example1', function (topics, data) { console.log(topics + ": " + data); }); //發布通知 pubsub.publish('example1', 'hello world!'); pubsub.publish('example1', ['test', 'a', 'b', 'c']); pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]); //退訂 setTimeout(function () { pubsub.unsubscribe(testSubscription); }, 0); //再發布一次，驗證一下是否還能夠輸出資訊 pubsub.publish('example1', 'hello again! (this will fail)');
複製程式碼
版本二
我們也可以利用原型的特性實現一個觀察者模式，程式碼如下：
function Observer() { this.fns = []; } Observer.prototype = { subscribe: function (fn) { this.fns.push(fn); }, unsubscribe: function (fn) { this.fns = this.fns.filter( function (el) { if (el !== fn) { return el; } } ); }, update: function (o, thisObj) { var scope = thisObj || window; this.fns.forEach( function (el) { el.call(scope, o); } ); } }; //測試 var o = new Observer; var f1 = function (data) { console.log('Robbin: ' + data + ', 趕緊幹活了！'); }; var f2 = function (data) { console.log('Randall: ' + data + ', 找他加點工資去！'); }; o.subscribe(f1); o.subscribe(f2); o.update("Tom回來了！") //退訂f1 o.unsubscribe(f1); //再來驗證 o.update("Tom回來了！");
複製程式碼
如果提示找不到filter或者forEach函數，可能是因為你的瀏覽器還不夠新，暫時不支援新標準的函數，你可以使用如下方式自己定義：
if (!Array.prototype.forEach) { Array.prototype.forEach = function (fn, thisObj) { var scope = thisObj || window; for (var i = 0, j = this.length; i < j; ++i) { fn.call(scope, this[i], i, this); } }; } if (!Array.prototype.filter) { Array.prototype.filter = function (fn, thisObj) { var scope = thisObj || window; var a = []; for (var i = 0, j = this.length; i < j; ++i) { if (!fn.call(scope, this[i], i, this)) { continue; } a.push(this[i]); } return a; }; }
複製程式碼
版本三
如果想讓多個對象都具有觀察者發布訂閱的功能，我們可以定義一個通用的函數，然後將該函數的功能應用到需要觀察者功能的對象上，程式碼如下：
//通用程式碼 var observer = { //訂閱 addSubscriber: function (callback) { this.subscribers[this.subscribers.length] = callback; }, //退訂 removeSubscriber: function (callback) { for (var i = 0; i < this.subscribers.length; i++) { if (this.subscribers[i] === callback) { delete (this.subscribers[i]); } } }, //發布 publish: function (what) { for (var i = 0; i < this.subscribers.length; i++) { if (typeof this.subscribers[i] === 'function') { this.subscribers[i](what); } } }, // 將對象o具有觀察者功能 make: function (o) { for (var i in this) { o[i] = this[i]; o.subscribers = []; } } };
複製程式碼
然後訂閱2個對象blogger和user，使用observer.make方法將這2個對象具有觀察者功能，程式碼如下：
var blogger = { recommend: 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);
複製程式碼
使用方法就比較簡單了，訂閱不同的回調函數，以便可以註冊到不同的觀察者對象里（也可以同時註冊到多個觀察者對象里）：
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.recommend(123); //調用發布 //退訂 blogger.removeSubscriber(mm.show); blogger.recommend(456); //調用發布 //另外一個對象的訂閱 user.addSubscriber(mm.show); user.vote(789); //調用發布
複製程式碼
jQuery版本
根據jQuery1.7版新增的on/off功能，我們也可以定義jQuery版的觀察者：
(function ($) { var o = $({}); $.subscribe = function () { o.on.apply(o, arguments); }; $.unsubscribe = function () { o.off.apply(o, arguments); }; $.publish = function () { o.trigger.apply(o, arguments); }; } (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名稱，而不是回調函數哦，和版本一的例子不一樣 $.unsubscribe("/some/topic");
複製程式碼
可以看到，他的訂閱和退訂使用的是字元串名稱，而不是回調函數名稱，所以即便傳入的是匿名函數，我們也是可以退訂的。
總結
觀察者的使用場合就是：當一個對象的改變需要同時改變其它對象，並且它不知道具體有多少對象需要改變的時候，就應該考慮使用觀察者模式。
總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴於抽象，而不是依賴於具體。從而使得各自的變化都不會影響到另一邊的變化。
