设计模式-发布订阅模式

这段时间在看vue的双向绑定原理，知道了vue的核心三大件：Observer, Complie, Watcher。

Observer用于监听属性的变化，如有变动就通知 Watcher。

Compile负责解析元素节点的指令，如v-if，v-bind之类, 进行数据和回调函数的绑定。

Watcher收到属性变动的通知，就触发对应属性的回调函数，更新视图。

在学习 Watcher 的实现时，发现用的是发布订阅模式，也称观察者模式。

其实我们从开始用 js/jQuery 监听事件开始，就已经在用发布订阅模式了。

例如 DOM 中的 addEventListener， jquery 的 on 绑定事件。

发布订阅模式，比较好理解。举几个例子:

电饭煲煮饭，电饭煲本身并不知道要在什么时候跳到保温，它就只能等通知，等到饭烧好了，电饭煲的某个控制器就发出一个通知，喂喂喂，饭熟了，不要再煮了。OK，电饭煲的电源控制器收到通知了，好，我跳保温。

dianfanbao.addEvent('煮好了', function(){jumpTo('保温');
});
复制代码

生活中的烧水啊，空调定时啊，你要买房子需要等开盘消息呀，都可以算是发布订阅模式吧。

发布订阅的核心思想就是维护一个对象，对象里面存放着各种事件的数组，根据不同的事件遍历不同的数组，执行回调。

一言不合上代码

class EventModel {constructor() {this.events = {};}on(eventType, fn) {if (!this.events[eventType]) {this.events[eventType] = [];}this.events[eventType].push(fn);}trigger(eventType, ...args) {let eventCallbacks = this.events[eventType];if (Array.isArray(eventCallbacks)) {eventCallbacks.forEach( fn => fn.apply(this, args) );}}off(eventType, fn) {let eventCallbacks = this.events[eventType];if ( !fn ) {eventCallbacks.length = 0;}let idx = eventCallbacks.indexOf(fn);if (idx !== -1) {eventCallbacks.splice(idx, 1);}}
}
复制代码

测试

let event = new EventModel();let f = x => alert(x);
event.on('click', f);
event.trigger('click', 2);   //alert(2);
event.off('click', f);
复制代码

这周末比较忙，就先简单记录一下，争取早日搞懂双向绑定原理，分享出来给有需要的人。

设计模式-发布订阅模式相关推荐

设计模式 —— 发布订阅模式
设计模式 -- 发布订阅模式 <工欲善其事,必先利其器> 我在之前有写过一篇关于 <观察者模式> 的文章,大家有兴趣的可以去看看,个人认为那个例子还是挺生动的.(狗头) 不过今 ...
Spring - 设计模式 - 发布订阅模式
目录 1.Spring的发布订阅模式组成 1.1场景说明 1.2创建UserUpdateEvent 事件 1.3创建监听类 1.4发布UserUpdateEvent 事件 1.Spring的发布订阅模 ...
JavaScript 设计模式之观察者模式与发布订阅模式
前言在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
JS设计模式七：发布-订阅模式
发布-订阅模式简述发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 以网购为例: 假 ...
游戏服务器架构-设计模式之观察者模式和发布订阅模式真的一样吗？
前面我给大家分享了观察者模式和发布订阅模式,有人私信给我说这俩不是一样嘛,大体没什么区别,我猜测大多数认为这两者是一样的可以继续阅读这两篇文章,如果还不能解答你的问题,我相信这篇文章对比两者的关系会让 ...
设计模式-观察者模式发布/订阅模式
设计模式-观察者模式发布/订阅模式代码观察者接口 public interface IHanFeiZi{// 当吃早饭时public void havBreakFast();// 进行娱乐活动时 ...
从东京奥运会看js设计模式之发布订阅模式
开篇废话:本篇文章介绍发布-订阅模式,想必很多人听说过有一种观察者模式,网上既有资料说这是两种不同的设计模式,也有说这是一种模式,我倾向于认同他们是同一种设计模式.不必过于纠结开篇楔子:东京奥运会已 ...
JavaScript 设计模式之发布-订阅模式（上）
什么是发布订阅模式? 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替 ...

设计模式-发布订阅模式

设计模式-发布订阅模式相关推荐

最新文章

热门文章