訂閱祠斧，又名觀察者(你說觀察者闻察，我還真就知道了) 。 名義上是一種模式。
前言
今兒面試辕漂。呢灶。。面試體驗很差钉嘹。鸯乃。。不過提到了一個概念“訂閱”跋涣。
原話：
面試官：你知道訂閱么缨睡？
我：訂閱？
面試官：你干了兩年陈辱，訂閱你都不知道宏蛉？
我：？性置？拾并？？ 我說說事件偵聽吧鹏浅？
面試官：那行嗅义，你說說吧。
我：....
為期兩年的開發(fā)中隐砸。之碗。真的沒有遇到過訂閱，從字面理解季希，就是說：一個東西改變后褪那，要告訴別人我改變了。從這個理解出發(fā)式塌，我想到的就是事件偵聽博敬，準確的說，是自定義事件的事件偵聽峰尝。
下面以偵聽localStorage改變?yōu)槔眩瑢懸幌伦远x事件偵聽
js 創(chuàng)建偵聽函數(shù)
const listenStorageKeys= ["shop_id"]; // 需要偵聽的localstorage
// 添加js 偵聽localstorage
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
if(listenStorageKeys.includes(key)){
var setItemEvent = new Event("setItemEvent."+key);
// 自定義字段
setItemEvent.set_key = key;
setItemEvent.set_value = newValue;
window.dispatchEvent(setItemEvent);
}
orignalSetItem.apply(this,arguments);
};
// 使用
window.addEventListener("setItemEvent.shop_id", function (e) {
console.log(e.set_key ,e.set_value,"cccccccccccc")
});
然而在回來的過程中。我記住了這個名詞：“訂閱”武学，所以現(xiàn)在搜一下祭往，看看訂閱是什么
參考文章：
第二篇，更傾向于Event.listen的使用 火窒，但也進一步說明硼补，訂閱實際上就是總結(jié)的這幾點
從第一篇文章中，我總結(jié)了以下幾點：
- 訂閱實際上是一個熏矿。已骇。缆八。類
- 這個類，包含以下屬性
- peopleList : 訂閱內(nèi)容 疾捍，包含著訂閱后需要執(zhí)行的操作和訂閱內(nèi)容
- listen ： 增加訂閱后需要執(zhí)行的操作
- trigger：執(zhí)行訂閱操作
var event = {
peopleList:[], // 這里應(yīng)該用對象比較好
listen:function (key,fn) {
if (!this.peopleList[key]) { //如果沒有訂閱過此類消息奈辰，創(chuàng)建一個緩存列表
this.peopleList[key] = [];
}
this.peopleList[key].push(fn)
},
trigger:function () {
let key = Array.prototype.shift.call(arguments);
let fns = this.peopleList[key];
if (!fns || fns.length == 0) {//沒有訂閱 則返回
return false;
}
for(var i=0,fn;fn=fns[i++];){
fn.apply(this,arguments);
}
}
}
var installEvent = function (obj) {
for(var i in event){
obj[i] = event[i];
}
}
let yourMsg = {};
installEvent(yourMsg);
yourMsg.listen('marrgie',function (name) {
console.log(`${name}想知道你結(jié)婚`);
})
yourMsg.listen('unemployment',function (name) {
console.log(`${name}想知道你失業(yè)`);
})
yourMsg.trigger('marrgie','張三');
yourMsg.trigger('unemployment','李四');
/*
張三想知道你結(jié)婚
李四想知道你失業(yè)
*/
