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

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

/*js设计模式——.观察者模式*/// 主题，保存状态，状态变化之后触发所有观察者对象
class Subject {constructor() {this.state = 0;this.observers = [];}getState() {return this.state;}setState(state) {this.state = state;this.notifyAllObservers();}// notifyAllObservers 用于触发每个观察者的更新notifyAllObservers() {this.observers.forEach(observer => {observer.update();});}// attach 把每个存放所有观察者数组中attach(observer) {this.observers.push(observer);}
}// 观察者
class Observer {constructor(name, subject) {this.name = name;this.subject = subject;this.subject.attach(this);}// update触发更新update(observer) {console.log(`${this.name} update, state:${this.subject.getState()}`);}
}// 测试
let s = new Subject();
let o1 = new Observer('o1', s)   // 打印结果 o1 update, state:1
let o2 = new Observer('o2', s)   // 打印结果 o2 update, state:1
let o3 = new Observer('o3', s)   // 打印结果 o3 update, state:1// 各个观察者各自依次运行
s.setState(1)
s.setState(2)
s.setState(3)

观察者模式应用场景

转载于:https://www.cnblogs.com/hpx2020/p/10718716.html

js设计模式——3.观察者模式相关推荐

js设计模式之观察者模式和发布/订阅模式
观察者模式 The Observer is a design pattern where an object (known as a subject) maintains a list of obje ...
js设计模式之观察者模式
什么是观察者模式? 观察者模式是一对多的一种依赖关系,让多个观察者对象同时监听某一个主体对象.这个主体发生状态的时候.会通知所有的观察者对象,自动更新自己的状态. 而发布订阅者模式,则不同.发布订阅者 ...
js设计模式之观察者模式和订阅发布模式
观察者模式这个模式在我看来原理就是发布者身上放着一个电话本(list)存着订阅者的l联系方式(回调函数),在触发条件(发布)后就会依次联系(遍历调用list中的回调函数)订阅者上代码: funct ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
设计模式：观察者模式--Observer
一.什么是观察者模式 1.生活中的观察者模式 1.警察抓小偷在现实生活中,警察抓小偷是一个典型的观察者模式「这以一个惯犯在街道逛街然后被抓为例子」,这里小偷就是被观察者,各个干警就是观察者,干警时时 ...
[js]设计模式小结对原型的修改
js设计模式小结工厂模式/构造函数--减少重复- 创建对象有new- 自动创建obj,this赋值- 无return原型链模式 - 进一步去重类是函数数据类型,每个函数都有prototypecons ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
深入理解JavaScript系列（32）：设计模式之观察者模式
介绍观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们 ...

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

js设计模式——3.观察者模式相关推荐

最新文章

热门文章