发布订阅模式和观察者模式详解

最新推荐文章于 2024-08-06 12:58:11 发布

前端小超人rui

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量630

点赞数 11

文章标签：观察者模式 javascript 前端

本文链接：https://blog.csdn.net/qq_21087199/article/details/135191738

版权

文章介绍了发布订阅模式在JavaScript中的实现，如`onemit`函数，以及观察者模式中被观察者（Subject）和观察者（Observer）的角色。通过实例展示了如何使用这两个模式管理对象状态的变化并触发相应的回调。

摘要由CSDN通过智能技术生成

发布订阅模式 主要分成on emit
1）on 主要是把一些函数维护到一个数组中
2）emit 就是让数组中的方法依次执行

let fs = require('fs');
// 租赁 房屋
let event = { // 订阅和发布没有明显的关联， 靠中介arr来维护
    arr:[],
    on(fn){
        this.arr.push(fn); // 将函数依次存储到数组中
    },
    emit(){
        this.arr.forEach(fn=>fn());
    }
}
event.on(function () {
    console.log('读一次')
})
event.on(function () {
    if(Object.keys(person).length === 2){
        console.log(person)
    }
})
let school  = {}
fs.readFile('./name.txt','utf8',function (err,data) {
    person.name = data;
    event.emit();
});
fs.readFile('./age.txt','utf8',function (err,data) {
    person.age = data;
    event.emit();
});

观察者模式：有观察者和被观察者观察者需要放到被观察者中，被观察者的状态发生变化需要通知观察者，我变化了
内部也是基于发布订阅模式收集观察者状态变化后需要通知观察者

class Subject { // 被观察者  小宝宝
    constructor(name){
        this.name = name;
        this.state = '开心的';
        this.observers = []; //观察者们
    }
    attach(o){ // Subject.prototype.attach  //收集观察者们
        this.observers.push(o);
    }
    setState(newState){   //状态 当状态改变时 通知观察者们
        this.state = newState;
        this.observers.forEach(o=>o.update(this))
    }
}
class Observer{ // 观察者 
    constructor(name){
        this.name = name
    }
    update(baby){
        console.log('当前'+this.name +'被通知了','当前小宝宝的状态是'+baby.state)
    }
}
// 观察者 需要观察小宝宝的状态的变化
let baby = new Subject('小宝宝');
let parent = new Observer('爸爸');
let mother = new Observer('妈妈');
baby.attach(parent);
baby.attach(mother);
baby.setState('哭了');
//当前爸爸被通知了，当前小宝宝的状态是哭了 
//当前妈妈被通知了，当前小宝宝的状态是哭了