码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-08 00:22:53      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:发布订阅   使用   callback   mamicode   直接   llb   back   ber   str   

在vue框架中,使用了观察者模式和发布订阅模式,因此面试中常常会被问到:

技术图片

观察者模式:观察者(Observer)直接订阅(Subscribe)主题(Subject),而当主题被激活的时候,会触发(Fire Event)观察者里的事件。

代码:

// 被观察者 (小宝宝)
class Subject {
    constructor(name) {
        this.name = name;
        this.state = "开心"; // 被观察者的状态
        this.observers = []; // 存放观察者
    }
    // 需要将观察者放到自己的身上
    attach(ther) {
        this.observers.push(ther);
    }
    // 更新被观察者的状态
    setState(state) {
        this.state = state;
        this.observers.forEach(ther => {
            ther.update(this);
        });
    }
}
// 观察者
class Observer {
    constructor(name) {
        this.name = name;
    }
    // 等会被观察者的状态发生变化会调用这个方法
    update(subject) {
        console.log(this.name + ":" + subject.name + "当前状态是" + subject.state);
    }
}
let bady = new Subject("小宝宝");
let father = new Observer("爸爸");
let mother = new Observer("妈妈");
bady.attach(father);
bady.attach(mother);
bady.setState("不开心");
bady.setState("饿了");
 
发布/订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。
代码:
// on是订阅 emit是发布
let e = {
    _callback: [],
    on(callback) {
        // 订阅一件事 当这件事发生的时候 触发对应的函数
        // 订阅 就是将函数放到数组中
        this._callback.push(callback);
    },
    emit(value) {
        this._callback.forEach(method => {
            method(value);
        });
    }
};
// 订阅
e.on(function (value) {
    console.log(value + ":张三的订阅");
});
// 订阅
e.on(function (value) {
    console.log(value + ":李四的订阅");
});
// 订阅
e.on(function (value) {
    console.log(value + ":王五的订阅");
});
// 发布
e.emit(‘发布‘)

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

标签:发布订阅   使用   callback   mamicode   直接   llb   back   ber   str   

原文地址:https://www.cnblogs.com/zx-666/p/13063058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!