發布訂閱模式(subscribe/publish)的理解
https://www.qianduan7.com/javascript/subscribe-publish.html
發布訂閱模式介紹
發布---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴於它的對象都將得到通知。
現實生活中的發布-訂閱模式；
比如小紅最近在淘寶網上看上一雙鞋子，但是呢 聯系到賣家后，才發現這雙鞋賣光了，但是小紅對這雙鞋又非常喜歡，所以呢聯系賣家，問賣家什么時候有貨，賣家告訴她，要等一個星期后才有貨，賣家告訴小紅，要是你喜歡的話，你可以收藏我們的店鋪，等有貨的時候再通知你，所以小紅收藏了此店鋪，但與此同時，小明，小花等也喜歡這雙鞋，也收藏了該店鋪；等來貨的時候就依次會通知他們；
在上面的故事中，可以看出是一個典型的發布訂閱模式，賣家是屬於發布者，小紅，小明等屬於訂閱者，訂閱該店鋪，賣家作為發布者，當鞋子到了的時候，會依次通知小明，小紅等，依次使用旺旺等工具給他們發布消息；
發布訂閱模式的優點：
- 支持簡單的廣播通信，當對象狀態發生改變時，會自動通知已經訂閱過的對象。
比如上面的列子，小明，小紅不需要天天逛淘寶網看鞋子到了沒有，在合適的時間點，發布者(賣家)來貨了的時候，會通知該訂閱者(小紅，小明等人)。
2. 發布者與訂閱者耦合性降低，發布者只管發布一條消息出去，它不關心這條消息如何被訂閱者使用，同時，訂閱者只監聽發布者的事件名，只要發布者的事件名不變，它不管發布者如何改變；同理賣家（發布者）它只需要將鞋子來貨的這件事告訴訂閱者(買家)，他不管買家到底買還是不買，還是買其他賣家的。只要鞋子到貨了就通知訂閱者即可。
對於第一點，我們日常工作中也經常使用到，比如我們的ajax請求，請求有成功(success)和失敗(error)的回調函數，我們可以訂閱ajax的success和error事件。我們並不關心對象在異步運行的狀態，我們只關心success的時候或者error的時候我們要做點我們自己的事情就可以了~
發布訂閱模式的缺點：
- 創建訂閱者需要消耗一定的時間和內存。
- 雖然可以弱化對象之間的聯系，如果過度使用的話，反而使代碼不好理解及代碼不好維護等等。
如何實現發布--訂閱模式？
- 首先要想好誰是發布者(比如上面的賣家)。
- 然后給發布者添加一個緩存列表，用於存放回調函數來通知訂閱者(比如上面的買家收藏了賣家的店鋪，賣家通過收藏了該店鋪的一個列表名單)。
- 最后就是發布消息，發布者遍歷這個緩存列表，依次觸發里面存放的訂閱者回調函數。
我們還可以在回調函數里面添加一點參數，比如鞋子的顏色，鞋子尺碼等信息；
我們先來實現下簡單的發布-訂閱模式；代碼如下：
var shoeObj = {}; // 定義發布者
shoeObj.list = []; // 緩存列表 存放訂閱者回調函數
// 增加訂閱者
shoeObj.listen = function(fn) {
shoeObj.list.push(fn); // 訂閱消息添加到緩存列表
}
// 發布消息
shoeObj.trigger = function(){
for(var i = 0,fn; fn = this.list[i++];) {
fn.apply(this,arguments);
}
}
// 小紅訂閱如下消息
shoeObj.listen(function(color,size){
console.log("顏色是："+color);
console.log("尺碼是："+size);
});
// 小花訂閱如下消息
shoeObj.listen(function(color,size){
console.log("再次打印顏色是："+color);
console.log("再次打印尺碼是："+size);
});
shoeObj.trigger("紅色",40);
shoeObj.trigger("黑色",42);
運行結果如下：
打印如上截圖，我們看到訂閱者接收到發布者的每個消息，但是呢，對於小紅來說，她只想接收顏色為紅色的消息，不想接收顏色為黑色的消息，為此我們需要對代碼進行如下改造下，我們可以先增加一個key，使訂閱者只訂閱自己感興趣的消息。
var shoeObj = {}; // 定義發布者
shoeObj.list = []; // 緩存列表 存放訂閱者回調函數
// 增加訂閱者
shoeObj.listen = function(key,fn) {
if(!this.list[key]) {
// 如果還沒有訂閱過此類消息，給該類消息創建一個緩存列表
this.list[key] = [];
}
this.list[key].push(fn); // 訂閱消息添加到緩存列表
}
// 發布消息
shoeObj.trigger = function(){
var key = Array.prototype.shift.call(arguments); // 取出消息類型名稱
var fns = this.list[key]; // 取出該消息對應的回調函數的集合
// 如果沒有訂閱過該消息的話，則返回
if(!fns || fns.length === 0) {
return;
}
for(var i = 0,fn; fn = fns[i++]; ) {
fn.apply(this,arguments); // arguments 是發布消息時附送的參數
}
};
// 小紅訂閱如下消息
shoeObj.listen('red',function(size){
console.log("尺碼是："+size);
});
// 小花訂閱如下消息
shoeObj.listen('block',function(size){
console.log("再次打印尺碼是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
上面的代碼，我們再來運行打印下 如下：
可以看到，訂閱者只訂閱自己感興趣的消息了；
發布---訂閱模式的代碼封裝
我們知道，對於上面的代碼，小紅去買鞋這么一個對象shoeObj 進行訂閱，但是如果以后我們需要對買房子或者其他的對象進行訂閱呢，我們需要復制上面的代碼，再重新改下里面的對象代碼；為此我們需要進行代碼封裝；
如下代碼封裝：
var event = {
list: [],
listen: function(key,fn) {
if(!this.list[key]) {
this.list[key] = [];
}
// 訂閱的消息添加到緩存列表中
this.list[key].push(fn);
},
trigger: function(){
var key = Array.prototype.shift.call(arguments);
var fns = this.list[key];
// 如果沒有訂閱過該消息的話，則返回
if(!fns || fns.length === 0) {
return;
}
for(var i = 0,fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
}
};
我們在定義一個initEvent函數，這個函數使所有的普通對象都具有發布訂閱功能，如下代碼：
var initEvent = function(obj) {
for(var i in event) {
obj[i] = event[i];
}
};
// 我們再來測試下，我們還是給shoeObj這個對象添加發布-訂閱功能；
var shoeObj = {};
initEvent(shoeObj);
// 小紅訂閱如下消息
shoeObj.listen('red',function(size){
console.log("尺碼是："+size);
});
// 小花訂閱如下消息
shoeObj.listen('block',function(size){
console.log("再次打印尺碼是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
如何取消訂閱事件？
比如上面的列子，小紅她突然不想買鞋子了，那么對於賣家的店鋪他不想再接受該店鋪的消息，那么小紅可以取消該店鋪的訂閱。
如下代碼：
event.remove = function(key,fn){
var fns = this.list[key];
// 如果key對應的消息沒有訂閱過的話，則返回
if(!fns) {
return false;
}
// 如果沒有傳入具體的回調函數，表示需要取消key對應消息的所有訂閱
if(!fn) {
fn && (fns.length = 0);
}else {
for(var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i];
if(_fn === fn) {
fns.splice(i,1); // 刪除訂閱者的回調函數
}
}
}
};
測試代碼如下：
var initEvent = function(obj) {
for(var i in event) {
obj[i] = event[i];
}
};
var shoeObj = {};
initEvent(shoeObj);
// 小紅訂閱如下消息
shoeObj.listen('red',fn1 = function(size){
console.log("尺碼是："+size);
});
// 小花訂閱如下消息
shoeObj.listen('red',fn2 = function(size){
console.log("再次打印尺碼是："+size);
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);
運行結果如下：
全局--發布訂閱對象代碼封裝
我們再來看看我們傳統的ajax請求吧，比如我們傳統的ajax請求，請求成功后需要做如下事情：
- 渲染數據。
- 使用數據來做一個動畫。
那么我們以前肯定是如下寫代碼：
$.ajax(“http://127.0.0.1/index.php”,function(data){
rendedData(data); // 渲染數據
doAnimate(data); // 實現動畫
});
假如以后還需要做點事情的話，我們還需要在里面寫調用的方法；這樣代碼就耦合性很高，那么我們現在使用發布-訂閱模式來看如何重構上面的業務需求代碼；
$.ajax(“http://127.0.0.1/index.php”,function(data){
Obj.trigger(‘success’,data); // 發布請求成功后的消息
});
// 下面我們來訂閱此消息，比如我現在訂閱渲染數據這個消息；
Obj.listen(“success”,function(data){
renderData(data);
});
// 訂閱動畫這個消息
Obj.listen(“success”,function(data){
doAnimate(data);
});
為此我們可以封裝一個全局發布-訂閱模式對象；如下代碼：
var Event = (function(){
var list = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!list[key]) {
list[key] = [];
}
list[key].push(fn);
};
trigger = function(){
var key = Array.prototype.shift.call(arguments),
fns = list[key];
if(!fns || fns.length === 0) {
return false;
}
for(var i = 0, fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
};
remove = function(key,fn){
var fns = list[key];
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);
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
// 測試代碼如下：
Event.listen("color",function(size) {
console.log("尺碼為:"+size); // 打印出尺碼為42
});
Event.trigger("color",42);
理解模塊間通信
我們使用上面封裝的全局的發布-訂閱對象來實現兩個模塊之間的通信問題；比如現在有一個頁面有一個按鈕，每次點擊此按鈕后，div中會顯示此按鈕被點擊的總次數；如下代碼：
<button id="count">點將我</button> <div id="showcount"></div>
我們中的a.js 負責處理點擊操作 及 發布消息；如下JS代碼：
var a = (function(){
var count = 0;
var button = document.getElementById("count");
button.onclick = function(){
Event.trigger("add",count++);
}
})();
b.js 負責監聽add這個消息，並把點擊的總次數顯示到頁面上來；如下代碼：
var b = (function(){
var div = document.getElementById("showcount");
Event.listen('add',function(count){
div.innerHTML = count;
});
})();
下面是html代碼如下，JS應用如下引用即可：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="global.js"></script>
</head>
<body>
<button id="count">點將我</button>
<div id="showcount"></div>
<script src = "a.js"></script>
<script src = "b.js"></script>
</body>
</html>
如上代碼，當點擊一次按鈕后，showcount的div會自動加1，如上演示的是2個模塊之間如何使用發布-訂閱模式之間的通信問題；
其中global.js 就是我們上面封裝的全局-發布訂閱模式對象的封裝代碼；