簡單記錄一下觀察者模式和釋出訂閱模式。說起這兩個模式確實很像，為了弄懂其中的不同點確實也花了不少功夫，主要參考了這篇博文觀察者模式與釋出/訂閱模式區別，另外一篇就是曾探的《JavaScript設計模式與開發實踐》一書中的《釋出訂閱模式》。兩者結合大有所獲。
觀察者模式
首先來談談觀察者模式，在觀察者模式中，有兩個角色一個是Subject，用來維護一個observer列表，另一個角色就是Observer（觀察者），在Observer中定義了一個具體的update方法，用來執行相關操作。整個過程就是當某個值發生變化後，Subject呼叫notify方法（實際就是迴圈呼叫observerList中每個observer的update方法，並把新的值作為update的引數傳遞進去）。從中我們可以看出在Subject中直接呼叫了Observer中的方法，也就是說Subject和Observer的聯絡實際上是非常緊密的。
舉個例子，現在有一個房東他要租房子，當有空房子的時候，他就會去通知曾經來詢問的租戶，那麼這個時候房東就是直接知道租客的電話和需求（要住什麼樣的房子）的，也就是此時房東和租客之間實際上是存在聯絡的。
大致的流向圖就像下面。
程式碼如下：
//觀察者列表
function ObserverList(){
this.observerList = [];
}
ObserverList.prototype.add = function( obj ){
return this.observerList.push( obj );
};
ObserverList.prototype.count = function(){
return this.observerList.length;
};
ObserverList.prototype.get = function( index ){
if( index > -1 && index < this.observerList.length ){
return this.observerList[ index ];
}
};
ObserverList.prototype.indexOf = function( obj, startIndex ){
var i = startIndex;
while( i < this.observerList.length ){
if( this.observerList[i] === obj ){
return i;
}
i++;
}
return -1;
};
ObserverList.prototype.removeAt = function( index ){
this.observerList.splice( index, 1 );
};
//目標
function Subject(){
this.observers = new ObserverList();
}
Subject.prototype.addObserver = function( observer ){
this.observers.add( observer );
};
Subject.prototype.removeObserver = function( observer ){
this.observers.removeAt( this.observers.indexOf( observer, 0 ) );
};
Subject.prototype.notify = function( context ){
var observerCount = this.observers.count();
for(var i=0; i < observerCount; i++){
this.observers.get(i).update( context );
}
};
//觀察者
function Observer(){
this.update = function(){
// ...
};
}
複製程式碼釋出訂閱模式
前面說到Subject和Observer聯絡是非常緊密的，因為我們要在Subject中呼叫Observer中的方法。那麼釋出訂閱模式就可以解耦合，把呼叫的任務交給一個排程中心（中介），讓排程中心去通知各個訂閱者。
接著上面的例子。房東有錢後，自己變懶了，他不想每次有房源後，自己還要親自打電話通知之前預留電話想要租房的租客，因為自己還要記住那些的租客的電話和需求（有錢了不想幹這些活，我要躺著賺錢）。於是他就找到了中介，每次空出房子後，直接告訴中介我這裡有什麼樣的房子，中介這裡記錄著哪些租客有著什麼樣的需求，中介再去聯絡有這樣需求的租客。那麼這裡房東和未來可能的租客之間是沒有聯絡的，房東從此不用自己再去親自打電話去通知每一個有著這樣需求的租客，只需要告訴中介一個人就行，中介去通知。那麼整個過程就如下面這樣
var pubsub = {};
(function(myObject) {
// Storage for topics that can be broadcast
// or listened to
var topics = {};
// An topic identifier
var subUid = -1;
// Publish or broadcast events of interest
// with a specific topic name and arguments
// such as the data to pass along
myObject.publish = function( topic, args ) {
if ( !topics[topic] ) {
return false;
}
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func( topic, args );
}
return this;
};
// Subscribe to events of interest
// with a specific topic name and a
// callback function, to be executed
// when the topic/event is observed
myObject.subscribe = function( topic, func ) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = ( ++subUid ).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
// Unsubscribe from a specific
// topic, based on a tokenized reference
// to the subscription
myObject.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 this;
};
}( pubsub ));
複製程式碼這裡為什麼要用一個立即執行函式傳遞一個物件進去，因為我們可能有多箇中介，每多一箇中介，我們都會動態的去新增一些方法（即告訴中介如何去運作）。subUid就是用於方便取消訂閱操作的，假如有一天你租到了自己滿意的房子，你就要打電話告訴中介，不要再給我這個號碼打電話了，我已經租到房子了。（不然天天都要被中介騷擾了）
總結：觀察者模式和釋出訂閱模式的區別應該就是當有房源訊息的時候，到底是誰來通知租客，觀察者是房東自己本人，而釋出訂閱則是中介。
最後（歡迎大家關注我）
如果你覺得有所收穫的話，歡迎點贊，歡迎到我的github上面star一下。