【设计模式】观察者模式和订阅发布模式

观察者模式

观察者模式包含观察目标和观察者两类对象。一个目标可以有任意数目的与之相依赖的观察者。一旦观察目标的状态发生改变,所有的观察者都将得到通知。

当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新,解决了主体对象与观察者之间功能的耦合,即一个对象状态改变给其他对象通知的问题。

js 复制代码
class Subject {
    constructor() {
        this.observers = []
    }

    add(observer) {
        this.observers.push(observer)
    }

    remove(observe) {
        this.observers = this.observers.filter(observer => observer !== observe)
    }

    notify() {
        this.observers.forEach(observer => {
            observer.update()
        })
    }
}
class Observer {
    constructor(name) {
        this.name = name
    }
    update() {
        console.log(this.name, 'update')
    }
}

const subject = new Subject();
const observer1 = new Observer('liu');
const observer2 = new Observer('hao')

subject.add(observer1)
subject.add(observer2)
subject.notify() // liu update hao update

前端通常的应用是导航和面包屑,面包屑发生改变,对应的页面内容也会发生改变。

优势:目标者与观察者,功能耦合度降低,专注自身功能逻辑;观察者被动接收更新,时间上解耦,实时接收目标者更新状态。

缺点:观察者模式虽然实现了对象间依赖关系的低耦合,但却不能对事件通知进行细分管控,如"筛选通知","指定主题事件通知"。

订阅发布模式

  1. 观察者和目标要相互知道
  2. 发布者和订阅者不用互相知道,通过第三方实现调度,属于经过解耦合的观察者模式
js 复制代码
// 发布订阅模式
class PubSub {
    constructor() {
        this.subscribers = {};
    }

    subscribe(type, callback) {
        if (!this.subscribers[type]) {
            this.subscribers[type] = [];
        }
        this.subscribers[type].push(callback);
    }

    publish(type, ...args) {
        if (this.subscribers[type]) {
            this.subscribers[type].forEach(callback => {
                callback(...args);
            });
        }
    }

    unsubscribe(type, callback) {
        if (this.subscribers[type]) {
            this.subscribers[type] = this.subscribers[type].filter(cb => cb !== callback);
        }
    }
}

function eventA() {
    console.log('eventA');
}
function testB() {
    console.log('testB');
}

const pubSub = new PubSub();
pubSub.subscribe('eventA', eventA);
pubSub.subscribe('testB', testB);
pubSub.publish('eventA');
相关推荐
数据智能老司机1 天前
精通 Python 设计模式——创建型设计模式
python·设计模式·架构
数据智能老司机1 天前
精通 Python 设计模式——SOLID 原则
python·设计模式·架构
烛阴2 天前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
李广坤2 天前
工厂模式
设计模式
幂简集成explinks2 天前
e签宝签署API更新实战:新增 signType 与 FDA 合规参数配置
后端·设计模式·开源
大飞pkz3 天前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
努力也学不会java3 天前
【设计模式】抽象工厂模式
java·设计模式·oracle·抽象工厂模式
青草地溪水旁3 天前
设计模式(C++)详解—抽象工厂模式 (Abstract Factory)(2)
c++·设计模式·抽象工厂模式
青草地溪水旁3 天前
设计模式(C++)详解—抽象工厂模式 (Abstract Factory)(1)
c++·设计模式·抽象工厂模式
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa