手写一个高性价比的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观察者模式实例，欢迎大家讨论~