观察者模式的理解以及在前端的广泛应用
发布日期:2021-05-07 09:30:35 浏览次数:15 分类:精选文章

本文共 1192 字,大约阅读时间需要 3 分钟。

文章目录

观察者模式的理解

观察者模式(Observer):定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新

  • 发布 订阅
  • 一对多关系(1:n)//n可以是1

在这里插入图片描述

左侧是观察者,被定义好后等待被触发,触发就执行update(),右侧的subject是一个被观察者,他可以被多个观察者观察,当它的状态改变时,所有观察它的观察者都会触发update()方法,知道它的状态已经改变

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状态。也是一种观察模式

上一篇:Python列表解析(例子解读)及和groupby()一起用的情况)
下一篇:R语言做kaggle中California Housing Prices数据集

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年04月13日 06时13分54秒