js实现mvp
MVP（Minimum Viable Product）实现思路
在JavaScript中实现MVP（Model-View-Presenter）模式，关键在于分离数据逻辑（Model）、用户界面（View）和业务逻辑（Presenter）。以下是核心实现方法：
定义Model层
Model负责数据管理和业务逻辑，与View完全解耦。通常包含数据获取、更新和验证等方法。
class UserModel {
constructor() {
this.users = [];
}
addUser(user) {
this.users.push(user);
return this.users;
}
getUsers() {
return this.users;
}
}实现View层
View层负责UI渲染和用户交互事件监听，但不处理业务逻辑。通过接口与Presenter通信。
class UserView {
constructor() {
this.presenter = null;
this.app = document.getElementById('app');
}
setPresenter(presenter) {
this.presenter = presenter;
}
render(users) {
this.app.innerHTML = users.map(user =>
`<div>${user.name}</div>`
).join('');
}
bindAddUser() {
document.getElementById('add-btn').addEventListener('click', () => {
const name = prompt('Enter username:');
this.presenter.onAddUser({ name });
});
}
}构建Presenter层
Presenter作为中间层，处理View的事件并更新Model，再将数据变化反馈给View。
class UserPresenter {
constructor(view, model) {
this.view = view;
this.model = model;
this.view.setPresenter(this);
}
onAddUser(user) {
const updatedUsers = this.model.addUser(user);
this.view.render(updatedUsers);
}
initialize() {
this.view.render(this.model.getUsers());
this.view.bindAddUser();
}
}初始化MVP结构
将三层组合并启动应用：
const model = new UserModel();
const view = new UserView();
const presenter = new UserPresenter(view, model);
presenter.initialize();关键设计原则
- 单向数据流：View → Presenter → Model → View
- 接口隔离：View通过抽象接口与Presenter通信
- 测试友好：Presenter可独立测试，无需依赖真实View
- 被动View：View不主动请求数据，仅响应Presenter指令
扩展建议
- 使用观察者模式实现Model到Presenter的数据变更通知
- 添加DI（依赖注入）容器管理三层依赖关系
- 对复杂交互可拆分多个Presenter和子View
这种模式适合需要长期维护的中大型前端应用，能有效降低各层耦合度。对于简单项目，可简化为MVVM或直接使用现代框架（如React/Vue）的内置状态管理方案。
