浅析MVC与MVVM

2022-12-27 174

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

MVC

MVC是三个字母的缩写，分别是Model（模型）、View（视图）和Controller（控制）

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

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

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

MVVM是Model-View-ViewModel的简写。

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

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

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

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

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

它有两个方向：

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

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

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

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

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

为什么会有MVVM框架？

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

这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，

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

比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。

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

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

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

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

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

总结

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

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

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

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