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 实例，然后建立它们之间的事件连接。它不处理渲染细节，也不做业务校验，只做“转发+协调”。
立即学习“Java免费学习笔记（深入）”；
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 的极简模式，有时比手工拼装三件套更可靠。
