js mvc 实现
MVC 模式简介
MVC（Model-View-Controller）是一种软件架构模式，将应用程序分为三个核心组件：模型（Model）负责数据逻辑，视图（View）负责展示，控制器（Controller）处理用户输入和协调模型与视图。
JavaScript 实现 MVC 的核心组件
模型（Model）
模型负责管理数据、业务逻辑和规则。通常包含数据获取、存储和验证方法。
class Model {
constructor(data) {
this.data = data;
}
update(data) {
this.data = { ...this.data, ...data };
// 触发数据变更通知
}
getData() {
return this.data;
}
}视图（View）
视图负责渲染用户界面，监听用户交互，但不处理业务逻辑。
class View {
constructor(templateId) {
this.template = document.getElementById(templateId).innerHTML;
}
render(data) {
const compiled = this.template.replace(/{{(\w+)}}/g, (_, key) => data[key]);
document.getElementById('app').innerHTML = compiled;
}
}控制器（Controller）
控制器作为中介，接收用户输入并更新模型或视图。
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
// 绑定模型变更监听
this.model.onUpdate(() => this.view.render(this.model.getData()));
}
handleUserAction(input) {
this.model.update(input); // 触发模型更新
}
}完整实现示例
以下是一个简单的待办事项列表（Todo List）实现：
模型定义
class TodoModel {
constructor() {
this.todos = [];
this.listeners = [];
}
addTodo(text) {
this.todos.push({ text, completed: false });
this.notify();
}
onUpdate(callback) {
this.listeners.push(callback);
}
notify() {
this.listeners.forEach(cb => cb(this.todos));
}
}视图定义
class TodoView {
constructor() {
this.form = document.getElementById('todo-form');
this.list = document.getElementById('todo-list');
}
render(todos) {
this.list.innerHTML = todos.map(todo => `
<li class="${todo.completed ? 'completed' : ''}">
${todo.text}
</li>
`).join('');
}
bindAddTodo(handler) {
this.form.addEventListener('submit', event => {
event.preventDefault();
const input = this.form.querySelector('input');
handler(input.value);
input.value = '';
});
}
}控制器连接
class TodoController {
constructor(model, view) {
this.model = model;
this.view = view;
this.view.bindAddTodo(this.handleAddTodo.bind(this));
this.model.onUpdate(todos => this.view.render(todos));
}
handleAddTodo(text) {
if (text.trim()) {
this.model.addTodo(text);
}
}
}初始化应用
const app = new TodoController(
new TodoModel(),
new TodoView()
);关键注意事项
- 单向数据流：确保数据流动方向为 View → Controller → Model → View
- 事件解耦：使用观察者模式或发布订阅模式实现模型与视图的通信
- 职责分离：避免在视图中包含业务逻辑或在模型中操作DOM
- 现代框架对比：React/Vue等框架虽受MVC启发，但采用更高效的虚拟DOM等机制
扩展方案
对于复杂应用，可考虑以下改进：
- 使用模块化组织代码（ES Modules）
- 引入状态管理库（如Redux）处理跨组件数据
- 实现路由控制器管理不同视图
- 添加中间件机制处理控制器逻辑
以上实现展示了MVC模式在纯JavaScript中的核心思想，实际项目中可根据需求调整架构细节。
