关于发布订阅模式:设计模式不到50行实现一个发布订阅模式

什么是公布/订阅者模式?置信大家在看Vue的视图更新以及$emit事件源码都有见到公布订阅的身影。包含Nodejs Events、jQuery中同样都有实现公布订阅模式,用网上一张比拟形象的图: 右边是观察者模式,左边是公布订阅模式:定义有事件名的若干个订阅者汇合进行保护(增删改查),在公布(emit)的时候通过惟一的事件名(key)把对应的订阅者汇合中的办法一一顺次执行一遍。 具体实现 var eventEmitter = { list: {}, //订阅主题 on: function (event, fn) { if (typeof fn !== "function") { return false; } //创立订阅者列表,如果存在就直接插入 (this.list[event] || (this.list[event] = [])).push(fn); return this; }, //公布主题 emit: function () { var event = [].shift.call(arguments); if (this.list[event] && this.list[event].length) { var fns = this.list[event].slice(); //浅拷贝后间接对列表所有订阅者函数顺次执行 for (var i in fns) { this.list[event][i].apply(this, arguments); } return this; } return false; },}on和emit的话比较简单首先定义一个list对象用于寄存事件的汇合的映射表当调用on事件绑定的时候通过传入的事件名判断以后是否已存在list中,不存在则先设置一个空数组,否则就间接push进去。 ...

February 13, 2022 · 1 min · jiezi