// 主题类
class Subject {
  constructor() {
    this.observers = []; // 观察者列表
    this.state = null;   // 主题状态
  }
  
  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }
  
  // 移除观察者
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }
  
  // 通知所有观察者
  notifyObservers() {
    this.observers.forEach(observer => {
      observer.update(this.state);
    });
  }
  
  // 设置状态并通知观察者
  setState(state) {
    this.state = state;
    this.notifyObservers();
  }
}

// 观察者类
class Observer {
  constructor(name) {
    this.name = name;
  }
  
  // 更新方法
  update(state) {
    console.log(`${this.name} 收到状态更新: ${state}`);
  }
}

// 使用示例
const subject = new Subject();
const observer1 = new Observer('观察者1');
const observer2 = new Observer('观察者2');

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.setState('新状态'); 
// 输出: 观察者1 收到状态更新: 新状态
// 输出: 观察者2 收到状态更新: 新状态

// 事件通道（事件总线）
class EventBus {
  constructor() {
    this.events = {}; // 存储事件类型和对应的回调函数列表
  }
  
  // 订阅事件
  subscribe(eventType, callback) {
    if (!this.events[eventType]) {
      this.events[eventType] = [];
    }
    this.events[eventType].push(callback);
    
    // 返回取消订阅的函数
    return () => {
      this.unsubscribe(eventType, callback);
    };
  }
  
  // 取消订阅
  unsubscribe(eventType, callback) {
    if (!this.events[eventType]) return;
    
    this.events[eventType] = this.events[eventType].filter(
      cb => cb !== callback
    );
    
    if (this.events[eventType].length === 0) {
      delete this.events[eventType];
    }
  }
  
  // 发布事件
  publish(eventType, data) {
    if (!this.events[eventType]) return;
    
    this.events[eventType].forEach(callback => {
      try {
        callback(data);
      } catch (error) {
        console.error(`处理事件 ${eventType} 时出错:`, error);
      }
    });
  }
  
  // 一次性订阅
  once(eventType, callback) {
    const onceCallback = (data) => {
      callback(data);
      this.unsubscribe(eventType, onceCallback);
    };
    this.subscribe(eventType, onceCallback);
  }
}

// 使用示例
const eventBus = new EventBus();

// 订阅事件
const unsubscribe = eventBus.subscribe('message', (data) => {
  console.log('收到消息:', data);
});

// 发布事件
eventBus.publish('message', 'Hello World!'); // 输出: 收到消息: Hello World!

// 取消订阅
unsubscribe();

// 再次发布，不会收到消息
eventBus.publish('message', '这条消息不会被接收');

// 简化的Vue响应式原理
class Dep {
  constructor() {
    this.subscribers = new Set();
  }
  
  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }
  
  notify() {
    this.subscribers.forEach(effect => effect());
  }
}

let activeEffect = null;

function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

// 使用响应式API
const targetMap = new WeakMap();

function getDep(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  
  return dep;
}

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const dep = getDep(target, key);
      dep.depend();
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      const dep = getDep(target, key);
      dep.notify();
      return true;
    }
  });
}

// 使用示例
const state = reactive({ count: 0 });

watchEffect(() => {
  console.log('count:', state.count);
}); // 立即输出: count: 0

state.count++; // 输出: count: 1

// 简化的React事件系统原理
class SyntheticEventSystem {
  constructor() {
    this.eventListeners = {};
  }
  
  // 添加事件监听
  addEventListener(type, listener) {
    if (!this.eventListeners[type]) {
      this.eventListeners[type] = new Set();
    }
    this.eventListeners[type].add(listener);
  }
  
  // 移除事件监听
  removeEventListener(type, listener) {
    if (!this.eventListeners[type]) return;
    this.eventListeners[type].delete(listener);
  }
  
  // 派发事件
  dispatchEvent(type, event) {
    if (!this.eventListeners[type]) return;
    
    this.eventListeners[type].forEach(listener => {
      try {
        listener(event);
      } catch (error) {
        console.error(`处理事件 ${type} 时出错:`, error);
      }
    });
  }
}

// 使用示例
const eventSystem = new SyntheticEventSystem();

// 添加点击事件监听
const clickHandler = (e) => {
  console.log('点击事件触发', e);
};
eventSystem.addEventListener('click', clickHandler);

// 派发点击事件
eventSystem.dispatchEvent('click', { target: 'button' });

// 移除事件监听
eventSystem.removeEventListener('click', clickHandler);

// 简化的Vuex实现
class Store {
  constructor(state = {}) {
    this._state = reactive(state);
    this._mutations = {};
    this._actions = {};
    this._getters = {};
  }
  
  get state() {
    return this._state;
  }
  
  commit(type, payload) {
    const mutation = this._mutations[type];
    if (mutation) {
      mutation(this.state, payload);
    }
  }
  
  dispatch(type, payload) {
    const action = this._actions[type];
    if (action) {
      return action(this, payload);
    }
  }
  
  // 使用观察者模式实现响应式
  watch(getter, callback) {
    watchEffect(() => {
      const value = getter(this.state);
      callback(value, value);
    });
  }
}

// 使用示例
const store = new Store({
  count: 0
});

// 定义mutation
store._mutations = {
  increment(state) {
    state.count++;
  }
};

// 监听状态变化
store.watch(
  state => state.count,
  (newCount, oldCount) => {
    console.log(`count从${oldCount}变为${newCount}`);
  }
);

store.commit('increment'); // 输出: count从0变为1

// 使用EventBus实现跨组件通信
// event-bus.js
export const eventBus = new EventBus();

// ComponentA.vue
import { eventBus } from './event-bus';

export default {
  methods: {
    sendMessage() {
      eventBus.publish('user-message', { text: 'Hello from Component A' });
    }
  }
};

// ComponentB.vue
import { eventBus } from './event-bus';

export default {
  created() {
    this.unsubscribe = eventBus.subscribe('user-message', this.handleMessage);
  },
  beforeUnmount() {
    this.unsubscribe(); // 防止内存泄漏
  },
  methods: {
    handleMessage(message) {
      console.log('收到消息:', message);
    }
  }
};

// 使用防抖优化频繁事件
function createDebouncedEventBus(delay = 300) {
  const eventBus = new EventBus();
  const timers = {};
  
  return {
    subscribe: eventBus.subscribe.bind(eventBus),
    unsubscribe: eventBus.unsubscribe.bind(eventBus),
    publish(eventType, data) {
      if (timers[eventType]) {
        clearTimeout(timers[eventType]);
      }
      
      timers[eventType] = setTimeout(() => {
        eventBus.publish(eventType, data);
        delete timers[eventType];
      }, delay);
    }
  };
}