关于前端:如何实现一个简单的发布订阅模式

47次阅读

共计 939 个字符，预计需要花费 3 分钟才能阅读完成。

在业务开发中，常常会遇到要解决跨页面通信的问题，比如说用户关上了一个网站，网站的某些页面须要依据用户的登录的状态不同，显示不同的数据。显然这须要咱们在登录胜利的那一刻，
去告诉到那些须要扭转的页面。为了解决相似这样的问题，公布订阅模式诞生了。

一个简略的公布订阅模式须要事件的绑定和触发是相互隔离的，同时反对动静的增加和删除事件。基于此就有了一个思路：

定义一个变量存储这些事件
定义一个监听办法，用于把事件增加到事件变量中
定义一个删除办法，用于把是事件从变量中移除
定义一个触发办法，用于调用变量中的事件

依据下面的思路，大抵能够晓得应用形式相似上面：

var emitter = new EventEmitter();

var handle = function (data) {console.log(data)
}

// 页面 A 订阅 LOGIN 事件
emitter.on('LOGIN', handle)


// 登录胜利，触发公布
emitter.emit('LOGIN', {user: { name: 'Jan', age: 18}})

具体代码实现

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)
    }
}

// 触发公布
EventEmitter.prototype.emit = function (type, data) {(this._event[type] || []).forEach(function (handle) {handle(data)
    })
}