17370845950

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 的极简模式，有时比手工拼装三件套更可靠。