js 实现mvc
实现 MVC 模式的 JavaScript 示例
MVC（Model-View-Controller）是一种设计模式，用于分离应用程序的数据、用户界面和控制逻辑。以下是 JavaScript 实现 MVC 的核心方法：
模型（Model）部分
模型负责管理数据和业务逻辑。通常包含数据操作和事件通知机制。
class Model {
constructor() {
this.data = {};
this.listeners = [];
}
setData(key, value) {
this.data[key] = value;
this.notify(key);
}
getData(key) {
return this.data[key];
}
addListener(listener) {
this.listeners.push(listener);
}
notify(key) {
this.listeners.forEach(listener => listener.update(key));
}
}视图（View）部分
视图负责显示数据和接收用户输入。它订阅模型的变化并更新显示。
class View {
constructor(model, controller) {
this.model = model;
this.controller = controller;
this.element = document.getElementById('app');
this.model.addListener(this);
}
render() {
const data = this.model.getData('message');
this.element.innerHTML = `<div>${data || ''}</div>
<button id="changeBtn">Change Message</button>`;
this.element.querySelector('#changeBtn')
.addEventListener('click', () => this.controller.handleClick());
}
update(key) {
if (key === 'message') {
this.render();
}
}
}控制器（Controller）部分
控制器处理用户输入并更新模型。
class Controller {
constructor(model) {
this.model = model;
}
handleClick() {
this.model.setData('message', 'New Message at ' + new Date().toLocaleTimeString());
}
}初始化应用
将各组件连接起来创建完整应用：
const model = new Model();
const controller = new Controller(model);
const view = new View(model, controller);
view.render();替代实现方案
使用观察者模式简化模型和视图的通信：
// 简化版模型
class SimpleModel {
constructor() {
this._data = {};
this._callbacks = {};
}
on(event, callback) {
this._callbacks[event] = callback;
}
set(key, value) {
this._data[key] = value;
if (this._callbacks[key]) {
this._callbacks[key](value);
}
}
}
// 使用示例
const simpleModel = new SimpleModel();
simpleModel.on('text', value => {
document.getElementById('output').textContent = value;
});
document.getElementById('input').addEventListener('input', (e) => {
simpleModel.set('text', e.target.value);
});使用现代框架的MVC
现代前端框架如React/Vue/Angular已经内置了MVC-like结构：
- React: 组件作为视图，状态作为模型，事件处理作为控制器
- Vue: 数据绑定自动处理模型-视图同步，方法作为控制器
- Angular: 明确的组件(视图)、服务(模型)和组件类(控制器)分离
这些实现展示了如何在纯JavaScript中构建MVC架构，从基础实现到优化版本，以及与现代框架的对比。核心思想始终是分离关注点，使数据管理、用户界面和业务逻辑保持独立。
