在MVC架构JavaScript中实现事件监听器的最佳实践

// view.js
class View {
  constructor() {
    // 构造函数中不直接查询DOM，避免在DOM未就绪时报错
    this.nextQuestionBtn = null; // 稍后在init或bind方法中获取

    // 假设有其他UI元素和渲染方法
    this.questionContainer = document.querySelector(".question-container");
    this.answerOptions = document.querySelector(".answer-options");
  }

  // 渲染问题的方法
  renderQuestion(questionData) {
    if (!this.questionContainer) {
      console.error("Question container not found!");
      return;
    }
    this.questionContainer.innerHTML = `<h2>${questionData.question}</h2>`;
    // ... 渲染答案选项等
    console.log("View: Question rendered:", questionData.question);
  }

  // 提供一个公共方法来绑定“下一题”按钮的事件
  bindNextQuestion(handler) {
    // 确保在绑定事件前获取DOM元素
    this.nextQuestionBtn = document.querySelector(".next-btn");
    if (this.nextQuestionBtn) {
      this.nextQuestionBtn.addEventListener("click", handler);
      console.log("View: Next button event listener bound.");
    } else {
      console.error("View: Next button (.next-btn) not found in the DOM!");
    }
  }

  // ... 其他视图相关的方法
}

// 导出视图的实例，确保只有一个视图实例
export default new View();

// controller.js
import view from './view.js'; // 导入视图实例
// import model from './model.js'; // 假设有模型层

class Controller {
  constructor(viewInstance) {
    this.view = viewInstance;
    // this.model = modelInstance; // 假设传入模型实例

    // 在控制器实例化后，立即调用初始化方法
    this.init();
  }

  // 控制器的初始化方法，负责绑定所有事件
  init() {
    // 将视图的事件绑定方法与控制器的事件处理器关联起来
    // 使用 .bind(this) 确保 handleNextQuestion 方法中的 this 指向 Controller 实例
    this.view.bindNextQuestion(this.handleNextQuestion.bind(this));
    console.log("Controller: Initialization complete, all event handlers bound.");

    // 可以在这里加载并显示初始数据
    // const initialQuestion = this.model.getInitialQuestion();
    // this.view.renderQuestion(initialQuestion);
  }

  // 处理“下一题”按钮点击事件的业务逻辑
  handleNextQuestion() {
    console.log("Controller: Next button clicked! Processing next question...");
    // 示例业务逻辑：
    // 1. 从模型获取下一个问题数据
    // const nextQuestionData = this.model.getNextQuestion();
    // 2. 更新视图以显示新问题
    // this.view.renderQuestion(nextQuestionData);

    // 模拟数据更新
    this.view.renderQuestion({ question: "这是下一个问题？", options: [] });
  }

  // ... 其他业务逻辑方法
}

// 导出控制器类，或直接在入口文件实例化
export default Controller;

// app.js
import Controller from './controller.js';
import view from './view.js';
// import model from './model.js'; // 导入模型实例

// 确保在DOM完全加载后才初始化应用程序
document.addEventListener("DOMContentLoaded", () => {
  console.log("App: DOMContentLoaded event fired. Initializing application...");
  // 实例化控制器，并将视图（和模型）实例传递给它
  new Controller(view /*, model */);
  console.log("App: Controller instantiated and application started.");
});