当前位置: 首页 > news >正文

MVC和MVVM的区别

一、MVC

mvc:是一种代码架构设计模式,前端中的mvc最主要的作用就是将视图和数据模型进行分离

(1) 为什么需要 MVC

简单理解:也就是为什么需要将视图和数据模型进行分离

<select id="drinkSelect">
  <option value="coffee">coffee</option>
  <option value="milk">milk</option>
  <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

<script type="text/javascript">
  document.getElementById('drinkSelect').onchange = function() {
    var color
    var colorOfDrink = {
      coffee: 'brown',
      milk: 'white',
      juice: 'orange'
    }
    color = colorOfDrink[this.value]
    document.getElementById('theColorOfDrink').innerHTML = color
  }
</script>

通过上面代码我们会发现视图的操作和数据以及逻辑的处理全部混淆在一起了,当前代码量小,并不会发现太大的问题,但是项目大,代码量多的时候,对于代码的维护会相对复杂,分离后具有如下优势

  • 维护性高 
  • 代码耦合性低 (相互联系较低)
  • 代码可复用

(2)如何设计MVC? 

mvc可以分为三个部分

  • 视图(View):用户界面。
  • 控制器(Controller):业务逻辑
  • 模型(Model):数据保存

V 视图层

页面结构

<select id="drinkSelect">
  <option value="coffee">coffee</option>
  <option value="milk">milk</option>
  <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

dom 操作

showDrinkColor.view = {
  start: function() {
    // 获取select监听change事件
    document.getElementById('drinkSelect').onchange = this.onchange
  },
  onchange: function() {
    // 事件函数 做的逻辑 获取 变化后的数据传递给controller
    showDrinkColor.set(document.getElementById('drinkSelect').value)
  },
  update: function() {
    document.getElementById(
      'theColorOfDrink'
    ).innerHTML = showDrinkColor.model.getDrinkColor()
  }
}

M 数据层

数据和操作数据的逻辑:

showDrinkColor.model = {
  colorOfDrink: {
    coffee: 'brown',
    milk: 'white',
    juice: 'orange'
  },
  selectedDrink: null,
  setDrink: function(drinkName) {
    this.selectedDrink = this.colorOfDrink[this.selectedDrink]
      ? drinkName
      : null
    this.onchange()
  },
  onchange: function() {
    showDrinkColor.view.update()
  },
  getDrinkColor: function() {
    return this.selectedDrink
      ? this.colorOfDrink[this.selectedDrink]
      : 'white'
  }
}

C 控制层

视图和数据模型 进行关联

var showDrinkColor = {
  start: function() {
    // 给视图绑定事件
    this.view.start()
  },
  set: function(drinkName) {
    // 拿到视图传递过来的数据在调用数据模型的方法更新数据
    this.model.setDrink(drinkName)
  }
}
showDrinkColor.start()
  1. 视图发生变化触发 Controller,并且将数据传递给 Controller
  2. Controller 拿到更新的数据触发 model 并将更新的数据传递给 model
  3. model 拿到数据更新数据并且触发 view 视图更新

mvc通信方式流程

所有通信都是单向的。 

为了小伙伴们方便复制查看 合一个完整的

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    mvc写法
    <select id="drinkSelect">
      <option value="coffee">coffee</option>
      <option value="milk">milk</option>
      <option value="juice">juice</option>
    </select>
    <p id="theColorOfDrink"></p>
    <script>
       var showDrinkColor = {
        start: function () {
          // 给视图绑定事件
          this.view.start();
        },
        set: function (drinkName) {
          // 拿到视图传递过来的数据在调用数据模型的方法更新数据
          this.model.setDrink(drinkName);
        },
      };

      showDrinkColor.view = {
        start: function () {
            console.log('监听了');
          // 获取select监听change事件
          document.getElementById("drinkSelect").onchange = this.onchange;
        },
        onchange: function () {
          // 事件函数 做的逻辑 获取 变化后的数据传递给controller
          showDrinkColor.set(document.getElementById("drinkSelect").value);
        },
        update: function () {
          document.getElementById("theColorOfDrink").innerHTML =
            showDrinkColor.model.getDrinkColor();
        },
      };

      showDrinkColor.model = {
        colorOfDrink: {
          coffee: "brown",
          milk: "white",
          juice: "orange",
        },
        selectedDrink: null,
        setDrink: function (drinkName) {
          this.selectedDrink = this.colorOfDrink[this.selectedDrink]
            ? drinkName
            : null;
          this.onchange();
        },
        onchange: function () {
          showDrinkColor.view.update();
        },
        getDrinkColor: function () {
          return this.selectedDrink
            ? this.colorOfDrink[this.selectedDrink]
            : "white";
        },
      };
      showDrinkColor.start();
    </script>
  </body>
</html>

 二、MVVM

MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版,整体和 mvc 差不多,最大的区别就是mvc 是单向的,而 mvvm 是双向的,并且是自动的,也就是数据发生变化自动同步视图,视图发生变化自动同步数据,同时解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View

在这里插入图片描述

    耦合低,是真的低,view 和 model 完全分离

    维护性高,易维护,上手快

    双向绑定:视图发生变化数据自动同步,数据发生变化视图也自动同步

    减少了 dom 的操作,可以更多的关注业务逻辑

相关文章:

  • Python(17):Numpy之array数组的排序
  • Pipenv使用指南:轻量级虚拟环境管理工具详解
  • 【Python】request.session的cookie如何导入aiohttp._cookie_jar
  • 【ShaderGraph】道路引导,小溪流水等UV动画效果
  • JavaEE day9 初识HTTP2
  • 【快速幂】876. 快速幂求逆元
  • 大宇无限将全部业务系统都部署在亚马逊云科技上
  • 每日学术速递1.28
  • 数据库面试题总结
  • 基于PIL和Tesseract的数字计算验证码识别处理思路
  • C技能树-判断语句
  • 【JavaGuide面试总结】Java IO篇
  • 网络编程(2)
  • 带你走进Java8新特性Stream流的小世界
  • 07_linux中断控制
  • java多线程的使用
  • [数据库迁移]-ES集群的部署
  • 计算机相关专业混体制的解决方案(事业编之学校与医院)
  • Go语言基础入门第二章
  • 蓝桥杯2021省赛Python
  • https://app.hackthebox.com/machines/Inject
  • Spring —— Spring简单的读取和存储对象 Ⅱ
  • 渗透测试之冰蝎实战
  • Mybatis、TKMybatis对比
  • Microsoft Office 2019(2022年10月批量许可版)图文教程
  • 《谷粒商城基础篇》分布式基础环境搭建
  • 哈希表题目:砖墙
  • Vue 3.0 选项 生命周期钩子
  • 【车载嵌入式开发】AutoSar架构入门介绍篇
  • 【计算机视觉 | 目标检测】DETR风格的目标检测框架解读