什么是MVC模式_JavaScript中如何实现简单的MVC_技术教程

JavaScript中无内置MVC框架，需通过职责分离、事件通信和约定实现：Model封装状态逻辑并触发change事件，View仅渲染与发事件，Controller协调二者且不存状态。

JavaScript 中没有内置的 MVC 框架支持，所谓“实现 MVC”其实是手动划分关注点、建立松耦合的数据流；它不是靠语法特性，而是靠约定和对象职责分离。

Model 负责数据逻辑，不是单纯的数据容器

Model 应该封装状态变更逻辑，比如验证、计算、异步加载，而不是只存 data 字段。直接暴露可变属性（如 model.value = 'xxx'）会绕过业务约束，导致视图不一致。

用 setter 或方法（如 model.updateName(newName)）控制状态变更
变更后触发事件（如 new CustomEvent('change', { detail: this })），避免视图主动轮询
避免在 Model 内部操作 DOM 或引用 View 实例 —— 否则就违反了单向依赖原则

View 只响应状态，不持有 Model 引用

View 的职责是渲染和捕获用户输入，它不该直接调用 model.save() 或读取 model.data。理想情况下，View 只通过事件与外界通信。

绑定事件监听时用 element.addEventListener('click', () => dispatchEvent(new CustomEvent('submit')))
渲染函数接收纯数据（如 render({ name, items })），不传入 Model 实例
不要在 View 里写 model.on('change', ...) —— 这会让 View 知道 Model 存在，应由 Controller 统一桥接

Controller 是唯一知道 Model 和 View 的角色

Controller 初始化时接收 Model 和 View 实例，然后建立它们之间的事件连接。它不处理渲染细节，也不做业务校验，只做“转发+协调”。

class TodoController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    this.view.addEventListener('add', (e) => this.handleAdd(e.detail));
    this.model.addEventListener('change', () => this.view.render(this.model.getState()));
  }

  handleAdd(text) {
    if (text.trim()) this.model.add(text);
  }
}

Controller 不存储业务状态，所有状态必须在 Model 中
View 发出的事件名（如 'add'）应语义化，避免用 DOM 事件名（如 'click'）作为通信协议
若 Model 更新频繁，考虑节流 render 调用，否则可能引发重复重绘

现代 JS 中 MVC 容易被误用的点

用类模拟 MVC 很容易写出“假分层”：View 里调 Model 方法、Controller 里操作 DOM、Model 包含渲染逻辑……这些都会让代码难以测试和复用。

检查是否每个模块都能独立单元测试：Model 能否脱离 DOM 运行？View 能否用 mock 数据渲染？
避免在 Controller 中写条件渲染逻辑（如 if (x) view.showA() else view.showB()）—— 这属于 View 职责
ES6 modules 或构建工具（如 Vite）下，MVC 更适合按功能拆文件（model.js、view.js、controller.js），而非强行塞进一个类

真正在意可维护性的话，重点不在“有没有 MVC”，而在“状态变更路径是否清晰、可追溯”。一个 dispatch + reducer + subscribe 的极简模式，有时比手工拼装三件套更可靠。