背景
在業(yè)務(wù)開(kāi)發(fā)中谨湘，經(jīng)常會(huì)遇到要處理跨頁(yè)面通信的問(wèn)題，比如說(shuō)用戶打開(kāi)了一個(gè)網(wǎng)站憾儒，網(wǎng)站的某些頁(yè)面需要根據(jù)用戶的登錄的狀態(tài)不同崔涂，顯示不同的數(shù)據(jù)蝙茶。顯然這需要我們?cè)诘卿洺晒Φ哪且豢蹋ネㄖ侥切┬枰淖兊捻?yè)面。為了解決類(lèi)似這樣的問(wèn)題耍属，發(fā)布訂閱模式誕生了。
思路
一個(gè)簡(jiǎn)單的發(fā)布訂閱模式需要事件的綁定和觸發(fā)是互相隔離的煮仇，同時(shí)支持動(dòng)態(tài)的添加和刪除事件郑诺∏岜В基于此就有了一個(gè)思路：
實(shí)現(xiàn)
根據(jù)上面的思路霞揉，大致可以知道使用方式類(lèi)似下面：
var emitter = new EventEmitter();var handle = function (data) { console.log(data)}// 頁(yè)面A訂閱LOGIN事件emitter.on('LOGIN', handle)// 登錄成功适秩，觸發(fā)發(fā)布emitter.emit('LOGIN', {user: { name: 'Jan', age: 18}})
具體代碼實(shí)現(xiàn)
function EventEmitter() { // 事件變量 this._event = {}}// 添加訂閱EventEmitter.prototype.on= function (type, handle) { this._event[type] = this._event[type] || [] this._event[type].push(handle)}// 移除訂閱EventEmitter.prototype.remove = function (type, handle) { var index = (this._event[type] || []).indexOf(handle) if(index !== -1) { this._event[type].splice(index, 1) }}// 觸發(fā)發(fā)布EventEmitter.prototype.emit = function (type, data) { (this._event[type] || []).forEach(function (handle) { handle(data) })}
如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的發(fā)布訂閱模式首發(fā)于聚享小站，如果對(duì)您有幫助扬跋，不要忘記點(diǎn)贊支持一下呦??
