发布-订阅者模式 (观察者模式)

Posted 2020-12-16 fcblog2022

发布订阅者模式

还有一些好的列子应用可以看看 javascript设计模式与开发实践 这本书！！！！！

一、发布订阅模式是什么

发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象豆浆得到通知，在js开发中我们一般用事件模型来替代传统的发布-订阅模式

二、如何实现

// 主题，接收状态变化，触发每个观察者
class Subject {
    constructor() {
    	// 被观察的数据
        this.state = 0
        // 观察者们
        this.observers = []
    }
    getState() {
        return this.state
    }
    // 修改状态，即被关注的状态
    setState(state) {
        this.state = state
        this.notifyAllObservers()
    }
    // 添加订阅者
    attach(observer) {
        this.observers.push(observer)
    }
    // 通知订阅者
    notifyAllObservers() {
        this.observers.forEach(observer => {
            observer.update()
        })
    }
}

// 观察者，等待被触发
class Observer {
    constructor(name, subject) {
        this.name = name
        this.subject = subject
        this.subject.attach(this)
    }
    update() {
        console.log(`${this.name} update, state: ${this.subject.getState()}`)
    }
}

// 测试代码
let s = new Subject()
let o1 = new Observer(‘o1‘, s)
let o2 = new Observer(‘o2‘, s)
let o3 = new Observer(‘o3‘, s)

// 每次对s中state的状态修改，上面的o1、o2等观察者都会执行update更新状态
s.setState(1)
s.setState(2)
s.setState(3)

三、应用场景

观察者模式实在是太火了，应用到的地方太多了！！！！在MVC和MVVM框架中广泛应用！！！

• 网页事件绑定

• promise

• jQuery callbacks

  jquery写的少不了解就不举例了

• node.js自定义事件

• vue响应式原理，vue中$emit和$on，vue中的watch....

• 多进程通讯

四、优缺点

优点

• 时间上解耦
  • 我们在发布一个事件,如果编写一个离线的发布订阅者模式，就可以实现时间上的解耦
• 对象间的解耦
  • 发布者不需要关心订阅者是谁，订阅者也不需要关心发布者是谁

缺点

• 创建订阅者消耗一定的事件和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但订阅者一直存在内存中
• 弱化了对象间的联系，但使用过度，有时候必要的联系也被深埋在后面，特别是多个发布者和订阅者嵌套到一起的时候，会导致一个bug难以追踪