JS实现简易观察者模式

Dax1_

已于 2022-09-19 21:14:06 修改

阅读量449

点赞数

分类专栏：前端学习日记

于 2022-09-15 20:03:31 首次发布

本文链接：https://blog.youkuaiyun.com/Dax1_/article/details/126878657

版权

javascript 观察者模式前端

前端学习日记专栏收录该内容

162 篇文章

订阅专栏

本文介绍了观察者模式的实现，通过`Subject`类作为被观察者，`Observer`类作为观察者。`Subject`可以订阅和取消订阅观察者，并在状态改变时通知所有订阅者。示例中创建了`Subject`实例`sub`，以及两个`Observer`实例`a`和`b`，订阅并接收`Subject`发布的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 被观察者或消息发布主体
class Subject {
    constructor(name) {
        this.name = name
        this.observers = [] // 存放观察者
        this.state = '' // 发布的消息
    }
    subscribe(observer){
        this.observers.push(observer)
    }
    unsubscribe(observer){
        this.observers = this.observers.filter(item => {
            return item !== observer
        })
    }
    setState(newState){ // 改变被观察者的状态，并通知关注的用户
        this.state = newState
        this.observers.forEach(item => {
            item.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.subscribe(a)
sub.subscribe(b)

// 发布消息
sub.setState('新发布内容')
// 用户A 接收到了 新发布内容
// 用户B 接收到了 新发布内容