
观察者模式的理解以及在前端的广泛应用
发布日期:2021-05-07 09:30:35
浏览次数:15
分类:精选文章
本文共 1192 字,大约阅读时间需要 3 分钟。
文章目录
观察者模式的理解
观察者模式(Observer):定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新
- 发布 订阅
- 一对多关系(1:n)//n可以是1
js代码
// 被观察者Subjectclass Subject{ constructor(){ this.state = 1 this.observers = [] //能够被这个数组里面的多个观察者被观察 } addObserver(observer){ this.observers.push(observer) } setState(state){ this.state = state this.notifyAllObservers() } notifyAllObservers(){ this.observers.forEach((observer)=>{ observer.update() }) }}class Observer{ constructor(name,subject){ this.name = name this.subject = subject this.subject.addObserver(this) //将自己添加到Subject中去才能观察他的状态 } update(){ console.log(`${ this.name} update,state; ${ this.subject.state}`); }}const sub = new Subject()const o1 = new Observer('observer1',sub)const o2 = new Observer('Observer2',sub)const o3 = new Observer('Observer3',sub)sub.setState(5)
应用场景
事件绑定
所有的事件监听机制都是观察者模式。挺好理解的。

Promise
promise有三个状态,pending,resolved,rejected状态,.then()方法监听resolved状态,.catch()监听rejected状态。也是一种观察模式
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年04月13日 06时13分54秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Java 设置PDF文档浏览偏好
2019-03-06
Java 添加、替换、删除PDF中的图片
2019-03-06
C#中构造函数的作用
2019-03-06
Go 数组&切片
2019-03-06
Go 文件操作
2019-03-06
drf Serializer基本使用
2019-03-06
老Python总结的字典相关知识
2019-03-06
深入理解 ZK集群的Leader选举
2019-03-06
深入理解分布式锁
2019-03-06
计算机的运算方法
2019-03-06
谈谈MySQL的基数统计
2019-03-06
大型面试现场:一条update sql执行都经历什么?
2019-03-06
自导自演的面试现场之--你竟然不了解MySQL的组提交?
2019-03-06
ajax 处理请求回来的数据
2019-03-06
简单单页面路由跳转demo
2019-03-06
vue 不常见操作
2019-03-06
jQuery的事件绑定与触发 - 学习笔记
2019-03-06
解决页面加载闪白问题-背景图片加载优化
2019-03-06
Python处理接口测试的签名
2019-03-06
测试流程规范--测试报告模板
2019-03-06