JavaScript观察者模式

观察者模式又称为发布-订阅模式，它定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。观察者模式一个非常常见的例子就是DOM节点上的事件绑定。当body对象被点击时，body节点就会向订阅者发布这个消息。

document.body.addEventListener('click', function() {alert(2)
}, false)document.body.click()

另外，Promise中的then返回也是一种发布-订阅的模式。当获得到数据之后（Promise状态发生变化），触发订阅。或者Vue中组件生命周期触发，以及Vue watch

观察者模式示例代码

// 主题，保存状态，状态变化之后触发所有观察者对象
class Subject {constructor() {this.state = 0this.observers = []}getState() {return this.state}// 修改值的时候触发观察者（订阅）setState(state) {this.state = statethis.notifyAllObservers()}notifyAllObservers() {this.observes.forEach(observer => {observer.update()})}attach(observer) {this.observers.push(observer)}
}// 观察者
class Observer {constructor(name, subject) {this.name = namethis.subject = subject// 把观察者添加到subject中this.subject.attach(this)}update() {console.log(`${this.name} update, state: ${this.subject.getState}`)}
}// 测试
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)s.setState(1)

JavaScript观察者模式相关推荐

ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解
观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: ...
JavaScript 观察者模式（通俗易懂）
观察者模式又叫做发布-订阅模式.这是一种一对多的对象依赖关系,当被依赖的对象的状态发生改变时,所有依赖于它的对象都将得到通知. 生活中的观察者模式就如我们在专卖店预定商品(如:苹果手机),我们会向专 ...
浅析javascript观察者模式（发布-订阅模式）与应用
观察者模式(Observer):又称作发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间功能的耦合. 发布订阅模式可以解决主体对象与观察者之间功能的耦合. 举个栗子,一架飞机要从 ...
JavaScript 观察者模式
class Observerd {constructor(name) {this.name = namethis.state = '走路'this.observers = []}setObserver ...
JavaScript 发布-订阅模式
发布-订阅模式,看似陌生,其实不然.工作中经常会用到,例如 Node.js EventEmitter 中的 on 和 emit 方法:Vue 中的 $on 和 $emit 方法.他们都使用了发布-订阅 ...
几种常用设计模式的简单示例
前言模式是在某一背景下某个问题的一种解决方案. 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 为了保证代码的可靠性.提高代码的复用率. ...
【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为心里全栈工程师梦想浇水。
文章目录一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...
《JavaScript设计模式与开发实践》读书笔记之观察者模式
1.观察者模式观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观 ...
javascript 的观察者模式的原理和集线器
学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...

JavaScript观察者模式

观察者模式示例代码

JavaScript观察者模式相关推荐

最新文章

热门文章