IOS美区账号微信: springsunshine2017

前端技术 · 2021年5月18日 0

手写一个高性价比的js观察者模式实例

观察者模式(Observer Pattern)

观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。

观察者模式有一个别名叫“发布-订阅模式”,或者说是“订阅-发布模式”,订阅者和订阅目标是联系在一起的,当订阅目标发生改变时,逐个通知订阅者。

其实24种基本的设计模式中并没有发布订阅模式,上面也说了,他只是观察者模式的一个别称。

但是经过时间的沉淀,似乎他已经强大了起来,已经独立于观察者模式,成为另外一种不同的设计模式。

在现在的发布订阅模式中,称为发布者的消息发送者不会将消息直接发送给订阅者,这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件,称为消息代理或调度中心或中间件,它维持着发布者和订阅者之间的联系,过滤所有发布者传入的消息并相应地分发它们给订阅者。

接下来我们手写一个观察者模式的实例

<script type=”text/javascript”>    // 被观察者或者消息发布主体:微信公众号    class Subject {        constructor(name) {            this.name            this.observers = [] // 观察者 存放在被观察者中:记录那些用户关注了该微信公众号            this.state = ‘没有任何消息’ //消息        }        // 被观察者要提供一个接受观察者的方法:微信公众号需要有关注的功能        add(observer) {            this.observers.push(observer) // 存放所有观察者:记录所有的关注用户        }        del(observer){            this.observers.filter((o)=>o!==observer) // 删除观察者:删除指定的关注用户        }        setState(newState) { // 改变被观察着的状态:公众号发布消息并通知所有关注的用户            this.state = newState            this.observers.forEach(o => o.update(newState))        }    }    // 观察者    class Observer {        constructor(name) {            this.name = name        }        update(newState) { //用来通知所有的观察者状态更新了:公众号实现具体的通知            console.log(this.name + ‘说:我接收到了’ + newState)        }    }    // 被观察者 微信公众    let sub = new Subject(‘某个微信公众号’)    let a = new Observer(‘用户A’)    let b = new Observer(‘用户B’)
    // 订阅 观察者:用户关注公众号    sub.add(a)    sub.add(b)
    sub.setState(‘新发布内容’)    // 用户A说:我接收到了新发布内容    // 用户B说:我接收到了新发布内容</script>

以上就是使用es6 class类实现的手写一个高性价比的js观察者模式实例,欢迎大家讨论~