纯JavaScript MVC应用：输入框内容同步更新H1失败求助

咱先捋捋哈，从你说的情况和代码片段来看，核心问题就是Model里的数据更新了，但View完全不知道这事儿——MVC模式讲究各司其职，但数据变化得有个通知机制呀！你现在能在Model里看到输入值，但H1没动静，就是因为View没收到“数据变了快更DOM”的信号。

下面给你拆解具体原因，再给你一套修复后的完整代码：

为啥会出这问题？ #

• 你的Model没做事件通知机制：数据改了之后，没触发任何事件告诉View“我变了”
• Controller没在Model更新后主动调用View的渲染方法
• View和Model/Controller之间没形成闭环，输入事件的处理没打通数据到DOM的链路

修复后的完整代码 #

window.onload = function() {
  var model = new Model();
  var view = new View();
  // 让Controller当中间件，把Model和View连起来
  var controller = new Controller(model, view);
};

// Model：管数据，还要能通知别人数据变了
function Model() {
  this.inputText = "zzzzz";
  // 存一下需要通知的对象（比如View）
  this.watchers = [];

  // 更新数据的方法，改完立刻通知所有监听者
  this.updateText = function(newText) {
    this.inputText = newText;
    this.tellWatchers();
  };

  // 加个监听者
  this.addWatcher = function(watcher) {
    this.watchers.push(watcher);
  };

  // 通知所有监听者更新
  this.tellWatchers = function() {
    const self = this;
    this.watchers.forEach(watcher => watcher.render(self.inputText));
  };
}

// View：管DOM渲染和事件绑定，别碰数据
function View() {
  // 先拿到需要操作的DOM元素
  this.inputBox = document.getElementById("input-box");
  this.mainHeading = document.getElementById("main-heading");

  // 专门用来更新H1的方法
  this.render = function(text) {
    this.mainHeading.textContent = text;
  };

  // 给输入框绑事件，把输入内容交给Controller处理
  this.bindInputEvent = function(handler) {
    this.inputBox.addEventListener("input", function(e) {
      handler(e.target.value);
    });
  };
}

// Controller：当中间桥，协调Model和View
function Controller(model, view) {
  // 让View监听Model的变化
  model.addWatcher(view);

  // 页面加载先把默认值渲染出来
  view.render(model.inputText);

  // 把输入框的内容传给Model更新，Model会自动通知View更DOM
  view.bindInputEvent(function(newText) {
    model.updateText(newText);
  });
}

对应的HTML结构要配上：

<input type="text" id="input-box">
<h1 id="main-heading"></h1>

为啥这么改？ #

1. Model层：

   • 加了watchers列表和通知方法，实现了观察者模式——数据一变，立刻告诉所有盯着它的对象
   • 只负责数据管理，不碰DOM，符合MVC的职责分工

2. View层：

   • 只管DOM的事儿：拿元素、渲染H1、绑输入事件
   • 输入事件的处理交给Controller，自己不直接改Model，避免模块耦合

3. Controller层：

   • 把Model和View连起来，让View监听Model的变化
   • 初始化时先渲染默认值，确保页面一开始就有内容
   • 把输入框的内容传给Model更新，Model更新后自动触发View重新渲染

这样整完，输入框里敲啥，H1就会同步显示啥啦，完全符合MVC的分工逻辑。

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