如何通过Controller将View返回的数值正确添加到Module的数组中？

你遇到的核心问题是异步回调的返回值无法被外部方法获取——原来的View.addItem里，return num是写在点击事件的回调函数里的，这个回调只有在用户点击按钮时才会执行，而addItem方法本身在执行完addEventListener之后就已经结束了，根本拿不到这个返回值。

要解决这个问题，我们需要让Controller作为中间协调者，让View在获取到数值时主动通知Controller，再由Controller把数值传给Module。具体实现步骤如下：

1. 修改View类，支持回调通知 #

把addItem方法改成接受一个回调函数，当点击按钮获取到数值后，调用这个回调把数值传出去：

export class View {
  addItem(onNumReceived) {
    const plus = document.querySelector('.plus');
    plus.addEventListener('click', () => {
      // 获取.count的内容，注意这里拿到的是字符串
      const numStr = document.querySelector('.count').innerHTML;
      // 调用回调，把数值传递出去
      onNumReceived(numStr);
    });
  }
}

2. 创建Controller类，协调View和Module #

Controller需要同时实例化View和Module，然后把两者的逻辑连接起来：

import { View } from './View.js';
import { Module } from './Module.js';

export class Controller {
  constructor() {
    this.view = new View();
    this.module = new Module();
    // 给View传入回调，处理拿到的数值
    this.view.addItem((numStr) => {
      // 把字符串转成数字（根据需求调整，如果不需要数字可以跳过这步）
      const num = parseInt(numStr, 10);
      if (!isNaN(num)) {
        // 把数值传给Module的addNum方法
        this.module.addNum(num);
        // 可以加个日志验证是否成功
        console.log('数组当前内容：', this.module.num);
      } else {
        console.warn('获取到的不是有效数字，请检查.count元素的内容');
      }
    });
  }
}

3. 初始化Controller #

在你的主入口文件里，页面加载完成后初始化Controller，让整个逻辑跑起来：

import { Controller } from './Controller.js';

document.addEventListener('DOMContentLoaded', () => {
  new Controller();
});

为什么原来的代码行不通？ #

再解释下核心问题：addEventListener的回调是异步执行的——只有当用户点击按钮时才会触发，而addItem方法本身在调用addEventListener之后就立即执行完毕了，所以addItem的返回值永远是undefined，根本拿不到点击时的数值。通过回调的方式，我们让View在数值就绪时主动通知Controller，这才是MVC模式里Controller协调视图和数据层的正确姿势。

内容的提问来源于stack exchange，提问作者Aleksander