這次帶給大家Javascript的觀察者模式，Javascript觀察者模式的注意事項有哪些，下面就是實戰案例，一起來看一下。
觀察者（又稱發布訂閱）模式定義了物件間的一種一對多的依賴關係，以便當一個物件的狀態發生變化時，所有依賴它的物件都被通知並自動刷新。
當使用者在網頁執行一些動作（如點擊）後就需要執行一些預定的事件（如表單提交、跳轉頁面）
優點：在發布者和訂閱者間耦合性降低
缺點：弱化了物件間的關係，不利於程式碼的維護與理解
實作想法
確定發布者
定義發布者快取列表，儲存回呼函數通知訂閱者
發布訊息依序執行快取列表回呼函數
簡單實作
let event = {};
event.list = [];//增加订阅者event.listen = function(fn){
event.list.push(fn);
}//发布消息event.trigger = function(){ for(var i = 0,fn; fn = this.list[i++];) {
fn.apply(this,arguments);
}
}let click = function(){ console.log('event：click');
}let hover = function(){ console.log('event：hover');
}
event.listen(click);
event.listen(hover);
event.trigger();//打印：‘event：click’'event：hover'完善觀察者模式
let Event = (function(){ var list = {},
listen,
trigger,
remove;
listen = function(key,fn){ 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('click', function(type) {
console.log('event: ' + type +' click');
});
Event.trigger('click' , 'button');//打印'event: button click'觀察者模式可以用於模組間通訊，訂閱使用者的事件、狀態，觸發執行對應的邏輯處理。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Javascript的觀察者模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
