前端设计模式之观察者模式(发布订阅)

本文深入探讨了观察者模式与发布订阅模式的工作原理,通过实例展示了这两种模式如何在实际场景中应用,如商品到货通知和家庭中婴儿状态变化的监控。

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

观察者模式

  • 观察者模式是基于发布订阅模式的,所以在介绍观察者模式前,我们先来看看发布订阅模式吧
  • 发布订阅模式

发布订阅模式 主要有两个方法 发布-- emit订阅 --on
订阅的函数不会立即执行 只有当触发emit 的时候才会依次执行

以生活中的例子来说—比如在购物时,遇到库存不足的商品,点击有货通知,等有货了就会执行通知发送短信,下面我们就这个例子模拟实现一下,感受一下用法

let event = {
    _arr:[], //用来存储订阅
    on(fn){
        this._arr.push(fn);
    },
    emit(){
        this._arr.forEach(fn=>fn());
    }
}

let shops = {
    event,
    subscribe(){ 
        event.on(()=>{
            console.log("到货啦!!");
        })
    },
    Purchase(){
        setTimeout(() => {
          event.emit();
        }, 3000);
    }
}

shops.subscribe(); //用户预定到货通知
shops.subscribe();
shops.Purchase(); //进货后通知用户
  • 接下来我们进入主题,来看看观察者模式是如何实现的

我们可以看看这个类图,先进行一波思考
在这里插入图片描述
我们大致可以看出,观察者在被观测者中存储,可以一对一也可以一对多,当被观测者状态改变时,通知观察者执行操作

我们在以生活中的例子来体会,比如一个家庭中有一个婴儿,那么婴儿为被观察者,父母为观察者,以此来进行一下模拟

class Subject { //被观察者
    constructor(){
        this.state = '睡觉'
        this.arr = []
    }
    attach(observer){
        this.arr.push(observer);
    }
    setState(newState){
        this.state = newState;
        this.arr.forEach(observer => observer.update(newState));
    }
}

//观察者
class Observer {
    constructor(name){
        this.name = name;
    }
    update(newState){
        console.log(`${this.name}发现:宝宝现在在----------->${newState}`);
    }
}

let baby = new Subject();
let mom = new Observer("妈妈");
let dad = new Observer("爸爸");
baby.attach(mom);//相当于on
baby.attach(dad);
setTimeout(() => {
    baby.setState("睡醒了");//相当于触发emit
}, 3000);
  • 希望对大家有所帮助 如果有错误请及时通知 以免误导其他同学
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木木林_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值