如何实现一个简单的发布订阅模式

背景

在业务开发中，经常会遇到要处理跨页面通信的问题，比如说用户打开了一个网站，网站的某些页面需要根据用户的登录的状态不同，显示不同的数据。显然这需要我们在登录成功的那一刻，去通知到那些需要改变的页面。为了解决类似这样的问题，发布订阅模式诞生了。

思路

一个简单的发布订阅模式需要事件的绑定和触发是互相隔离的，同时支持动态的添加和删除事件。基于此就有了一个思路：

实现

根据上面的思路，大致可以知道使用方式类似下面：

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

如何实现一个简单的发布订阅模式首发于聚享小站，如果对您有帮助，不要忘记点赞支持一下呦🎉