面试高频手写题007-实现观察者模式

一、什么是观察者模式

观察者模式其实可以简单的分为两个角色，观察者和被观察者。由被观察者主动通知观察者，告诉他我发生了变化，你可以做你想做的事情了。

一个被观察对象 Subject，拥有方法：添加 / 删除 / 通知 Observer；

多个观察者对象 Observer，拥有方法：接收 Subject 状态变更通知并处理；

被观察对象 Subject 状态变更时，通知所有 Observer。

二、JS手写实现观察者模式

思路：被观察者类中实现添加 / 删除 / 通知 Observer几个方法；观察者类中实现状态变更处理方法

// 观察者类
class Observer {
    // 观察的数据发生了变化，触发函数
    update(...args) {
        //...dosomething
        console.log(...args)
    }
}

// 被观察者类
class Subject {
    constructor() {
        this.observerList = []
    }

    add(observer) {
        this.observerList.push(observer)
        this.observerList = [...new Set(this.observerList)]
    }

    remove(observer) {
        this.observerList = this.observerList.filter(item => item != observer)
    }

    notify(...args) {
        this.observerList.forEach(observer => observer.update(...args))
    }
}

// 测试用例
let observer_1 = new Observer()
let observer_2 = new Observer()
let sub = new Subject()
sub.add(observer_1)
sub.add(observer_2)
sub.notify('send msg')

三、观察者模式和发布订阅模式的区别

区别主要在发布订阅模式中间的这个 Event Channel：

观察者模式中的观察者和被观察者之间还存在耦合，被观察者还是知道观察者的；

发布订阅模式中的发布者和订阅者不需要知道对方的存在，他们通过消息代理来进行通信，解耦彻底。

使用场景：

mobx状态管理使用了观察者模式；redux状态管理使用了发布订阅模式。