JavaScript设计模式 - 观察者模式

观察者模式包含观察目标和观察者俩类对象，一个目标可以有任意数目的与之相依赖的观察者，一旦观察目标的状态发生了变化，那么所有的观察者也将得到通知

当一个对象的状态发生变化的时候，所有的依赖与它的对象都将得到通知并被自动更新、解决了主题对象与观察者之间功能的耦合，即一个对象状态该改变，通知其他对象

这个模式的有点在于目标者与观察者功能的耦合度降低，可以专注自身功能逻辑，观察者将被动接受更新，在时间上解耦，实时目标者更新状态，不过没有一种模式是完美无缺的，什么场景都合适的，它的缺点是虽然实现了对象之间的依赖关系解耦合，但是却不能对事件通知进行细分管理，如筛选通知、指定主题事件通知等等

class Subject {constructor() {this.observer = []}// 添加观察者addObserver = (observer) => this.observer.push(observer)// 删除观察者removeObserver = (observer) =>(this.observer = this.observer.filter((item) => item !== observer))// 通知观察者更新notify = () => this.observer.forEach((item) => item.update())
}class Observer {constructor(name) {this.name = name}update = () => console.log("update -- 观察者更新了", this.name)
}const subject = new Subject()
const observer1 = new Observer("观察者1号")
const observer2 = new Observer("观察者2号")
const observer3 = new Observer("观察者3号")
const observer4 = new Observer("观察者4号")subject.addObserver(observer1)
subject.addObserver(observer2)
subject.addObserver(observer3)
subject.addObserver(observer4)subject.notify()
console.log("-------------")
subject.removeObserver(observer1)
subject.notify()// update -- 观察者更新了 观察者1号
// update -- 观察者更新了 观察者2号
// update -- 观察者更新了 观察者3号
// update -- 观察者更新了 观察者4号
// -------------
// update -- 观察者更新了 观察者2号
// update -- 观察者更新了 观察者3号
// update -- 观察者更新了 观察者4号

JavaScript设计模式 - 观察者模式相关推荐

javascript设计模式-观察者模式（observer pattern）
为什么80%的码农都做不了架构师?>>> 也称作订阅发布模式,以下是 pubsubz 实现,不依赖任何库. (function ( window, doc, undef ) { ...
《JavaScript设计模式与开发实践》模式篇（5）—— 观察者模式
发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在 JavaScript 开发中,我们一般用事件模型来替代传统的发布- ...
JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
javascript 设计模式之观察者模式
什么是观察者模式观察者模式观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新. -- Graph ...
16种JavaScript设计模式（中）
简介上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合 ...
《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读面向对象的js 静态类型:编译时便已确定变量的类型 ...
javascript 的观察者模式的原理和集线器
学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...
javascript 设计模式_开发者都应该了解的7种JavaScript设计模式
你好,欢迎收听极客视点. JavaScript 中的设计模式指的是一些可重用的解决方案,这些方案适用于编写 JavaScript Web 应用程序时常见的一些问题.最近,全栈开发人员德文(Deven) ...

JavaScript设计模式 - 观察者模式

JavaScript设计模式 - 观察者模式相关推荐

最新文章

热门文章