面试题：JavaScript中如何实现跨模块共享状态且避免循环依赖问题

方法一：使用单例模式

实现方式：创建一个单例对象来存储共享状态，各个模块通过访问这个单例对象来获取和修改共享状态。例如：

// singleton.js
let instance;
function Singleton() {
    if (!instance) {
        this.sharedState = {};
        instance = this;
    }
    return instance;
}
export default new Singleton();

在其他模块中：

import shared from './singleton.js';
console.log(shared.sharedState);

优点：实现简单，能有效共享状态，避免循环依赖。各个模块都引用同一个单例实例，不存在循环引用问题。
缺点：全局状态可能被任意模块修改，导致难以调试和维护。同时，单例模式在某些场景下不符合模块的独立性原则。

方法二：使用事件总线

实现方式：创建一个事件总线模块，模块之间通过订阅和发布事件来共享状态。例如：

// eventBus.js
const eventBus = {
    events: {},
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    },
    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(data));
        }
    }
};
export default eventBus;

在模块A中发布事件：

import eventBus from './eventBus.js';
function updateSharedState(newState) {
    eventBus.emit('sharedStateUpdate', newState);
}

在模块B中订阅事件：

import eventBus from './eventBus.js';
eventBus.on('sharedStateUpdate', (newState) => {
    // 更新自己的状态
});

优点：解耦模块之间的联系，每个模块只关心自己订阅的事件，不会直接依赖其他模块。能有效避免循环依赖，因为模块间通过事件总线间接通信。
缺点：事件逻辑复杂时，难以追踪和调试。同时，如果事件命名不规范，容易产生命名冲突。

方法三：使用Redux（或类似状态管理库）

实现方式：以Redux为例，创建一个单一的store来存储应用的整个状态树，各个模块通过dispatch action来修改状态。例如：

// store.js
import { createStore } from'redux';
const initialState = { sharedData: {} };
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'UPDATE_SHARED_DATA':
            return {...state, sharedData: action.payload };
        default:
            return state;
    }
}
const store = createStore(reducer);
export default store;

在模块中：

import store from './store.js';
// 订阅状态变化
store.subscribe(() => {
    const state = store.getState();
    // 根据新状态更新模块
});
// 派发action修改状态
store.dispatch({ type: 'UPDATE_SHARED_DATA', payload: { newData: 'value' } });

优点：状态管理集中化，易于维护和调试，有清晰的数据流。能有效避免循环依赖，因为模块通过store间接交互。同时，Redux提供了中间件等机制可以方便地实现日志记录、异步操作等功能。
缺点：引入了额外的库，增加了项目的学习成本和复杂度。对于小型项目，可能过度设计。

星途面试题库

面试题：JavaScript中如何实现跨模块共享状态且避免循环依赖问题

知识考点

面试题答案

方法一：使用单例模式

方法二：使用事件总线

方法三：使用Redux（或类似状态管理库）