JavaScript设计模式之发布订阅模式
发布订阅模式（Subscribe/Publish）。发布者和订阅者都通过订阅中心进行事件处理。
发布订阅模式主要分为三个阶段订阅on, 发布emit, 退订off
发布订阅模式是依赖函数回调实现的
【JavaScript设计模式之发布订阅模式】发布订阅模式的好处
- 可复用，扩展性强
- 可以让事件跟当前逻辑充分解耦，适合组件间的事件调用和数据传递
- 灵活性比较高
篮球场打打球结果到篮球场时，篮球场管理员告诉我现在正在进行设备检修，什么时候能修好还不知道。如果我想进去这个篮球场打球怎么办？
第一：每过一段时间过来看一下（轮询）
第二：把我的
手机号码留给篮球场管理员，球场修好之后给我打电话（发布订阅模式）结合上面的文字用代码实现
- 创建一个篮球场（Observe），并且在篮球场中创建一个对象eventObj（存储电话号码k和要做的事情）
const Observe = function() {
this.eventObj = {};
//
};
- 创建一个on方法，在eventObj中存储key（电话号码）以及对应的回调函数 -- 订阅
Observe.prototype.on = function(ev, cb) {
this.eventObj[ev] = cb;
};
- 创建一个emit方法，当篮球场修好之后，找到我的电话并且执行回调函数 -- 发布
Observe.prototype.emit = function(ev) {
if (this.eventObj[ev]) {
for (const key in this.eventObj) {
if (key === ev) {
let args = [];
for(let i = 1;
i- 移除消息 -- 退订
EventEmitter.prototype.off = function(ev, cb) {
this.eventObj[ev] = null
};
- 实际使用
let Event = new Observe();
//Event.on('handleCall', str => console.log(str))Event.emit('handleCell', '篮球场修好了，可以过来打篮球了')Event.off('handleCell') // 取消订阅
完整代码
const Observe = function() {
this.eventObj = {};
};
Observe.prototype.on = function(ev, cb) {
this.eventObj[ev] = [];
this.eventObj[ev].push(cb);
return this;
};
// 执行一次之后就销毁
Observe.prototype.once = function(ev, cb) {
let self = this;
let fn = function() {
self.off(ev, fn);
let args = [];
for(let i =0;
i {
if (item === cb) {
cbs.splice(i, 1);
return this;
}
});
}
return this;
};
export default Observe;
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai）
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 生活随笔｜好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息