1. MVC（Model-View-Controller）
概念介绍： MVC是一种软件架构模式，用于组织应用程序的代码和逻辑。它将应用程序分为三个核心部分：模型（Model）、视图（View）和控制器（Controller）。
- **模型（Model）**负责处理应用程序的数据逻辑和状态。它表示应用程序的数据源，并封装了与数据相关的操作和业务逻辑。
- **视图（View）**负责向用户展示数据并接收用户的输入。它是用户界面的可视化呈现，可以是页面、窗口或其他用户交互形式。
- **控制器（Controller）**充当模型和视图之间的协调者。它接收用户的输入，更新模型的数据，然后将更新后的数据反映到视图上。
举例说明： 以一个简单的登录页面为例，实现MVC架构的方式如下：
- 模型（Model）：定义一个User类，包含用户名和密码等属性，并提供相应的方法来验证用户的登录信息。
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
isValid() {
// 验证用户名和密码是否正确
// 返回 true 或 false
}
}
- 视图（View）：创建一个HTML表单，包含用户名和密码的输入框以及登录按钮。
<form>
<input type="text" id="username">
<input type="password" id="password">
<button id="loginButton">登录</button>
</form>
- 控制器（Controller）：在JavaScript中，监听登录按钮的点击事件，并根据用户输入的值创建一个User对象，并调用User对象的验证方法。
document.getElementById('loginButton').addEventListener('click', function() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var user = new User(username, password);
if (user.isValid()) {
// 登录成功，进行相关操作
} else {
// 登录失败，显示错误信息
}
});
通过以上示例，可以看到模型负责处理数据逻辑，视图负责展示界面，控制器协调两者之间的交互，实现了关注点分离、代码复用和可维护性。
2. MVP（Model-View-Presenter）
概念介绍： MVP是一种软件架构模式，是MVC模式的一个变体，旨在更好地分离视图（View）和模型（Model）并引入一个介于它们之间的主持人（Presenter）。
- **模型（Model）**与MVC模式中的模型类似，负责处理应用程序的数据逻辑和状态。
- **视图（View）**是用户界面的可视化呈现，负责向用户展示数据并接收用户的输入。
- **主持人（Presenter）**是视图和模型之间的桥梁。它接收用户的输入，并根据需要更新模型的数据。它还监听模型的变化，将变化的数据更新到视图上。
举例说明： 以一个待办事项列表应用为例，实现MVP架构的方式如下：
- 模型（Model）：定义一个TodoList类，包含存储待办事项的数组，并提供添加、删除和更新等操作。
class TodoList {
constructor() {
this.todos = [];
}
add(todo) {
// 添加待办事项
}
remove(todo) {
// 删除待办事项
}
update(todo) {
// 更新待办事项
}
}
- 视图（View）：创建一个界面，展示待办事项列表，并提供添加、删除和更新等操作的用户界面。
<div>
<ul id="todoList">
<!-- 待办事项列表 -->
</ul>
<input type="text" id="todoInput">
<button id="addButton">添加</button>
</div>
- 主持人（Presenter）：在JavaScript中，监听视图的事件，例如点击添加按钮、选择列表项等，并根据用户的操作更新模型的数据或刷新视图。
class TodoPresenter {
constructor(model, view) {
this.model = model;
this.view = view;
// 监听视图的事件
this.view.on('add', this.addTodo.bind(this));
this.view.on('remove', this.removeTodo.bind(this));
this.view.on('update', this.updateTodo.bind(this));
// 初始化视图和模型
this.view.render();
}
addTodo() {
// 处理添加待办事项的逻辑，更新模型并刷新视图
}
removeTodo() {
// 处理删除待办事项的逻辑，更新模型并刷新视图
}
updateTodo() {
// 处理更新待办事项的逻辑，更新模型并刷新视图
}
}
通过以上示例，主持人充当了模型和视图之间的协调者，将用户界面的操作转化为对模型的操作，并及时更新视图。
3. MVVM（Model-View-ViewModel）
概念介绍： MVVM是一种软件架构模式，旨在进一步解耦视图（View）和模型（Model）并引入一个独立于视图的视图模型（ViewModel）。
- **模型（Model）**与MVC和MVP模式中的模型类似，负责处理应用程序的数据逻辑和状态。
- **视图（View）**是用户界面的可视化呈现，负责向用户展示数据并接收用户的输入。
- **视图模型（ViewModel）**是视图的抽象表示，它包含了与视图相关的业务逻辑和状态。它将视图需要展示的数据从模型中获取并进行适配和转换，供视图使用。
举例说明： 以一个商品列表应用为例，实现MVVM架构的方式如下：文章来源：https://www.toymoban.com/news/detail-502427.html
- 模型（Model）：定义一个Product类，包含商品的名称、价格等属性，并提供相应的方法来获取和操作商品数据。
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
// 获取商品数据的方法
}
- 视图（View）：创建一个HTML页面，并使用绑定语法将视图的元素与视图模型关联起来。
<div>
<ul>
<li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>
</div>
- 视图模型（ViewModel）：使用框架或库提供的功能，将视图模型绑定到视图上，并提供适配和转换数据的方法。
var viewModel = {
products: [] // 商品数据
};
// 将视图模型绑定到视图上
bind(viewModel, document.getElementById('app'));
// 适配和转换数据的方法
// 可以从模型获取数据，并进行必要的处理
通过以上示例，视图模型负责管理视图所需的数据，并将数据从模型中获取后进行适配和转换，然后传递给视图进行展示。视图的变化会反映到视图模型上，从而实现双向数据绑定。文章来源地址https://www.toymoban.com/news/detail-502427.html
到了这里，关于【软件架构模式——MVC、MVP、MVVM】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[架构之路-195]-《软考-系统分析师》- MVC、MVP、MVVM架构各自的优缺点](https://imgs.yssmx.com/Uploads/2024/02/442014-1.png)
