《JavaScript設計模式與開發實踐》讀書筆記。
看此文章前，建議先看JavaScript設計模式之釋出-訂閱模式（觀察者模式）-Part1
在Part1中，已經介紹了什麼是釋出-訂閱模式，同時，也實現了釋出-訂閱模式。但是，就Part1中實現的例子來說，還是存在了兩個小問題：
-
我們給每個釋出者物件都新增了listen和trigger方法，以及一個快取列表clientList，這其實是一種資源的浪費。
-
訂閱者與釋出者之間存在一定的耦合性，訂閱者至少要知道釋出者物件的名字，才能順利訂閱。如下：
// 張三訂閱問題A, sgQuestionSystem是釋出者的物件（問題系統）
sgQuestionSystem.listen(`questionA`, 3, function(questionTitle, content) {
console.log(`張三您在早前訂閱了問題：questionA`);
console.log(`現` + questionTitle + `有了新動態`);
console.log(`內容為：` + content);
});如果張三還對其它東西感興趣，而釋出者又不是同一個，那麼，這意味著張三需要再對另一個釋出者物件進行訂閱。如下：
// 張三訂閱文章A動態, sgArticleSystem是釋出者的物件（文章系統）
sgArticleSystem.listen(`articleA`, 3, function(articleTitle, content) {
console.log(`張三您在早前訂閱了文章：articleA`);
console.log(`現` + articleTitle+ `有了新動態`);
console.log(`內容為：` + content);
});全域性的釋出-訂閱物件
相信大家都知道什麼是中介公司吧，在現實生活中，我們只要把訂閱的請求交給中介公司，而各大發布者也只需要通過中介公司來發布資訊。這樣一來，我們就無需關心訊息是哪個釋出者釋出的，我們只需關心是否能順利收到訊息。當然，訂閱者與釋出者都需要知道這個中介公司。
同樣，在程式中，我們可以用一個全域性的 Event 物件來實現中介公司的作用。Event作為一個訊息中心，把訂閱者和釋出者聯絡起來。見如下程式碼：
var Event = (function(){
var clientList = {}, // 快取列表
listen,
trigger,
remove;
listen = function(key, id, fn){
if(!clientList[key]){
clientList[key] = []; // 初始化
}
clientList[key].push({ // 將訂閱的id, 回撥函式新增到對應的訊息列表裡
id: id,
fn: fn
});
};
trigger = function() {
var key = Array.prototype.shift.call(arguments),
fns = clientList[key];
if(!fns || fns.length == 0) {
return false;
}
for(var i = 0; i < fns.length; i++) {
fns[i].fn.apply(this, arguments);
}
};
remove = function(key, id) {
var fns = clientList[key];
if(!fns) { // 如果key對應的訊息沒人訂閱，直接返回
return false;
}
if(!id) { // 如果沒傳具體的唯一標識，則取消key的所有對應訊息
fns && (fns.length = 0);
} else {
for(var l = fns.length - 1; l >=0; l--) {
var _id = fns[l].id;
if(_id == id) {
fns.splice(l, 1); // 刪除訂閱者的回撥函式
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
Event.listen(`questA`, 1, function(content) {
console.log(`內容為：` + content);
});
Event.trigger(`questA`, `王五回答了該問題`);必須先訂閱再發布嗎？
我們所瞭解的釋出-訂閱模式，都是訂閱者必須先訂閱一個訊息，隨後才能接收到釋出者釋出的訊息。如果把順序反過來，釋出者先釋出一個訊息，而在此之前並沒有物件來訂閱它，那麼這條訊息就消失在宇宙中了。
而在實際專案在，先發布後訂閱是存在的。例如在商城網站中，獲取到使用者資訊之後才能渲染使用者導航模組，而獲取使用者資訊的操作是一個非同步請求。當請求成功返回之後才能釋出一個事件，在此之前訂閱了此事件的使用者導航模組才能接收到這個資訊。
然而，因為非同步的原因，我們不能保證ajax請求的事件，可能使用者的導航模組還沒載入好（即還沒訂閱訊息），請求就返回（即釋出訊息）。因此，我們需要讓我們的釋出-訂閱物件擁有先發布-後訂閱的能力。
具體的實現請看後續最終程式碼。
全域性事件的命名衝突
全域性的釋出-訂閱物件裡只有一個clientList來存放訊息名和回撥函式，大家都通過它來訂閱-釋出各種訊息，久而久之，難免會出現事件名衝突，所以我們還可以給Event物件提供建立名稱空間的功能。
最終程式碼如下：
var Event = (function(){
var global = this,
Event,
_default = `default`;
Event = function(){
var _listen,
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = {},
_creat,
find,
each = function(ary, fn){
var ret;
for(var i = 0, l = ary.length; i < l; i++) {
var n = ary[i];
ret = fn.call(n, i, n);
}
return ret;
};
_listen = function(key, fn, cache) {
if(!cache[key]) {
cache[key] = [];
}
cache[key].push(fn);
};
_remove = function(key, cache, fn) {
if(cache[key]) {
if(fn) {
for(var i = cache[key].length; i >=0; i--) {
if(cache[key][i] == fn) {
cache[key].splice(i, 1);
}
}
} else { // 若沒有fn,表示全部清空
cache[key] = [];
}
}
};
_trigger = function() {
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self= this,
ret,
stack = cache[key];
if(!stack || !stack.length) {
return;
}
return each(stack, function(){
return this.apply(_self, args);
})
};
_create = function(namespace) {
var namespace = namespace || _default;
var cache = {},
offlineStack = [],
ret = {
listen: function(key, fn, last) {
_listen(key, fn, cache);
if(offlineStack == null) {
return;
}
if(last == `last`) {
offlineStack.length && offlineStack.pop()();
} else {
each(offlineStack, function() {
this();
});
}
offlineStack = null;
},
one: function(key, fn, last) {
_remove(key, cache);
this.listen(key, fn, last);
},
remove: function(key, fn) {
_remove(key, cache, fn);
},
trigger: function() {
var fn,
args,
_self = this;
_unshift.call(arguments, cache);
args = arguments;
fn = function() {
return _trigger.apply(_self, args);
};
if(offlineStack) {
return offlineStack.push(fn);
}
return fn();
}
};
return namespace? (namespaceCache[namespace] ? namespaceCache[namespace]: namespaceCache[namespace] = ret) : ret;
};
return {
create: _create,
one: function(key, fn, last) {
var event = this.create();
event.one(key, fn, last);
},
remove: function(key, fn){
var event = this.create();
event.one(key, fn);
},
listen: function(key, fn, last){
var event = this.create();
event.listen(key, fn, last);
},
trigger: function(){
var event = this.create();
event.trigger.apply(this, arguments);
}
};
}();
return Event;
})();
/********** 先發布後訂閱 ***********/
Event.trigger(`click`, 1);
Event.listen(`click`, function(a){
console.log(a)
});
/********** 使用名稱空間 ***********/
Event.create(`namespace1`).listen(`click`, function(a){
console.log(a);
});
Event.create(`namespace1`).trigger(`click`, 1);附：
JavaScript資料結構和演算法系列：
JS 棧
JS 佇列-優先佇列、迴圈佇列
JavaScript設計模式系列：
JavaScript設計模式之策略模式