浅谈MVC、MVVM的区别
一.概述
MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往能使用多种设计模式。
MVC模式是MVP,MVVM模式的基础,这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model,view相同,不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别,因为MVP好像不是很常用。
二.MVC
简介一下MVC:
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。
如果前端没有框架,只使用原生的html+js,MVC模式可以这样理解。将html看成view;js看成controller,负责处理用户与应用的交互,响应对view的操作(对事件的监听),调用Model对数据进行操作,完成model与view的同步(根据model的改变,通过选择器对view进行操作);将js的ajax当做Model,也就是数据层,通过ajax从服务器获取数据。
三.MVVM
MVVM与MVC最大的区别就是:它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。非常的神奇~
这里我们拿典型的MVVM模式的代表,Vue,来举例
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
这里的html部分相当于View层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,当ViewModel对Model进行更新时,通过数据绑定更新到View。
Vue实例中的data相当于Model层,而ViewModel层的核心是Vue中的双向数据绑定,即Model变化时VIew可以实时更新,View变化也能让Model发生变化。
整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。
四.总结
在学习MVC与MVVM架构模式的过程中,经常会对分层的界限叫不准。比如说不清楚js里到底哪里算Model,哪里算Controller,Vue实例里面Model与ViewModel的严格界限在哪,有时候越想越感觉叫不准。当我从头到尾整理完这两种模式特点的时候,发现这个界限没有那么重要。我觉得重要的是,理解两种模式的基本思想,根据应用需求,选择适合自己业务的框架。
最新文章
- 出操队形(LIS)
- c++从文件中读取特定字符串问题的总结
- xml转换之
- 在IIS站点中Adomd.net集成认证账号问题
- Ibatis.Net 数据库操作(四)
- C#序列化XML至对象
- C++面向对象设计
- HTML5之地理信息应用 获取自己的位置
- hadoop错误org.apache.hadoop.mapred.MapTask$NewOutputCollector@17bda0f2
- 关于什么时候用pop什么时候用dismiss
- 绝对好文C#调用C++DLL传递结构体数组的终极解决方案
- Tomcat启动会遇到的问题部分解决方案
- java文档操作
- Javascript判断数据类型与真假值隐形转换研究
- JS前端验证代码
- Ubuntu 18.04.1安装IntelliJ IDEA
- poj 1113 凸包
- kafka配置项host.name advertised.host.name
- Android开发中常见的设计模式(四)——策略模式
- C/C++中#pragma once的使用