js 实现mvc
MVC 模式简介
MVC（Model-View-Controller）是一种软件设计模式，将应用程序分为三个核心组件：模型（Model）处理数据和业务逻辑，视图（View）负责展示数据，控制器（Controller）作为中介处理用户输入并更新模型和视图。在 JavaScript 中实现 MVC 有助于代码模块化和可维护性。
实现步骤
模型（Model） 模型负责管理数据及其逻辑。通常包含数据的获取、更新和验证。
class Model {
constructor() {
this.data = [];
}
addItem(item) {
this.data.push(item);
}
getItems() {
return this.data;
}
}视图（View） 视图负责渲染用户界面，并将用户操作传递给控制器。
class View {
constructor(controller) {
this.controller = controller;
this.element = document.getElementById('app');
this.element.innerHTML = `
<input type="text" id="input" />
<button id="add">Add</button>
<ul id="list"></ul>
`;
this.bindEvents();
}
bindEvents() {
document.getElementById('add').addEventListener('click', () => {
const input = document.getElementById('input').value;
this.controller.handleAddItem(input);
});
}
render(data) {
const list = document.getElementById('list');
list.innerHTML = data.map(item => `<li>${item}</li>`).join('');
}
}控制器（Controller） 控制器接收用户输入，调用模型更新数据，并通知视图重新渲染。
class Controller {
constructor() {
this.model = new Model();
this.view = new View(this);
}
handleAddItem(item) {
this.model.addItem(item);
this.view.render(this.model.getItems());
}
}初始化应用 创建控制器实例以启动应用。
const app = new Controller();关键点
- 数据流：用户操作 → 控制器 → 模型更新 → 视图渲染。
- 解耦：各组件职责分离，便于单独修改或测试。
- 事件绑定：视图通过回调或事件将用户输入传递给控制器。
通过这种方式，JavaScript 应用可以清晰地分离关注点，提高代码的可维护性和扩展性。
