JavaScript自定义事件与组件间通信实践指南

// 错误的示例（基于原问题）
class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent"); // 事件对象在Grid实例上
    // ...
  }
}

class Info {
  constructor(grid, container) {
    this.container = container;
    this.grid = grid;
    this.container.dispatchEvent(this.myEvent); // 错误：Info实例没有myEvent属性
  }
}

// 解决方案一：通过Grid实例引用
class Info {
  constructor(grid, container) {
    this.container = container;
    this.grid = grid;
    // 正确：通过传入的grid实例访问其myEvent属性
    if (this.grid && this.grid.myEvent) {
      this.container.dispatchEvent(this.grid.myEvent);
    }
  }
}

// 错误的示例（基于原问题）
class Grid {
  constructor(container) {
    this.container = container;
    this.myEvent = new Event("myCustomEvent");
    this.container.addEventListener('click', () => {
      // 每次点击都会添加一个新的myCustomEvent监听器
      this.container.addEventListener("myCustomEvent", e => {
        console.log(e);
      });
    });
  }
}

// 解决方案：在构造函数中一次性添加监听器
class Grid {
  constructor(container) {
    this.container = container;
    // 监听器只添加一次
    this.container.addEventListener("myCustomEvent", e => {
      console.log("Grid received myCustomEvent:", e);
    });
    // 假设Grid自身也需要响应点击
    this.container.addEventListener('click', () => {
      console.log("Grid clicked!");
      // 在这里可以派发一个与点击相关的自定义事件，供其他组件监听
      // 例如：this.container.dispatchEvent(new CustomEvent('gridClicked', { detail: { /* some data */ } }));
    });
  }
}

const element = document.createElement('div');
element.dispatchEvent(new Event('myEvent')); // 此时没有监听器
element.addEventListener('myEvent', () => console.log('Event received!'));
// "Event received!" 不会被打印

// HTML 结构示例
// <div class="game-container"></div>
// <div class="info-display"></div>

/**
 * Grid 类：负责游戏区域的交互和事件派发
 */
class Grid {
  constructor(containerElement) {
    this.container = containerElement;
    this.score = 0;
    this.level = 1;

    // 在容器上监听点击事件
    this.container.addEventListener('click', this.handleClick.bind(this));
    console.log('Grid initialized, ready for clicks.');
  }

  handleClick() {
    // 模拟游戏状态更新
    this.score += 10;
    this.level = Math.floor(this.score / 50) + 1;

    console.log(`Grid clicked! Current score: ${this.score}, level: ${this.level}`);

    // 派发一个自定义事件，通知其他组件游戏状态已更新
    // 使用 CustomEvent 携带详细数据
    this.container.dispatchEvent(new CustomEvent('gameStateUpdated', {
      detail: {
        score: this.score,
        level: this.level,
        timestamp: Date.now()
      }
    }));
  }
}

/**
 * Info 类：负责显示游戏信息，监听 Grid 派发的事件
 */
class Info {
  constructor(displayElement, eventTargetElement) {
    this.display = displayElement;
    this.eventTarget = eventTargetElement; // 监听事件的目标元素，通常是Grid的容器

    // 在指定的事件目标上监听 'gameStateUpdated' 事件
    this.eventTarget.addEventListener('gameStateUpdated', this.handleGameStateUpdate.bind(this));
    this.updateDisplay({ score: 0, level: 1 }); // 初始化显示
    console.log('Info initialized, listening for game state updates.');
  }

  handleGameStateUpdate(event) {
    // 从事件的 detail 属性中获取更新的数据
    const { score, level, timestamp } = event.detail;
    console.log(`Info received game state update: Score=${score}, Level=${level} at ${new Date(timestamp).toLocaleTimeString()}`);
    this.updateDisplay({ score, level });
  }

  updateDisplay(data) {
    this.display.innerHTML = `
      <h3>游戏信息</h3>
      <p>分数: ${data.score}</p>
      <p>关卡: ${data.level}</p>
    `;
  }
}

// 实例化组件并建立通信
document.addEventListener('DOMContentLoaded', () => {
  const gameContainer = document.querySelector('.game-container');
  const infoDisplay = document.querySelector('.info-display');

  // 确保 DOM 元素存在，如果不存在则创建
  if (!gameContainer) {
    const div = document.createElement('div');
    div.className = 'game-container';
    div.style.border = '1px solid blue';
    div.style.width = '300px';
    div.style.height = '200px';
    div.style.textAlign = 'center';
    div.style.lineHeight = '200px';
    div.textContent = '点击这里开始游戏';
    document.body.appendChild(div);
    gameContainer = div;
  }

  if (!infoDisplay) {
    const div = document.createElement('div');
    div.className = 'info-display';
    div.style.marginTop = '20px';
    div.style.border = '1px solid green';
    div.style.padding = '10px';
    document.body.appendChild(div);
    infoDisplay = div;
  }

  const gridInstance = new Grid(gameContainer);
  // Info 监听 Grid 容器上的事件
  const infoInstance = new Info(infoDisplay, gameContainer);
});