发布/订阅模式

订阅者
发布者
信号中心
我们假定，存在一个"信号中心”，
某个任务执行完成，就向信号中心"发布"（publish）一个信号，
其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。
这就叫做"发布/订阅模式"（publish-subscribe pattern）

Vue 的自定义事件

<script src="<https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js>"></script>
<script>let vm = new Vue();vm.$on('dataChange', () => {console.log('dataChange');});vm.$on('dataChange', () => {console.log('dataChange1');});vm.$emit('dataChange');
</script>

兄弟组件通信过程

// eventBus.js// 事件中心let eventHub = new Vue()// ComponentA.vue// 发布者addTodo: function () {// 发布消息(事件)eventHub.$emit('add-todo', { text: this.newTodoText })this.newTodoText = ''}// ComponentB.vue// 订阅者created: function () {// 订阅消息(事件)eventHub.$on('add-todo', this.addTodo)}

模拟 Vue 自定义事件的实现

class EventEmitter {constructor() {// { eventType: [ handler1, handler2 ] }this.subs = {};}// 订阅通知$on(eventType, handler) {this.subs[eventType] = this.subs[eventType] || [];this.subs[eventType].push(handler);}// 发布通知$emit(eventType) {if (this.subs[eventType]) {this.subs[eventType].forEach((handler) => {handler();});}}}// 测试var bus = new EventEmitter();// 注册事件bus.$on('click', function () {console.log('click');});bus.$on('click', function () {console.log('click1');});// 触发事件bus.$emit('click');

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/aa0ca5042ec94ee69a309fd3d085ef3f

Design Patterns（设计模式-发布/订阅）相关推荐

设计模式 —— 发布订阅模式
设计模式 -- 发布订阅模式 <工欲善其事,必先利其器> 我在之前有写过一篇关于 <观察者模式> 的文章,大家有兴趣的可以去看看,个人认为那个例子还是挺生动的.(狗头) 不过今 ...
Design patterns 设计模式
Christopher Alexander 说过:"每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心.这样,你就能一次又一次地使用该方案而不必做重复劳动" ...
设计模式-发布订阅模式
这段时间在看vue的双向绑定原理,知道了vue的核心三大件:Observer, Complie, Watcher. Observer用于监听属性的变化,如有变动就通知 Watcher. Compile ...
JavaScript设计模式 -发布订阅者模式
1. 定义发布订阅者模式又叫观察者模式,他定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得将得到通知案例: 小明最近看上了一套房子,到了售楼处之后才被告知,该楼 ...
Spring - 设计模式 - 发布订阅模式
目录 1.Spring的发布订阅模式组成 1.1场景说明 1.2创建UserUpdateEvent 事件 1.3创建监听类 1.4发布UserUpdateEvent 事件 1.Spring的发布订阅模 ...
Head First Design Patterns(深入浅出设计模式)-目录
目录序你的大脑是如何理解设计模式的?此时,你正在设法学习些知识,而你的大脑要通过确认这些知识来给你提供支持.你的大脑在想:"最好出去做些更重要的事情,就象消灭野兽或者光着身子滑雪不是个好 ...
JavaScript 设计模式之观察者模式与发布订阅模式
前言在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...
设计模式（三）：观察者模式与发布/订阅模式区别
在翻阅资料的时候,有人把观察者(Observer)模式等同于发布(Publish)/订阅(Subscribe)模式,也有人认为这两种模式还是存在差异,而我认为确实是存在差异的,本质上的区别是调度的地方 ...
js设计模式之观察者模式和发布/订阅模式
观察者模式 The Observer is a design pattern where an object (known as a subject) maintains a list of obje ...

Design Patterns（设计模式-发布/订阅）

发布/订阅模式

Vue 的自定义事件

兄弟组件通信过程

模拟 Vue 自定义事件的实现

Design Patterns（设计模式-发布/订阅）相关推荐

最新文章

热门文章