深入理解观察者模式：Subject 与 Observer 的协同工作

测试智商的网站 8小时前阅读数 3296 #软件测试

在软件开发中，设计模式是一种被实践证明有效的解决特定问题的通用方案。其中，观察者模式（Observer Pattern） 是一种常用的设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，当主题对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。本文将深入探讨观察者模式的原理、组成，以及在实际开发中的应用。

一、观察者模式概述

1. 什么是观察者模式？

观察者模式是一种行为型设计模式，允许对象定义 订阅机制，以便在对象事件发生时通知多个观察者。它提供了一种 松耦合 的方式，将观察者与被观察者分离。

2. 模式组成

观察者模式主要包括以下两个角色：

Subject（主题）：也称为 被观察者，它掌握着观察者的引用列表。当自身状态发生变化时，通知所有注册过的观察者。
Observer（观察者）：定义一个更新接口，用于在接收到主题的通知时，更新自身的信息。

二、观察者模式的工作原理

观察者模式的核心在于主题对象与观察者对象之间的通信机制。主题对象维护着一个观察者列表，当自身状态改变时，调用通知方法，遍历该列表，调用每个观察者的更新方法。

工作流程：

注册观察者：观察者通过在主题上调用 attach() 方法，将自身注册到主题的观察者列表中。
移除观察者：如果观察者不再需要接收通知，可以通过调用主题的 detach() 方法，将自身从观察者列表中移除。
状态改变：主题对象的状态发生变化。
通知观察者：主题对象调用 notify() 方法，遍历观察者列表，调用每个观察者的更新方法。
更新状态：观察者接收到通知后，执行自身的更新逻辑。

三、观察者模式的示例

1. 示例场景：股票市场

假设我们在开发一个股票市场应用，投资者（观察者）可以订阅股票（主题）的价格更新。当股票价格发生变化时，系统会通知所有订阅了该股票的投资者。

2. 类定义

主题接口（Subject）

public interface Subject {
    void attach(Observer observer); // 注册观察者
    void detach(Observer observer); // 移除观察者
    void notifyObservers(); // 通知所有观察者
}

具体主题（ConcreteSubject）

public class Stock implements Subject {
    private List<Observer> observers = new ArrayList<>();
    private String stockName;
    private double price;

    public Stock(String stockName, double price) {
        this.stockName = stockName;
        this.price = price;
    }

    public void setPrice(double price) {
        this.price = price;
        notifyObservers();
    }

    public double getPrice() {
        return price;
    }

    @Override
    public void attach(Observer observer) {
        observers.add(observer);
    }

    @Override
    public void detach(Observer observer) {
        observers.remove(observer);
    }

    @Override
    public void notifyObservers() {
        for (Observer observer : observers) {
            observer.update(this);
        }
    }
}

观察者接口（Observer）

深入理解观察者模式：Subject 与 Observer 的协同工作

public interface Observer {
    void update(Subject subject);
}

具体观察者（ConcreteObserver）

public class Investor implements Observer {
    private String investorName;

    public Investor(String name) {
        this.investorName = name;
    }

    @Override
    public void update(Subject subject) {
        if (subject instanceof Stock) {
            Stock stock = (Stock) subject;
            System.out.println("通知投资者 " + investorName + "：股票" + stock.getStockName() + "价格变为 " + stock.getPrice());
        }
    }
}

3. 使用示例

public class Main {
    public static void main(String[] args) {
        // 创建主题对象
        Stock appleStock = new Stock("Apple", 150.0);

        // 创建观察者对象
        Investor investorA = new Investor("张三");
        Investor investorB = new Investor("李四");

        // 注册观察者
        appleStock.attach(investorA);
        appleStock.attach(investorB);

        // 模拟股票价格变化
        appleStock.setPrice(155.0);
        appleStock.setPrice(160.0);

        // 移除一个观察者
        appleStock.detach(investorA);

        // 再次改变价格
        appleStock.setPrice(165.0);
    }
}

输出结果：

通知投资者 张三：股票Apple价格变为 155.0
通知投资者 李四：股票Apple价格变为 155.0
通知投资者 张三：股票Apple价格变为 160.0
通知投资者 李四：股票Apple价格变为 160.0
通知投资者 李四：股票Apple价格变为 165.0

四、观察者模式的优缺点

优点

解耦性：观察者与主题之间是抽象耦合的，便于独立地扩展和修改双方。
灵活性：可以在运行时动态添加和移除观察者。
响应性：当主题的状态变化时，观察者会被自动通知，实时感知变化。

缺点

可能导致性能问题：如果观察者数量很多，通知的过程可能会消耗大量时间，影响性能。
可能导致内存泄漏：如果没有正确地移除观察者，可能会导致对象无法被垃圾回收。
循环依赖：不小心的设计可能导致循环调用，造成栈溢出。

五、观察者模式在 JavaScript 中的应用

在 JavaScript 中，观察者模式也被广泛应用，尤其是在事件驱动的编程模型中。

1. 使用事件监听器

DOM 元素的事件处理就是观察者模式的应用。

const button = document.querySelector('#myButton');

function handleClick(event) {
    console.log('按钮被点击了！');
}

// 注册事件监听器
button.addEventListener('click', handleClick);

// 移除事件监听器
button.removeEventListener('click', handleClick);

2. 实现简单的事件总线

class EventEmitter {
    constructor() {
        this.events = {};
    }

    // 注册事件监听器
    on(event, listener) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(listener);
    }

    // 移除事件监听器
    off(event, listener) {
        if (!this.events[event]) return;
        this.events[event] = this.events[event].filter(l => l !== listener);
    }

    // 触发事件
    emit(event, ...args) {
        if (!this.events[event]) return;
        this.events[event].forEach(listener => listener.apply(this, args));
    }
}

// 使用示例
const emitter = new EventEmitter();

function responseToEvent(msg) {
    console.log('事件接收到了：', msg);
}

emitter.on('event1', responseToEvent);
emitter.emit('event1', 'Hello World'); // 输出：事件接收到了： Hello World
emitter.off('event1', responseToEvent);