// 主题,接收状态变化,触发每个观察者
class Subject {
constructor() {
this.state = 0
this.observers = []
}
getState() {
return this.state
}
setState(state) {
this.state = state
this.notifyAllObservers()
}
attach(observer) {
this.observers.push(observer)
}
notifyAllObservers() {
this.observers.forEach(observer => {
observer.update()
})
}
} // 观察者,等待被触发
class Observer {
constructor(name, subject) {
this.name = name
this.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)

被观察者的状态更改时,观察者执行相对的事情

观察者和被观察者,耦合度比较小,更改的代码不写在被观察者里面

一个被观察者可以有多个观察者

其他应用场景

1.vue 的 watch 监听 变量的更新

2. promise then 异步的then 可以有多个then func是被观察者。被观察者更新值,被观察者执行,代码耦合比较小。可以有多个被观察者。

var func = new Promise((resolve, reject) => {
resolve('返回值');
}); func.then(function(){
console.log("观察者执行....");
}); func.then(function(){
console.log("观察者执行....");
});

js模式-观察者模式的更多相关文章

  1. js之观察者模式和发布订阅模式区别

    观察者模式(Observer) 观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进 ...

  2. JS设计模式——观察者模式(通俗易懂)

    Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段 ...

  3. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  4. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. (四)JS学习笔记 - 模式 - 观察者模式

    理解观察者模式 简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者. 观察者的使用场合 当一个对象的改变需要同时改变其它对象,并且它不知道具 ...

  6. js 设计模式——观察者模式

    观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...

  7. js 之观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自 ...

  8. 谈谈JS的观察者模式(自定义事件)

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  9. JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

随机推荐

  1. 十三、web应用中路径总结

    1.路径的编写形式:1)<a href="/项目名/资源路径"></a>    <!--超链接--> <form action=" ...

  2. windows环境变量引发的血案

    最近重装了系统,决心使用Anaconda来管理python包和虚拟环境.在完成一系列配置后,运行程序,发现老是报错 D:\Anaconda3\envs\jobnote>python E:\wor ...

  3. DICOM的Worklist服务

    看 DICOM 标准有一段时间了,前面几篇也介绍了一下 DIMSE-C 消息服务,具体参看Dicom 学习笔记-Dicom 消息服务(DIMSE-C/DIMSE-N),本文就介绍一下 DICOM 标准 ...

  4. [GoogleInterview]连续子序列问题

    Before the Beginning 本文为 Clouder 原创文章,原文链接为 https://www.codein.icu/gci-subarray/,转载时请将本段放在文章开头显眼处.如进 ...

  5. 073、Java面向对象之利用构造方法为属性赋值

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 private String title; // 书的名字 private double price ...

  6. 学习angularJs(1)--引用文件

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">< ...

  7. Activemq、Rabbitmq、Rocketmq、Kafka的对比

    综上所述,各种对比之后,我个人倾向于是: 一般的业务系统要引入MQ,最早大家都用ActiveMQ,但是现在确实大家用的不多了,没经过大规模吞吐量场景的验证,社区也不是很活跃,所以大家还是算了吧,我个人 ...

  8. Django-路由Routers-SimpleRouter-DefaultRouter使用方法

    路由Routers 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提供 ...

  9. P1063 计算谱半径

    P1063 计算谱半径 转跳点:

  10. firewalld学习-zone的使用和配置

    原文地址:http://www.excelib.com/article/290/show zone文件标签名词解释 target:目标,这个前面学生也已经给大家介绍过了,可以理解为默认行为,有四个可选 ...