MVVM、MVC、MVP 的区别

于 2024-12-18 00:00:00 发布
阅读量2.5k 收藏 11
点赞数 26
文章标签： mvc mvp mvvm windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhao_0912/article/details/144177263
版权

MVVM（Model-View-ViewModel）、MVC（Model-View-Controller）和MVP（Model-View-Presenter）是三种常见的软件架构模式，它们在客户端应用开发中被广泛使用。每种模式都有其特定的设计理念和应用场景，下面将详细介绍这三种模式的区别，并通过示例来说明。

1. MVC (Model-View-Controller)

核心思想：

  • Model：负责数据的存储和业务逻辑。
  • View：负责展示数据，用户界面。
  • Controller：负责处理用户输入，更新模型和视图。

工作流程：

  1. 用户与视图进行交互。
  2. 视图将用户的输入传递给控制器。
  3. 控制器根据输入调用模型的方法，更新模型的状态。
  4. 控制器通知视图更新以反映模型的变化。

优点：

  • 分离关注点，使得代码结构清晰。
  • 便于维护和扩展。

缺点：

  • 对于复杂的UI，控制器可能会变得臃肿。
  • 视图和控制器之间的耦合较高。

示例： 假设我们有一个简单的待办事项应用：

// Model
class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  removeTodo(index) {
    this.todos.splice(index, 1);
  }
}

// View
class TodoView {
  constructor(model, controller) {
    this.model = model;
    this.controller = controller;
    this.init();
  }

  init() {
    const addButton = document.getElementById('addButton');
    addButton.addEventListener('click', () => {
      const input = document.getElementById('todoInput');
      this.controller.addTodo(input.value);
      input.value = '';
    });

    const list = document.getElementById('todoList');
    this.model.todos.forEach((todo, index) => {
      const li = document.createElement('li');
      li.textContent = todo;
      const removeButton = document.createElement('button');
      removeButton.textContent = '删除';
      removeButton.addEventListener('click', () => {
        this.controller.removeTodo(index);
      });
      li.appendChild(removeButton);
      list.appendChild(li);
    });
  }

  update() {
    const list = document.getElementById('todoList');
    list.innerHTML = '';
    this.model.todos.forEach((todo, index) => {
      const li = document.createElement('li');
      li.textContent = todo;
      const removeButton = document.createElement('button');
      removeButton.textContent = '删除';
      removeButton.addEventListener('click', () => {
        this.controller.removeTodo(index);
      });
      li.appendChild(removeButton);
      list.appendChild(li);
    });
  }
}

// Controller
class TodoController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  addTodo(todo) {
    this.model.addTodo(todo);
    this.view.update();
  }

  removeTodo(index) {
    this.model.removeTodo(index);
    this.view.update();
  }
}

const model = new TodoModel();
const view = new TodoView(model);
const controller = new TodoController(model, view);

2. MVP (Model-View-Presenter)

核心思想：

  • Model：负责数据的存储和业务逻辑。
  • View：负责展示数据，用户界面。
  • Presenter：作为中间层，处理用户输入，更新模型，并控制视图的显示。

工作流程：

  1. 用户与视图进行交互。
  2. 视图将用户的输入传递给Presenter。
  3. Presenter根据输入调用模型的方法，更新模型的状态。
  4. Presenter更新视图以反映模型的变化。

优点：

  • 分离了视图和业务逻辑。
  • 测试更加容易。

缺点：

  • Presenter可能变得复杂。
  • 视图和Presenter之间的接口需要仔细设计。

示例： 继续上面的待办事项应用，但这次使用MVP模式：

// Model
class TodoModel {
  constructor() {
    this.todos = [];
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  removeTodo(index) {
    this.todos.splice(index, 1);
  }

  getTodos() {
    return this.todos;
  }
}

// View
class TodoView {
  constructor(presenter) {
    this.presenter = presenter;
    this.init();
  }

  init() {
    const addButton = document.getElementById('addButton');
    addButton.addEventListener('click', () => {
      const input = document.getElementById('todoInput');
      this.presenter.addTodo(input.value);
      input.value = '';
    });

    const list = document.getElementById('todoList');
    this.renderTodos(this.presenter.getTodos());
  }

  renderTodos(todos) {
    const list = document.getElementById('todoList');
    list.innerHTML = '';
    todos.forEach((todo, index) => {
      const li = document.createElement('li');
      li.textContent = todo;
      const removeButton = document.createElement('button');
      removeButton.textContent = '删除';
      removeButton.addEventListener('click', () => {
        this.presenter.removeTodo(index);
      });
      li.appendChild(removeButton);
      list.appendChild(li);
    });
  }
}

// Presenter
class TodoPresenter {
  constructor(view, model) {
    this.view = view;
    this.model = model;
  }

