js mvc实现
MVC 模式基础概念
MVC（Model-View-Controller）是一种设计模式，将应用分为三个核心部分：
- Model：管理数据和业务逻辑。
- View：负责UI展示。
- Controller：处理用户输入，协调Model和View。
实现步骤
定义Model层
Model层负责数据管理和逻辑处理。通常包含数据获取、更新和验证方法。
class TodoModel {
constructor() {
this.todos = [];
}
addTodo(todo) {
this.todos.push(todo);
}
getTodos() {
return this.todos;
}
}创建View层
View层负责渲染UI，监听用户交互事件，但不处理业务逻辑。
class TodoView {
constructor() {
this.app = document.getElementById('app');
}
render(todos) {
this.app.innerHTML = todos.map(todo => `
<div>${todo}</div>
`).join('');
}
bindAddTodo(handler) {
document.getElementById('add-btn').addEventListener('click', () => {
const input = document.getElementById('todo-input');
handler(input.value);
input.value = '';
});
}
}实现Controller层
Controller层作为中介，处理用户输入并更新Model和View。
class TodoController {
constructor(model, view) {
this.model = model;
this.view = view;
this.view.bindAddTodo(this.handleAddTodo.bind(this));
this.updateView();
}
handleAddTodo(todo) {
this.model.addTodo(todo);
this.updateView();
}
updateView() {
this.view.render(this.model.getTodos());
}
}初始化应用
将三者组合起来，完成MVC架构的初始化。
const model = new TodoModel();
const view = new TodoView();
const controller = new TodoController(model, view);进阶优化
使用观察者模式
Model层可以通过观察者模式通知View层更新，减少Controller的协调负担。
class ObservableModel {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class TodoModel extends ObservableModel {
addTodo(todo) {
super.addTodo(todo);
this.notify(this.todos);
}
}分离路由逻辑
在SPA中，可以通过Router类进一步分离Controller的路由职责。
class Router {
constructor(routes) {
this.routes = routes;
window.addEventListener('hashchange', this.route.bind(this));
}
route() {
const path = window.location.hash.slice(1) || '/';
const route = this.routes.find(r => r.path === path);
route.controller();
}
}常见问题解决
避免直接操作DOM
View层应仅通过Controller更新，避免直接在事件监听中修改Model。
// 错误示例
document.getElementById('btn').addEventListener('click', () => {
model.data = 'new value'; // 直接操作Model
});
// 正确示例
view.bindEvent(() => {
controller.updateData('new value'); // 通过Controller协调
});性能优化
对于频繁更新的View，可采用虚拟DOM或差异化渲染。
class View {
render(data) {
const newDOM = generateVirtualDOM(data);
diffAndUpdate(this.app, newDOM);
}
}框架推荐
若需快速实现MVC架构，可考虑以下库：
- Backbone.js：轻量级MVC框架。
- React + Redux：View层与状态管理分离的现代方案。
- Vue.js：天然支持MVVM（MVC变种）。
以上实现方式可根据项目复杂度灵活调整，核心是保持各层职责清晰、单向数据流。
