[JavaScript知识库] 观察者模式和发布订阅者模式不是一回事？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 观察者模式和发布订阅者模式不是一回事？ -> 正文阅读

[JavaScript知识库]观察者模式和发布订阅者模式不是一回事？

什么是观察者模式？

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

观察者模式的代码实现

// 被观察者
class Subject {
    constructor(name) {
        this.state = '开心';
        // 存储所有的观察者
        this.observers = [];
    }
    // 收集所有的观察者
    attach(o) {
        this.observers.push(o);
    }
    // 状态更新时，更新状态并通知所有的观察者
    setState(newState) {
        this.state = newState;
        this.observers.forEach(item => item.update(this));
    }
}

// 观察者
class Observer {
    constructor(name) {
        this.name = name;
    }
    // 接受被观察者通知的函数
    update(student) {
        console.log('观察者：' + this.name + '被观察者现在的状态是：' + student.state);
    }
}

let student = new Subject('学生'); 

let parent = new Observer('父母'); 
let teacher = new Observer('老师'); 

// 被观察者存储观察者的前提，需要先接纳观察者
student.attach(parent); 
student.attach(teacher); 
student.setState('正在好好学习~');

什么是发布订阅模式？

订阅者(Subscriber)把自己想订阅的事件注册到调度中心，当发布者(Publisher)发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。

发布订阅模式代码实现

class EventEmitter {
    constructor() {
        // 事件对象，存放订阅的名字和事件
        this.events = {};
    }
    // 订阅事件的方法
    on(eventName,callback) {
        // 如果事件对象中没有这个事件
        if (!this.events[eventName]) {
            // 以数组的形式存放，方便后续的存放
            this.events[eventName] = [callback];
        } else {
            this.events[eventName].push(callback);
        }
    }
    // 触发事件的方法
    emit(eventName) {
        // 如果这个事件名存在的话，则执行对应事件数组的所有事件
        this.events[eventName] && this.events[eventName].forEach(cb => cb());
    }
}
let em = new EventEmitter();
function workDay() {
  console.log("日事日毕，绝不拖延~");
}
function makeMoney() {
  console.log("工作挣钱");
}
function sayLove() {
  console.log("love");
}
em.on("money",makeMoney);
em.on("love",sayLove);
em.on("work", workDay);

em.emit("money");
em.emit("love");  
em.emit("work");