  addTodo(todo) {
    this.model.addTodo(todo);
    this.view.renderTodos(this.model.getTodos());
  }

  removeTodo(index) {
    this.model.removeTodo(index);
    this.view.renderTodos(this.model.getTodos());
  }

  getTodos() {
    return this.model.getTodos();
  }
}

const model = new TodoModel();
const view = new TodoView();
const presenter = new TodoPresenter(view, model);
view.presenter = presenter;

3. MVVM (Model-View-ViewModel)

核心思想：

  • Model：负责数据的存储和业务逻辑。
  • View：负责展示数据，用户界面。
  • ViewModel：作为中介者，负责数据绑定、命令处理和状态管理。

工作流程：

  1. 用户与视图进行交互。
  2. ViewModel监听视图的变化，并更新模型。
  3. ViewModel监听模型的变化，并更新视图。

优点：

  • 数据绑定机制简化了视图和模型之间的同步。
  • 降低了视图和模型之间的耦合。

缺点：

  • 可能会增加内存开销。
  • 复杂的数据绑定逻辑可能难以调试。

示例： 继续上面的待办事项应用，但这次使用MVVM模式（使用Vue.js实现）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue MVVM示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
  <div id="app">
    <h1>待办事项</h1>
    <input v-model="newTodo" placeholder="添加新事项" @keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          newTodo: '',
          todos: []
        };
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim()) {
            this.todos.push(this.newTodo);
            this.newTodo = '';
          }
        },
        removeTodo(index) {
          this.todos.splice(index, 1);
        }
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

总结

  • MVC：适用于传统的Web应用，尤其是服务器端渲染的应用。它通过控制器协调模型和视图之间的交互。
  • MVP：适用于需要高度测试性的应用，特别是移动应用。它通过Presenter来分离视图和业务逻辑。
  • MVVM：适用于现代的单页应用（SPA），特别是使用JavaScript框架如Vue、Angular或React构建的应用。它通过数据绑定简化了视图和模型之间的同步。

选择哪种模式取决于具体的应用场景和需求。MVVM由于其简洁的数据绑定机制，在现代前端开发中非常流行。

MVC、MVP和MVVM这三种设计模式的区别
是阿超
07-16 1827
MVC、MVP 和 MVVM 这三种设计模式的区别
一、什么是 mvvm？ MVC、MVP、MVVM三种模式的区别与详解
qq_44849312的博客
08-19 1万+
MVC、MVP、MVVM都是常见的软件架构模式。MVC（Model-View-Controller）架构模式中，将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。Controller负责处理用户交互和调度业务逻辑，View负责显示数据，Model负责数据的存储和逻辑处理。MVP（Model-View-Presenter）架构模式，类似于MVC，但将View和Model的交互逻辑抽象到了Presenter中。
浅谈三大模式(mvc,mvp,mvvm)
08-25
包含一个PPT（mvc->mvp->mvvm的概念，优缺点）,一份源码（观察者模式，事件系统，mvc,mvp,mvvm的demo）
三种架构模式——MVC、MVP、MVVM
热门推荐
zg0601的博客
03-19 3万+
MV系列框架中，M和V分别指Model层和View层，但其功能会因为框架的不同而变化。Model层是数据模型，用来存储数据；View层是视图，展示Model层的数据。虽然在不同的框架中，Model层和View层的内容可能会有所差别，但是其基础功能不变，变的只是数据的传输方式 。本文讲解MVC、MVP和MVVM三种架构模式。
MVC、MVP、MVVM三种模式的介绍及区别（代码例子说明）
bigger_belief的博客
02-05 7643
主要介绍几种架构模式，以及之间的区别
MVC, MVP, MVVM比较以及区别(下)
weixin_33758863的博客
05-14 142
 上一篇得到大家的关注，非常感谢。一些朋友评论中，希望快点出下一篇。由于自己对于这些模式的理解也是有限，所以这一篇来得迟了一些。对于这些模式的比较，是结合自己的理解，一些地方不一定准确，但是只有亮出自己的观点，才能抛砖引玉不是? 欢迎各位拍砖。:) 阅读目录: 四. MVP模式      4.1 MVP的思想      4.2 UI界面接口化      4.3 Present...
