浅析MVC与MVVM

简介: 在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVC

MVC是三个字母的缩写,分别是Model(模型)、View(视图)和Controller(控制)

这个模式认为,程序不论简单或复杂,从结构上看,都可以分成三类对象。

所有的页面都可以使用MVC来优化代码结构.

a2a4f45a7adaf25afdc88c1aa764b5a.png

Model

模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型。一旦模型的数据发生变化,模型将通知有关的视图。

// 伪代码示例
Model = {
    data: { 程序需要操作的数据或信息 },
    create: { 增数据 },
    delete: { 删数据 },
    update(data) { 
       Object.assign(m.data, data) //使用新数据替换旧数据
       eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新 
    },
    get:{ 获取数据 } 
}

View

视图view是屏幕上的表示,描绘的是model的当前状态。当模型的数据发生变化,视图相应地得到刷新自己的机会

// 伪代码示例
View = {
    el: 需要刷新的元素,
    html: `<h1>M V C</h1>....显示在页面上的内容`
    init(){
        v.el: 需要刷新的元素
    },
    render(){ 刷新页面 }
}

controller

控制器controller定义用户界面对用户输入的响应方式,起到不同层面间的组织作用,用于控制应用程序的流程,它处理用户的行为和数据model上的改变。

// 伪代码示例
Controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 },
   method() {
      data = 改变后的新数据
      m.update(data)
   },
   autoBindEvents() { 自动绑定事件 }
}EventBus

为什么要用mvc?

Don't Repeat Youself - DRY 原则

代码级别的重复

你把相同的三行代码写了两遍

那么你就应该重构它

页面级别

你把类似的页面做了10遍

那么你就应该相处一个万金油写法

MVC就是一个万金油

所有的页面都可以使用MVC来优化代码结构

不学MVC又怎样

会写出意大利面条式代码,也就是垃圾代码

你将编程外包式程序员

不停重复自己,不懂得抽象

只会调用API,不能提升自己

只会写业务,不会封装,更不会造轮子,更不会加薪

MVVM

b05686072f542bd2318967f3fa907e6.png

MVVM是Model-View-ViewModel的简写。

它本质上就是MVC (Model-View- Controller)的改进版。

即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心,它是连接view和model的桥梁。

它有两个方向:

一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。

实现的方式是:数据绑定。

二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。

实现的方式是:DOM 事件监听。

这两个方向都实现的,我们称之为数据的双向绑定。

为什么会有MVVM框架?

在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,

这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTMLCSS文件,

但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。

比如:angularreactvue。浏览器的兼容性问题已经不再是前端的阻碍。

前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。

当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery

但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。

综上两方面原因,才有了MVVM模式一类框架的出现。

比如vue,通过数据的双向绑定,极大了提高了开发效率。

总结

在MVVM的框架下视图和模型是不能直接通信的。

它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化

然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化

然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。


目录
相关文章
|
5月前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
122 12
|
6月前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
63 0
|
6月前
|
前端开发
MVVM和MVC的原理以及它们的区别
MVVM和MVC的原理以及它们的区别
|
6月前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
129 0
|
24天前
|
前端开发
MVVM是什么?和MVC有何区别呢?
【10月更文挑战第11天】MVVM 和 MVC 都是为了更好地组织和管理软件架构,提高开发效率和代码质量。理解它们的特点和区别,有助于我们在实际开发中做出更合适的选择,并构建出更加优秀的应用程序。
|
24天前
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
5月前
|
设计模式 存储 前端开发
【设计模式】MVC与MVVM详尽解读与实战指南
【设计模式】MVC与MVVM详尽解读与实战指南
872 0
|
6月前
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
5月前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
64 0
|
6月前
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
286 7