資訊專欄INFORMATION COLUMN
摘要：觀察者模式也稱發布訂閱模式它的作用就是當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，自動刷新對象狀態舉個生活比較常見常見的例子比如你去面試之后，面試官看你表現不錯，最后會跟你要聯系方式，以便之后可以聯系你。
觀察者模式也稱"發布-訂閱"模式,它的作用就是當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，自動刷新對象狀態
舉個生活比較常見常見的例子,比如你去面試之后，面試官看你表現不錯，最后會跟你要聯系方式，以便之后可以聯系你。在這角色扮演當中，你就是“訂閱者”，面試官就是“發布者”。
那么發布訂閱模式是咋實現的呢？
思路
給定一個發布者
面試者將聯系方式給發布者
發布者的一個列表有各種職位(web端的，java 的)，里面記載回調函數以便通知這些面試者
最后發布消息的時候，會遍歷這個列表的職位的回調函數，告訴面試者面試這個職位是通過還是不通過
如果面試者取消了訂閱，那么將回調函數和之前的回調函數作對比，如果相等，就將這個面試者的上班通知去掉
var Event = (function() {
var events = {}; //發布者
//subscribe也就是訂閱，post 代表面試者要面的職位，callback表示為回調函數
function subscribe(post, callback) {
events[post] = events[post] || []; //發布者的列表里有沒有這個面試職位，如果沒有就創建一個空數組
events[post].push(callback);
}
//publish 表示發布
function publish() {
var post = Array.prototype.shift.call(arguments); //第一個參數指定“鍵”
var fns = events[post]; //設置緩存，提高性能
if (!fns) { //如果發布者的列表里沒有這個職位，那肯定是不能發布
return;
}
for (var i = 0; i < fns.length; i++) { //遍歷當前的職位的數組里有幾個面試者
fns[i].apply(this, arguments);
}
}
//unsubscribe 表示取消訂閱
function unsubscribe(post, fn) {
var fns = events[post];
if (fns) {
if (fn) {
for (var i = fns.length; i >= 0; i--) {
if (fns[i] === fn) fns.splice(i, 1);
}
} else {//如果沒有傳入fn回調函數，直接取消post對應消息的所有訂閱
fns = [];
}
} else {//如果發布者的列表沒有這個職位，直接 return
return;
}
}
return {
subscribe: subscribe,
publish: publish,
unsubscribe: unsubscribe
};
})();
測試：
var fn1 = function(time) {
console.log("小明你通過了面試，上班時間：" + time);
};
var fn2 = function(time) {
console.log("小強你通過了面試，上班時間：" + time);
};
//小明將聯系方式給了發布者，發布者（hr）覺得小明不錯，可以通過，于是在列表(java)里寫下了一些回調函數，到時候發布的時候將上班時間告訴小明
Event.subscribe("java", fn1);
//小強也訂閱了
Event.subscribe("java", fn2);
Event.publish("java", "2017-10-01");
/*輸出:
小明你通過了面試，上班時間：2017-10-01
小強你通過了面試，上班時間：2017-10-01
*/
Event.unsubscribe("java", fn1);//刪除小明的上班通知
Event.publish("java", "2017-10-01");
/*輸出：
小強你通過了面試，上班時間：2017-10-01
*/
參考
Javascript異步編程的4種方法
js設計模式筆記 - 觀察者模式
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88850.html
摘要：發布訂閱模式定義對象間的一種一對多的依賴關系當一個對象的狀態發生改變時所有依賴于它的對象都將得到通知簡單實現定義發布者緩存列表存放訂閱者的回調函數定義訂閱者發布消息測試訂閱者價格訂閱者價格發布消息上面的實現方式導致了每個訂閱者都會收到發布 發布-訂閱模式 定義對象間的一種 一對多 的依賴關系, 當一個對象的狀態發生改變時, 所有依賴于它的對象都將得到通知 簡單實現 // 定...
摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。 本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...
閱讀 2009·2021-11-24 09:39
閱讀 1878·2019-08-30 15:55
閱讀 2168·2019-08-30 15:53
閱讀 565·2019-08-29 13:16
閱讀 984·2019-08-26 12:20
閱讀 2379·2019-08-26 11:58
閱讀 3129·2019-08-26 10:19
閱讀 3296·2019-08-23 18:31
