MVVM软件设计模式_mvvm 软件设计模式

作者：凡人多烦事01 | 2024-05-13 09:41:10

踩

mvvm 软件设计模式

MVVM

MVVM是一种软件设计模式，代表Model-View-ViewModel。

Model（模型）：

代表应用程序的数据和业务逻辑。
负责数据的获取、存储和处理。

View（视图）：

表示用户界面（UI）的可视部分，也就是用户所看到的。
负责将数据从ViewModel中呈现給用户，并将用户输入传递給ViewModel。

ViewModel（视图模型）：

充当View和Model之间的中介，负责处理View的显示逻辑和用户输入。
通常包含应用程序逻辑，处理用户输入，与Model进行交互，准备数据以供View显示。
通过数据绑定机制，ViewModel将数据自动同步到View上。

数据绑定：

MVVM的关键概念，用于自动同步ViewModel和View之间的数据。
当ViewModel的数据发生变化时，View会自动更新以反映这些变化，反之亦然。

MVVM的优点：

分离关注点（Separation of Concerns） ：将UI逻辑（ViewModel）与业务逻辑（Model）分开，使得代码更易于维护和理解。
可测试性（Testability） ：ViewModel通常包含UI逻辑，而这些逻辑是相对容易进行单元测试的。
可重用性（Reusability） ： ViewModel通常是与特定的View无关的，因此可以再不同的View中重用。

应用程序的数据和业务逻辑，指的是应用程序中的核心元素，涵盖了以下方面：

数据：

用户信息：用户的个人信息，例如用户名、电子邮件地址、密码等。
应用程序配置：与应用程序设置和配置相关的数据。
内容数据：应用程序可能需要处理和管理的实际内容，例如文章、图片、视频等。

业务逻辑：

用户身份验证：处理用户登录、注册和身份验证的逻辑。
数据验证：验证用户输入的数据，确保其符合规定的格式和标准。
业务规则：与应用程序的具体业务需求相关的逻辑，例如购物车中商品的计算和处理。
数据处理和转换：将从数据库或其他来源检索的数据转换为应用程序能够使用的格式。
举一个简单的用户注册为例：
数据（Model）：
- 用户信息（例如，用户名、密码、电子邮件地址）存储在数据库中。
- 应用程序的配置信息（例如，默认语言、主题等）。
业务逻辑（Model）：
- 当用户注册时，验证输入的信息是否符合要求（例如，密码强度、电子邮件格式等）。
- 如果验证通过，将用户信息存储到数据库中。
- 处理用户登录的逻辑，比对输入的用户名和密码与数据库中的记录是否匹配。
  这个例子中，Model负责处理用户数据（用户信息和应用程序配置）以及与这些数据相关的业务逻辑（用户身份验证和数据存储）。Model的作用时封装应用程序的核心功能和数据，以便在需要时进行访问和操作。

当我们使用Vue.js时，通常会创建一个Vue实例，它充当MVVM模式中的ViewModel,而Vue框架则版主我们处理数据绑定，将Vue实例中的数据自动同步到视图（DOM）中。
举一个简单的vue例子，解释一下MVVM设计模式基本概念：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue MVVM Example</title>
  <!-- 引入Vue.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <!-- 在视图中使用数据绑定，显示message的值 -->
  <p>{{ message }}</p>
  
  <!-- 在视图中使用绑定的数据来触发方法 -->
  <button @click="changeMessage">Change Message</button>
</div>

<script>
// 创建一个Vue实例
var app = new Vue({
  el: '#app', // 指定挂载点
  data: {
    message: 'Hello, Vue!' // 数据模型
  },
  methods: {
    // 定义一个方法，当按钮被点击时调用
    changeMessage: function() {
      this.message = 'New Message!';
    }
  }
});
</script>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

这个例子中，我们创建了一个Vue实例（ViewModel），通过 el 属性指定了挂载点为 #app，然后使用 data 属性定义了一个名为 message 的数据属性。在视图中，我们使用 {{ message }} 实现了数据绑定，将 message 的值显示在页面上。

同时，我们在视图中使用了一个按钮，通过 @click 属性绑定了 changeMessage 方法。在Vue实例的 methods 中定义了这个方法，当按钮被点击时，它会修改 message 的值，由于数据绑定的存在，视图会自动更新以反映这个变化。

这个例子展示了Vue.js中MVVM模式的关键特征，即通过Vue实例进行数据绑定，实现了视图和数据的自动同步。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/563017