發(fā)布-訂閱模式簡述
發(fā)布---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關(guān)系损搬，讓多個(gè)觀察者對象同時(shí)監(jiān)聽某一個(gè)主題對象，當(dāng)一個(gè)對象發(fā)生改變時(shí)窄锅，所有依賴于它的對象都將得到通知啤覆。
以網(wǎng)購為例：
假設(shè)小紅看上了一雙鞋子铸磅，但該鞋子已經(jīng)斷貨了刁赦，賣家承諾她到貨通知隔缀。與此同時(shí)幔妨，小明鹦赎、小花燈也關(guān)注了這雙鞋子。
在這個(gè)場景中误堡，賣家就是發(fā)布者古话，小紅等人都屬于訂閱者。當(dāng)鞋子到貨時(shí)锁施，會依次通知到每個(gè)人陪踩。
發(fā)布訂閱模式的優(yōu)點(diǎn)：
- 支持簡單的廣播通信，當(dāng)對象狀態(tài)發(fā)生改變時(shí)悉抵，會自動通知已經(jīng)訂閱過的對象肩狂。
- 發(fā)布者與訂閱者耦合性降低，發(fā)布者只管發(fā)布一條消息出去姥饰，它不關(guān)心這條消息如何被訂閱者使用傻谁，同時(shí)，訂閱者只監(jiān)聽發(fā)布者的事件名列粪，只要發(fā)布者的事件名不變栅螟，它不管發(fā)布者如何改變；同理賣家（發(fā)布者）它只需要將鞋子來貨的這件事告訴訂閱者(買家)篱竭，他不管買家到底買還是不買，還是買其他賣家的步绸。只要鞋子到貨了就通知訂閱者即可掺逼。
發(fā)布訂閱模式的缺點(diǎn)：
創(chuàng)建訂閱者需要消耗一定的時(shí)間和內(nèi)存。如果過度使用的話瓤介，反而使代碼不好理解及代碼不好維護(hù)等等吕喘。
如何實(shí)現(xiàn)發(fā)布訂閱模式赘那？
- 首先要想好誰是發(fā)布者(比如上面的賣家)。
- 然后給發(fā)布者添加一個(gè)緩存列表氯质，用于存放回調(diào)函數(shù)來通知訂閱者(比如上面的買家收藏了賣家的店鋪募舟，賣家通過收藏了該店鋪的一個(gè)列表名單)。
- 最后就是發(fā)布消息闻察，發(fā)布者遍歷這個(gè)緩存列表拱礁，依次觸發(fā)里面存放的訂閱者回調(diào)函數(shù)。
實(shí)戰(zhàn)
發(fā)布訂閱模式是最經(jīng)典的設(shè)計(jì)模式之一辕漂，介紹的文章也非常多呢灶。這里不打算過多介紹。直接上代碼~~~
var Event = (function(){
var list = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!list[key]) {
// 如果還沒有訂閱過此類消息钉嘹，給該類消息創(chuàng)建一個(gè)緩存列表
list[key] = [];
}
list[key].push(fn); // 訂閱消息添加到緩存列表
};
trigger = function(){
var key = Array.prototype.shift.call(arguments), // 取出消息類型名稱
fns = list[key]; // 取出該消息對應(yīng)的回調(diào)函數(shù)的集合
// 如果沒有訂閱過該消息的話鸯乃，則返回
if(!fns || fns.length === 0) {
return false;
}
for(var i = 0, fn; fn = fns[i++];) {
fn.apply(this,arguments); // arguments 是發(fā)布消息時(shí)附送的參數(shù)
}
};
remove = function(key,fn){
// 如果key對應(yīng)的消息沒有訂閱過的話，則返回
var fns = list[key];
// 如果沒有傳入具體的回調(diào)函數(shù)跋涣，表示需要取消key對應(yīng)消息的所有訂閱
if(!fns) {
return false;
}
if(!fn) {
fns && (fns.length = 0);
}else {
for(var i = fns.length - 1; i >= 0; i--){
var _fn = fns[i];
if(_fn === fn) {
fns.splice(i,1);// 刪除訂閱者的回調(diào)函數(shù)
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
// 測試代碼如下：
Event.listen("color",function(size) {
console.log("尺碼為:"+size); // 打印出尺碼為42
});
Event.trigger("color",42);
