一、前言
一天，小豬佩奇去了一家西餐廳，點了一份西冷牛扒，還叫了聖女果。後來服務員上了一碟番茄：佩奇小姐，這是你的「聖女果」。佩奇豬一眼就看出了貓膩：這tm是番茄，不是聖女果啊！於是就跟服務員理論起來：這是番茄不是聖女果，不是！服務員一臉懵逼：番茄不就是聖女果嗎？...佩奇豬一臉「黑人問號」了：番茄是菜，聖女果是水果，這能一樣？？？
觀察者模式與釋出/訂閱模式大概就跟番茄與聖女果的關係一樣，剪不斷理還亂。也許，我們也聽過兩種模式之間的一些區別，但我相信，大部分的人對其中差異的感知還是很弱的。在JavaScript裡，Observer模式通常被我們用Publish/Subscribe模式來實現，不可否認這些模式很相似，但它們還是有很本質的區別！
二、觀察者模式與釋出/訂閱模式的區別
通過一張圖來巨集觀瞭解差異：
1、對觀察者模式的理解
觀察者模式：一個物件（稱為subject）維持一系列依賴於它的物件（稱為observer），將有關狀態的任何變更自動通知給它們（觀察者）。
2、對釋出/訂閱模式的理解
釋出/訂閱模式：基於一個主題/事件通道，希望接收通知的物件（稱為subscriber）通過自定義事件訂閱主題，被啟用事件的物件（稱為publisher）通過釋出主題事件的方式被通知。
3、兩種模式之間的差異
- Observer模式要求觀察者必須訂閱內容改變的事件，定義了一個一對多的依賴關係；
- Publish/Subscribe模式使用了一個主題/事件通道，這個通道介於訂閱著與釋出者之間；
- 觀察者模式裡面觀察者「被迫」執行內容改變事件（subject內容事件）；釋出/訂閱模式中，訂閱著可以自定義事件處理程式；
- 觀察者模式兩個物件之間有很強的依賴關係；釋出/訂閱模式兩個物件之間的耦合讀底。
三、舉個例子
使用兩個栗子形象解釋兩種模式應用上的差異，讓你由內而外，自上而下，感知它的美妙！@佩奇豬的故事
1、觀察者模式的應用
// 以下為半虛擬碼
// 定義下觀察者
function Observer () {
this.update = function(){}
}
// 定一個下目標
function Subscribe () {}
// 新增觀察者
Subscribe.prototype.addObserver = function(observer){}
// 目標通知變更
Subscribe.prototype.notify = function(){}
var subscribe = new Subscribe();
// 定義一個佩奇豬的觀察者
var peikizhuObs = new Observer();
peikizhuObs.update = function(what){
console.log("12 o'clock! 佩奇豬想要" + what);
}
subscribe.addObserver(peikizhuObs);
// 定義一個皮卡丘的觀察者
var pikachuObs = new Observer();
pikachuObs.update = function(what){
console.log("皮卡丘還可以做一點自己比較個性的事情，但是12點我也是要去吃飯的！");
console.log("12 o'clock! 皮卡丘想要" + what);
}
subscribe.addObserver(pikachuObs);
// 假裝12點到了
subscribe.notify('去吃飯啦～'); // 它們都去吃飯了
// or
subscribe.notify('繼續玩耍～'); // 它們還在一起玩耍
複製程式碼說明：可以看出，每一個observer雖然也可以自定義自己的處理程式（update方法），但是觀察者模式下，觀察者們都是做同一類的事情的。
2、釋出/訂閱模式的應用
// 以下為半虛擬碼
// 簡易的釋出訂閱
var pubsub = {
subscribe: function(){},
publish: function(){}
}
// 佩奇豬：我要訂閱一個「12點」的主題事件，提醒我繼續工作
pubsub.subscribe("12 o'clock", function(){
console.log'佩奇豬要繼續工作！這就是為什麼本豬上了螢幕，而你們上了餐桌。')
});
// 皮卡丘：我也要訂閱一個「12點」的主題事件，提醒我去吃飯
pubsub.subscribe("12 o'clock", function(){
console.log('皮卡丘要吃飯，去它的工作！')
});
// 假裝12點到了
pubsub.publish("12 o'clock");
複製程式碼說明：如你所見，釋出/訂閱模式，訂閱的是訂閱者各自不同邏輯的處理程式，類比下jQuery訂閱點選事件。
四、從實現方式上理解差異
那麼，到了這裡，有沒有比較有feel了？有沒有get到那個...只可意會不可言傳的點？
還是沒有？？？
原諒在下不善言辭，只想丟段程式碼給你。從實現方式上看兩者的不同
1、實現觀察者模式
/**
* 觀察者模式元件
* @author wilton
*/
define(function(require, exports, module) {
function ObserverList () {
this.observerLists = [];
}
// 新增觀察者物件
ObserverList.prototype.add = function(obj){
// 保證observer的唯一性
if (this.observerLists.indexOf(obj) != -1) return this.observerLists;
return this.observerLists.push(obj);
},
// 清空觀察者物件
ObserverList.prototype.empty = function(){
this.observerLists = [];
},
// 計算當前的觀察者數量
ObserverList.prototype.count = function(){
return this.observerLists.length;
},
// 取出對應編號的觀察者物件
ObserverList.prototype.get = function(index){
if (index > -1 && index < this.observerLists.length) {
return this.observerLists[index];
}
},
// 指定位置上插入觀察者物件
ObserverList.prototype.insert = function(obj,index){
var pointer = -1;
if (index === 0) {
this.observerLists.unshift(obj);
pointer = index;
} else if (index === this.observerLists.length) {
this.observerLists.push(obj);
pointer = index;
} else {
this.observerLists.splice(index, 0, obj);
pointer = index;
}
return pointer;
},
// 查詢觀察者物件所在的位置編號
ObserverList.prototype.indexOf = function(obj, startIndex){
var i = startIndex || 0, pointer = -1;
while (i < this.observerLists.length) {
if (this.observerLists[i] === obj) {
pointer = i;
break;
}
i++;
}
return pointer;
},
// 移除指定編號的觀察者
ObserverList.prototype.removeIndexAt = function(index){
var temp = null;
if (index === 0) {
temp = this.observerLists.shift();
} else if (index === this.observerLists.length) {
temp = this.observerLists.pop();
} else {
temp = this.observerLists.splice(index, 1)[0];
}
return temp;
}
// 定義目標類
function Subject(){
this.observers = new ObserverList();
}
// 新增觀察者
Subject.prototype.addObserver = function(observer){
this.observers.add(observer);
}
// 移除觀察者
Subject.prototype.removeObserver = function(observer){
this.observers.removeIndexAt(this.observers.indexOf(observer, 0));
}
// 通知觀察者
Subject.prototype.notify = function(params){
var observersCount = this.observers.count();
for(var i = 0; i < observersCount; i++){
this.observers.get(i).update(params);
}
}
function Observer(){
// 定義觀察者內容更新事件
this.update = function(){}
}
module.exports = {
Observer: Observer,
Subject: Subject,
// 物件擴充套件
extend: function(obj, extension){
for (var key in obj) {
extension[key] = obj[key];
}
}
};
});
複製程式碼2、實現釋出/訂閱模式
/**
* 釋出/訂閱模式元件
* @author wilton
*/
// 定義釋出/訂閱類
class Pubsub {
constructor () {
this.topics = {};
this.subUid = -1;
}
// 釋出事件
publish (topic, args) {
if (!this.topics[topic]) return false;
let subscribers = this.topics[topic];
let len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return this;
}
// 訂閱事件
subscribe (topic,func) {
if (!this.topics[topic]) this.topics[topic] = [];
let token = (++this.subUid).toString();
this.topics[topic].push({
token: token,
func: func
})
return token;
}
// 取消訂閱
unsubscribe (token) {
for (let m in topics) {
if (topics[m]) {
for (let i = 0; i < topics[m].length; i++) {
if (topics[m][i].token == token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
}
}
export default Pubsub;
複製程式碼五、結語
以上觀點只是個人結合實踐產出的理解，歡迎各位過路的大佬補充斧正～