javascript之观察者模式学习

前端日记

今天是前端日记的第一天，坚持至少每3天一个额外知识点，然后与大家一起分享。一个前端小白的学习之路。

观察者模式

简单介绍下（详细的自己百度），观察者模式是一种设计模式，首先有2个角色1、发布者。2、观察者，顾名思义，发布者就是发布最新的消息，而观察者被动接收最新消息，然后根据自己需要去做某些操作。

首先实现一个发布者：

//目标者类
class Subject{
    constructor(){
        this.observers = []//观察者列表
    }
    //添加观察者
    add(observer){
        this.observers.push(observer)
    }
    //删除观察者
    remove(observer){
        let idx = this.observers.findIndex(item=>item===observer);
        this.observers.splice(idx,1)
    }
    //通知
    notify(){
        //循环所有观察者，并执行更新函数
        for(let observer of this.observers){
            observer.update()
        }
    }
}

在实现一个观察者类：

//观察者类
class Observer {
    constructor(name) {
        //观察者名字
        this.name = name
    }
    update() {
        //接受新消息后的操作
        console.log(`发布者通知我更新了,我是${this.name}`)
    }
}

最后，实例化发布者和观察者

//实例化目标者
const subject = new Subject();
//实例化2个观察者
const observer1 = new Observer('我是观察者1')
const observer2 = new Observer('我是观察者2')

//添加2个观察者
subject.add(observer1);
subject.add(observer2);

//通知更新
subject.notify()

最后执行发布者的更新，打印出

以上只是原理上的实现，具体使用的场景没试过，应该用于某个对象的更新需要更新其他对象的时候。
谢谢观赏，如有不足，请下方留言，共勉之! —一个菜鸡前端的路程