MVC、MVP、MVVM模式的区别
何哥的博客
12-05 758
这些模式是依次进化而形成MVC—>MVP—>MVVM。在以前传统的开发模式当中即MVC模式，前端人员只负责Model（数据库）、 View（视图）和 Controller /Presenter/ViewModel（控制器） 当中的View（视图）部分，写好页面交由后端创建渲染模板并提供数据，随着MVVM模式的出现前端已经可以自己写业务逻辑以及渲染模板，后端只负责提供数据即可，前端所能做的事情越来越多。
1.Vue概念
高新园养鸡场
08-21 557
文章目录前端开发发展历程前端开发框架变迁MVCMVPMVVM实例相关资料 前端开发发展历程 原生js（浏览器兼容性差） Jquery等（浏览器兼容性好，频繁操作dom） 前端模板引擎（省去频繁dom操作。处理数据死板，数量大时效率低） Angular.js、vue.js（不用频繁操作dom，数据处理灵活） 前端开发框架变迁 MVC MVC模式最初生根于服务器端的Web开发，后来渐渐能够胜任客户端Web开发，能够满足其复杂性和丰富性。 MVC是Model-View-Controller的缩写，它将应用程
MVC、MVP和MVVM的区别
weixin_44784401的博客
02-09 711
MVC、MVP和MVVM的区别
[转]MVC和MVP的区别
weixin_33908217的博客
06-02 190
[自：http://hi.baidu.com/freezesoul/blog/item/cfb932adcef9c40b4b36d602.html] MVC和MVP的区别2007年08月08日 星期三 上午 09:23 MVC和MVP到底有什么区别呢？ 从这幅图可以看到，我们可以看到在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一...
MVC和MVP的区别
06-23
MVC和MVP的区别
Android：MVC、MVP、MVVM模式的详解
最新发布
Gabo_Summer的博客
11-26 1916
MVC适合小型应用，简单易懂，但在复杂应用中可能导致 Controller 过于臃肿。MVP提供了更好的解耦和可测试性，适合中型应用，但需要更多的代码结构。MVVM是现代 Android 开发的推荐模式，特别是与 Jetpack 组件（如 LiveData 和 ViewModel）结合使用时，能够提供更好的数据管理和 UI 更新机制。选择哪种模式取决于你的应用需求、团队的熟悉程度以及项目的复杂性。
【MVVM模型】——详解（核心三组件及基础代码 ）
qq_63165460的博客
10-17 1176
MVVM （Model-View-ViewModel）是一种用于桌面、移动和Web应用程序开发中构建用户页面的设计模式。 M：模型(Model) V：视图(View) VM：视图模型(ViewModel)
深入探讨：MVC、MVP 和 MVVM 架构模式的工作原理与实践
mmc123125的博客
10-23 1852
通过对 MVC、MVP 和 MVVM 三种架构模式的深入解析，我们了解了它们各自的优缺点、适用场景以及如何在实际开发中进行合理的架构选择。掌握这些架构模式不仅有助于构建结构清晰、易于维护的应用，还能提高开发效率、增强代码的可扩展性。在未来的开发中，架构设计的灵活运用将成为开发者处理复杂项目时的核心竞争力。无论是初学者还是经验丰富的开发者，都应不断探索和实践这些架构模式，从而构建出更高效、稳定的系统。
WPF（五） MVVM模式
这里是阿安的博客
08-25 3789
MVVM是Model-View-ViewModel的简写，MVVM是一种设计模式，类似于比较流行的MVC。这种模式引入的主要的目的就是将前端UI视图（View）和后端逻辑数据（Model）进行分离，从而降低前后端的耦合，提高项目的开发效率和可维护性、可拓展性。......
MVC与MVP的区别
shaoNianABin123的博客
11-02 4400
1.MVC MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：[1] Model（模型）表示应用程序核心（比如数据库记录字段）。 View（视图）显示数据（数据库记录）。 Controller（控制器）处理输入（写入数据库记录）。 MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。 Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。 通常模型对象负责..
小白浅谈MVC与MVP两种架构模式的区别
weixin_45852687的博客
10-20 414
1.MVC和MVP分别是什么？ MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。 简单来说，MVC是一种用来设计与创建Web应用程序的模式。 2.MVC和MVP各自的
MVC、MVVM、MVP的区别
03-20
MVC、MVVM、MVP都是常见的软件架构模式，它们的主要区别在于各自的职责分工和数据流向。MVC模式将应用程序分为三个部分：模型、视图和控制器，其中模型表示应用程序的数据和业务逻辑，视图表示用户界面，控制器负责协调模型和视图之间的交互。MVVM模式在MVC的基础上增加了一个视图模型层，用于将视图和模型之间的数据绑定，使得视图能够自动更新。MVP模式将应用程序分为三个部分：模型、视图和Presenter，其中Presenter负责协调模型和视图之间的交互，将视图和模型解耦。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值