很差意思，觀察者模式跟發佈訂閱模式就是不同

1、前言

一天，小豬佩奇去了一家西餐廳，點了一份西冷牛扒，還叫了聖女果。後來服務員上了一碟番茄：佩奇小姐，這是你的「聖女果」。佩奇豬一眼就看出了貓膩：這tm是番茄，不是聖女果啊！因而就跟服務員理論起來：這是番茄不是聖女果，不是！服務員一臉懵逼：番茄不就是聖女果嗎？...佩奇豬一臉「黑人問號」了：番茄是菜，聖女果是水果，這能同樣？？？

---

觀察者模式與發佈/訂閱模式大概就跟番茄與聖女果的關係同樣，剪不斷理還亂。也許，咱們也聽過兩種模式之間的一些區別，但我相信，大部分的人對其中差別的感知仍是很弱的。在JavaScript裏，Observer模式一般被咱們用Publish/Subscribe模式來實現，不能否認這些模式很類似，但它們仍是有很本質的區別！

2、觀察者模式與發佈/訂閱模式的區別

經過一張圖來宏觀瞭解差別：

一、對觀察者模式的理解

觀察者模式：一個對象（稱爲subject）維持一系列依賴於它的對象（稱爲observer），將有關狀態的任何變動自動通知給它們（觀察者）。

二、對發佈/訂閱模式的理解

發佈/訂閱模式：基於一個主題/事件通道，但願接收通知的對象（稱爲subscriber）經過自定義事件訂閱主題，被激活事件的對象（稱爲publisher）經過發佈主題事件的方式被通知。

三、兩種模式之間的差別

• Observer模式要求觀察者必須訂閱內容改變的事件，定義了一個一對多的依賴關係；
• Publish/Subscribe模式使用了一個主題/事件通道，這個通道介於訂閱着與發佈者之間；
• 觀察者模式裏面觀察者「被迫」執行內容改變事件（subject內容事件）；發佈/訂閱模式中，訂閱着能夠自定義事件處理程序；
• 觀察者模式兩個對象之間有很強的依賴關係；發佈/訂閱模式兩個對象之間的耦合讀底。

3、舉個栗子

使用兩個栗子形象解釋兩種模式應用上的差別，讓你由內而外，自上而下，感知它的美妙！@佩奇豬的故事

一、觀察者模式的應用

// 如下爲半僞代碼

// 定義下觀察者
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方法），可是觀察者模式下，觀察者們都是作同一類的事情的。

二、發佈/訂閱模式的應用

// 如下爲半僞代碼

// 簡易的發佈訂閱
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訂閱點擊事件。

4、從實現方式上理解差別

那麼，到了這裏，有沒有比較有feel了？有沒有get到那個...只可意會不可言傳的點？

仍是沒有？？？

原諒在下不善言辭，只想丟段代碼給你。從實現方式上看二者的不一樣

一、實現觀察者模式

/** * 觀察者模式組件 * @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];
			}
		}
	}; 
});
複製代碼

github-ObserverPattern

二、實現發佈/訂閱模式

/** * 發佈/訂閱模式組件 * @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;
複製代碼

github-PubsubPattern

5、結語

以上觀點只是我的結合實踐產出的理解，歡迎各位過路的大佬補充斧正～