面试题：基于 TypeScript 类构建复杂前端状态管理系统的设计模式实践

设计思路

状态存储：使用单例模式确保状态管理实例全局唯一，便于在整个项目中统一访问和管理状态。
状态变更：提供特定方法来更新状态，保证状态变更的可控性和可追溯性。
组件订阅：运用观察者模式，让组件能够订阅状态变化，当状态改变时自动通知订阅的组件进行更新。

代码实现

// 观察者接口
interface Observer {
    update(state: any): void;
}

// 状态管理类（单例模式）
class StateManager {
    private static instance: StateManager;
    private state: any;
    private observers: Observer[] = [];

    private constructor() {
        this.state = {};
    }

    public static getInstance(): StateManager {
        if (!StateManager.instance) {
            StateManager.instance = new StateManager();
        }
        return StateManager.instance;
    }

    // 获取状态
    public getState(): any {
        return this.state;
    }

    // 更新状态并通知观察者
    public setState(newState: any): void {
        this.state = { ...this.state, ...newState };
        this.notifyObservers();
    }

    // 添加观察者
    public attach(observer: Observer): void {
        this.observers.push(observer);
    }

    // 移除观察者
    public detach(observer: Observer): void {
        this.observers = this.observers.filter(obs => obs!== observer);
    }

    // 通知所有观察者
    private notifyObservers(): void {
        this.observers.forEach(observer => observer.update(this.state));
    }
}

// 示例组件（观察者）
class ExampleComponent implements Observer {
    constructor(private name: string) {}

    update(state: any): void {
        console.log(`${this.name} 接收到状态更新:`, state);
    }
}

// 使用示例
const stateManager = StateManager.getInstance();
const component1 = new ExampleComponent('组件1');
const component2 = new ExampleComponent('组件2');

stateManager.attach(component1);
stateManager.attach(component2);

stateManager.setState({ count: 1 });
stateManager.setState({ message: 'Hello, World!' });

stateManager.detach(component2);
stateManager.setState({ newData: '一些新数据' });

各部分协作关系

StateManager：作为状态管理的核心类，负责存储状态（state 属性），通过 getState 和 setState 方法来获取和更新状态。同时，管理观察者列表（observers 数组），提供 attach 和 detach 方法来添加和移除观察者，并在状态更新时调用 notifyObservers 方法通知所有观察者。
Observer 接口：定义了观察者需要实现的 update 方法，当状态变化时，状态管理类会调用这个方法通知观察者。
ExampleComponent：实现了 Observer 接口，代表具体的组件。当接收到状态更新通知时，会在控制台打印出相关信息，模拟组件更新操作。

通过这种设计，实现了状态的集中管理、可控变更以及组件对状态变化的自动响应，构建了一个简单的前端状态管理框架。

面试题：基于 TypeScript 类构建复杂前端状态管理系统的设计模式实践

知识考点

面试题答案

设计思路

代码实现

各部分协作关系