前端设计模式——观察者模式

前端

2023-10-09 10:06:37

观察者模式是一种行为设计模式，其核心思想是一个对象（主题）维护一个依赖于它的观察者的列表，在状态发生改变时主动通知所有已订阅的对象。这种模式广泛应用于前端开发领域，如事件处理和数据绑定等。

应用场景

在前端应用中，当某个组件的状态需要影响其他组件的行为或显示，就可以使用观察者模式来实现这类需求。比如，一个按钮的点击状态变化会影响另一个展示区域的内容更新。

原理分析

观察者模式包含两个关键角色：主题（Subject）和观察者（Observer）。主题负责维护观察者的列表并通知他们关于自身的任何变动。而观察者则需要提供相应的处理逻辑来响应这些变动。

实现步骤

定义一个主题接口，该接口应当至少包括增加、删除观察者的方法以及一个通知所有观察者的方法。
创建具体的主题实现类，并维护一个观察者的列表。
观察者需实现一个更新方法用于处理来自主题的变更通知。

示例代码

1. 定义主题和观察者接口

// 主题接口定义
class Subject {
    constructor() {
        this.observers = [];
    }
    
    registerObserver(observer) {
        if (!this.isRegistered(observer)) {
            this.observers.push(observer);
        }
    }

    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }

    notifyObservers() {
        for (const observer of this.observers) {
            observer.update(this);
        }
    }

    isRegistered(observer) {
        return this.observers.includes(observer);
    }
}

// 观察者接口定义
class Observer {
    update(subject) {}
}

2. 具体实现

// 主题的具体实现类
class ConcreteSubject extends Subject {
    state = '';
    
    setState(newState) {
        this.state = newState;
        console.log(`主题状态变更为：${this.state}`);
        // 状态变更时通知所有观察者
        this.notifyObservers();
    }
}

// 观察者的具体实现
class ConcreteObserver extends Observer {
    update(subject) {
        if (subject instanceof ConcreteSubject) {
            console.log(`观察到主题状态变为：${subject.state}`);
        }
    }
}

3. 使用示例

const subject = new ConcreteSubject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();

// 注册观察者
subject.registerObserver(observer1);
subject.registerObserver(observer2);

// 更改主题状态，将触发所有注册观察者的更新方法
subject.setState('新状态');