資訊專欄INFORMATION COLUMN
摘要：觀察者模式也稱發(fā)布訂閱模式它的作用就是當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知，自動(dòng)刷新對(duì)象狀態(tài)舉個(gè)生活比較常見常見的例子比如你去面試之后，面試官看你表現(xiàn)不錯(cuò)，最后會(huì)跟你要聯(lián)系方式，以便之后可以聯(lián)系你。
觀察者模式也稱"發(fā)布-訂閱"模式,它的作用就是當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知，自動(dòng)刷新對(duì)象狀態(tài)
舉個(gè)生活比較常見常見的例子,比如你去面試之后，面試官看你表現(xiàn)不錯(cuò)，最后會(huì)跟你要聯(lián)系方式，以便之后可以聯(lián)系你。在這角色扮演當(dāng)中，你就是“訂閱者”，面試官就是“發(fā)布者”。
那么發(fā)布訂閱模式是咋實(shí)現(xiàn)的呢？
思路
給定一個(gè)發(fā)布者
面試者將聯(lián)系方式給發(fā)布者
發(fā)布者的一個(gè)列表有各種職位(web端的，java 的)，里面記載回調(diào)函數(shù)以便通知這些面試者
最后發(fā)布消息的時(shí)候，會(huì)遍歷這個(gè)列表的職位的回調(diào)函數(shù)，告訴面試者面試這個(gè)職位是通過還是不通過
如果面試者取消了訂閱，那么將回調(diào)函數(shù)和之前的回調(diào)函數(shù)作對(duì)比，如果相等，就將這個(gè)面試者的上班通知去掉
var Event = (function() {
var events = {}; //發(fā)布者
//subscribe也就是訂閱，post 代表面試者要面的職位，callback表示為回調(diào)函數(shù)
function subscribe(post, callback) {
events[post] = events[post] || []; //發(fā)布者的列表里有沒有這個(gè)面試職位，如果沒有就創(chuàng)建一個(gè)空數(shù)組
events[post].push(callback);
}
//publish 表示發(fā)布
function publish() {
var post = Array.prototype.shift.call(arguments); //第一個(gè)參數(shù)指定“鍵”
var fns = events[post]; //設(shè)置緩存，提高性能
if (!fns) { //如果發(fā)布者的列表里沒有這個(gè)職位，那肯定是不能發(fā)布
return;
}
for (var i = 0; i < fns.length; i++) { //遍歷當(dāng)前的職位的數(shù)組里有幾個(gè)面試者
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回調(diào)函數(shù)，直接取消post對(duì)應(yīng)消息的所有訂閱
fns = [];
}
} else {//如果發(fā)布者的列表沒有這個(gè)職位，直接 return
return;
}
}
return {
subscribe: subscribe,
publish: publish,
unsubscribe: unsubscribe
};
})();
測試：
var fn1 = function(time) {
console.log("小明你通過了面試，上班時(shí)間：" + time);
};
var fn2 = function(time) {
console.log("小強(qiáng)你通過了面試，上班時(shí)間：" + time);
};
//小明將聯(lián)系方式給了發(fā)布者，發(fā)布者（hr）覺得小明不錯(cuò)，可以通過，于是在列表(java)里寫下了一些回調(diào)函數(shù)，到時(shí)候發(fā)布的時(shí)候?qū)⑸习鄷r(shí)間告訴小明
Event.subscribe("java", fn1);
//小強(qiáng)也訂閱了
Event.subscribe("java", fn2);
Event.publish("java", "2017-10-01");
/*輸出:
小明你通過了面試，上班時(shí)間：2017-10-01
小強(qiáng)你通過了面試，上班時(shí)間：2017-10-01
*/
Event.unsubscribe("java", fn1);//刪除小明的上班通知
Event.publish("java", "2017-10-01");
/*輸出：
小強(qiáng)你通過了面試，上班時(shí)間：2017-10-01
*/
參考
Javascript異步編程的4種方法
js設(shè)計(jì)模式筆記 - 觀察者模式
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88850.html
摘要：由于微信不能訪問外鏈，需要點(diǎn)擊頁尾左下角的閱讀原文，才能訪問本文中的鏈接。接下來讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號(hào)回復(fù)加群即可 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfault.com/img/remote/1460000...
摘要：發(fā)布訂閱模式定義對(duì)象間的一種一對(duì)多的依賴關(guān)系當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)所有依賴于它的對(duì)象都將得到通知簡單實(shí)現(xiàn)定義發(fā)布者緩存列表存放訂閱者的回調(diào)函數(shù)定義訂閱者發(fā)布消息測試訂閱者價(jià)格訂閱者價(jià)格發(fā)布消息上面的實(shí)現(xiàn)方式導(dǎo)致了每個(gè)訂閱者都會(huì)收到發(fā)布 發(fā)布-訂閱模式 定義對(duì)象間的一種 一對(duì)多 的依賴關(guān)系, 當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí), 所有依賴于它的對(duì)象都將得到通知 簡單實(shí)現(xiàn) // 定...
摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡單的方式。插....
摘要：它通過數(shù)據(jù)模型進(jìn)行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進(jìn)行事件處理及與現(xiàn)有的通過接口進(jìn)行交互。 本人兼職前端付費(fèi)技術(shù)顧問，如需幫助請(qǐng)加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學(xué)前端而不知道怎么做項(xiàng)目的你指導(dǎo) 2.指導(dǎo)并扎實(shí)你的JavaScript基礎(chǔ) 3.幫你準(zhǔn)備面試并提供相關(guān)指導(dǎo)性意見 4.為你的前端之路提供極具建設(shè)性的...
閱讀 2019·2021-11-24 09:39
閱讀 1882·2019-08-30 15:55
閱讀 2175·2019-08-30 15:53
閱讀 572·2019-08-29 13:16
閱讀 990·2019-08-26 12:20
閱讀 2387·2019-08-26 11:58
閱讀 3151·2019-08-26 10:19
閱讀 3310·2019-08-23 18:31
