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)

  

观察者模式应用场景

js设计模式——3.观察者模式的更多相关文章

  1. [JS设计模式]:观察者模式(即发布-订阅者模式)(4)

    简介 观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 举一个现实生活中的例子,例如小 ...

  2. JS设计模式之观察者模式

    观察者模式,即发布与订阅模式,实现一对多的一种关系模式,当一种对象接受信号时其他所有依赖均有行为.我们在写code的时候总是会去自定义一些事件,这就是观察者常常使用的地方: JS中的观察者模式应用: ...

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

    观察者模式 又被称为“发布-订阅”模式,目的是解决主题对象和观察者之间功能的耦合性.发布者和订阅者之间是互不干扰的,没有联系的,通过观察者,当做中介,将二者联系起来. 例子:以学生和老师之间的为例 1 ...

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

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

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

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

  6. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  7. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  8. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  9. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

随机推荐

  1. 高级运维(七):Subversion基本操作、使用Subversion协同工作、制作nginx的RPM包

    一.Subversion基本操作 目标: 本案例要求先快速搭建好一台Subversion服务器,并测试该版本控制软件: 1> 创建版本库    2> 导入初始化数据    3> 检出 ...

  2. angular-cli项目报Error encountered resolving symbol values statically. Function calls are not supported.错误的处理。

    安装同事打包的一个模块,报了这么个错,不过在其他地方使用是正常的. Error encountered resolving symbol values statically. Function cal ...

  3. symantec SMG 抓包

    1.使用putty连接SMG,先用admin账号登陆 执行set-support  , 设置一个密码. 2.重新打开一个putty连接SMG,使用support账号登陆.用我们刚才设置的密码. 3.开 ...

  4. php开发面试题---php缓存总结

    php开发面试题---php缓存总结 一.总结 一句话总结: 缓存主要分本地缓存和分布式缓存两种 可以用分布式本地缓存:把那些常用的.不容易变的页面.数据都存下来 1.常用的缓存构架? 分布式本地缓存 ...

  5. php下载

    生成迅雷下载链接 $url = "http://www.xxx.com/xxx/test.jpg"; echo "thunder://".base64_enco ...

  6. 购买一台阿里云云主机(CentOS)后

    系统的优化优化之前,首先查看版本信息 cat /etc/redhat-release CentOS release 6.9 (Final) 查看内核版本 uname -a Linux iZwz98ak ...

  7. 点读系列《流畅的python》

    第1章 python数据模型 python的写法是由背后的魔法方法实现的,比如obj[key],解释器实际调用的是obj.__getitem__(key) 作者把魔法方法叫做双下方法,因为有两个下划线 ...

  8. MVC,MVP 和 MVVM 的图示(转载)

    MVC,MVP 和 MVVM 的图示   作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常 ...

  9. spring中@注解的相关解释

    @Component:@Controller:@Service:@Repository 在annotaion配置注解中用@Component来表示一个通用注释用于说明一个类是一个spring容器管理的 ...

  10. Javascript高级程序设计--读书笔记之理解原型对象

    先上一段代码和关系图 function Person(){} Person.prototype.name = "Nic" Person.prototype.age = 22 Per ...