什么是mvc和mvvm?以及mvc和mvvm的区别

mvvm 和 mvc

mvc

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

为什么需要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>

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

  • 维护性高
  • 代码耦合性低
  • 代码可复用

怎么设计mvc

  • Model:数据层(存数据、改数据)
  • View:视图层(页面展示和dom的操作)
  • Controller:控制视图层和数据层的关联,主要通过监听dom事件

代码改良版:

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视图更新

mvvm

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

在这里插入图片描述

  • 耦合低,是真的低,view和model完全分离
  • 维护性高,易维护,上手快
  • 双向绑定:视图发生变化数据自动同步,数据发生变化视图也自动同步
  • 减少了dom的操作,可以更多的关注业务逻辑
MVC(Model-View-Controller)MVVM(Model-View-ViewModel)是两种常见的前端架构模式。 MVC是一种将应用程序分为三个部分的架构模式:模型(Model)、视图(View)控制器(Controller)。模型负责数据存储业务逻辑,视图负责显示数据,控制器负责协调ModelView之间的交互。 MVVM是一种基于MVC的架构模式,将控制器(Controller)替换为视图模型(ViewModel)。视图模型负责数据绑定业务逻辑处理,将视图模型之间解耦。视图模型将模型数据转换为视图所需的格式,并将用户交互传递给模型。 区别: 1. MVVM模式中的视图模型(ViewModel)与控制器(Controller)的区别:视图模型是一个用于为视图(View)提供数据操作的抽象层,而控制器则是一个用于协调模型(Model)视图(View)之间的交互的抽象层。 2. MVVM模式中,视图模型(ViewModel)通过数据绑定(Data Binding)技术,自动将模型数据与视图(View)同步,使得视图(View)可以直接从视图模型(ViewModel)中获取所需数据,而不需要再从模型(Model)中获取。 3. MVVM模式中,视图模型(ViewModel)还可以拥有一些自己的业务逻辑,使得视图(View)与模型(Model)之间的交互更加灵活高效。 总之,MVVM相比MVC,增加了视图模型(ViewModel)的概念,可以让视图模型之间的耦合度更低,代码更加清晰易于维护。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值