浅谈JavaScript前端开发的MVC结构与MVVM结构


Posted in Javascript onJune 03, 2016

MVC
Model?View?Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式;Model包含应用的数据和业务逻辑;Controller负责把用户的输入,转换为命令传递给Model和View;这是维基百科的解释;
这种模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作时设计的,刚开始叫做Model-View-Controller-Editor;后来通过《Design Patterns: Elements of Reusable Object-Oriented Software》这本书的深入介绍,才使得mvc彻底流行开来;
理解组成MVC三部分的职责,以及现有的这些javascript框架为我们提供了什么,才能够使我们更好的使用这些框架。下面我们先通关过组成MVC的三个部分来学习下每部分的职责是什么【以backbone为例给出示范代码】。
Model
Model管理应用的数据。当model数据发生改变的时候,会通知它的监听者【可能是view】,收到通知后,监听者会做相应的变化。

浅谈JavaScript前端开发的MVC结构与MVVM结构

View
View是当前状态的model的视觉展现,view会观察模型的变化,当模型改变的时候被通知,同时允许view来更新自己。一般情况下我们会在view中使用模版引擎渲染model;

浅谈JavaScript前端开发的MVC结构与MVVM结构

Controllers
Controllers是位于models和views的之间的调解人,它的工作是当model改变时来更新view和当用户操作view时来更新Model。

浅谈JavaScript前端开发的MVC结构与MVVM结构

javascipt mvc框架对比
不同的人对比方法不一样,关键看你关注什么什么地方:
1.如果你比较关注框架的URL路由,数据存储,视图实现等细节,可以重点关注这里,javascript宝座:框架论剑;
2.如果你比较关注框架的具体实例,这里有一个开源项目是专门对同一个demo采用不同的javascript mvc框架实现,可以非常明确定的看出每种框架在具体应用上的差别,具体 实现在这里,TodoMVC官方站点
MVC给我们带来的好处:
1.易于维护
2.模型视图的解耦,意味着可以对业务逻辑更好的进行单元测试
3.代码能够更好的重用
4.模块化的开发能够使分工更加明确,一部分人专注业务逻辑,一部分人专注用户界面。
5.回顾了经典的mvc模型,我们明白了应用中分层的概念以及每层的职责,同时也应该能够鉴别所有的javascript mvc框架与我们所解释的经典的mvc模型有什么差别。这样的话我们在选择mvc框架时就应该应该重点关注models,views,controller具体怎么实现的,甚至于具体代码怎么实现,才能够帮助我们更好的选择最适用与我们的javascript mvc框架。 

MVVM
MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverlight 和 t ZK framework,Adobe Flex。
对这种模式的实现,大部分都是通过在view层声明数据绑定来和其他层分离的,这样就方便了前端开发人员和后端开发人员 的分工,前端开发人员在html标签中写对viewmodel的绑定数据,model和viewmodel是后端开发人员通过开发应用的逻辑来维护这两层。
最近几年,mvvm模式在javascript中开始有人实现,目前比较成熟的框架有KnockoutJS, Kendo MVVM和Knockback.js,下面我们就以KnockoutJS为例看下MVVM模式中个部分的具体职责和实例代码,同时理解使用这种模式开发的优点和缺点。
Model
同其他的mv*家族成员一样,Model代表特定领域的数据或者应用所需的数据,一个典型的特定领域的数据如用户信息【用户名,头像,email,电话】,或者一首音乐的信息【歌曲名,发行年份,专辑】;
Model仅仅关注数据信息,不关心任何行为;她不格式化数据或者影响数据在浏览器中的展现,这些不是他的职责;格式化数据是view层的任务,同时业务逻辑层被封装在viewmodel中,用来和model进行交互。
在Model层做的一个比较意外的行为是对数据的验证,比如当用户输入email的时候,判断email的格式是否正确。
在KnockoutJS中,Model基本是按照上面的定义来实现的,但是会有通过ajax调用服务器服务来进行读写Model数据。  

浅谈JavaScript前端开发的MVC结构与MVVM结构

View
View是指应用中和用户直接交互的部分,他是一个交互式的UI来表示ViewModel的状态,View被认为是主动的,而不是被动的?这句话的意思是说被动的View在应用中不关心model的领域,model的领域在controller中维护;MVVM的主动式的View包含数据绑定,事件和需要理解model和viewmodel的行为,尽管这些行为可以和属性对应,view仍然需要响应viewmodel的事件,同时View不负责控制状态。
KnockoutJS的view层就是一个简单的html文档,它里面会有关联到viewmodel的数据声明,同时KnockoutJS的view层显示从ViewModel中获取的数据,传递命令给viewmodel,并且更新viewmodel改变的状态。

浅谈JavaScript前端开发的MVC结构与MVVM结构
ViewModel
可以认为ViewModel是一个专门用于数据转换的Controller,它可以把Model中的信息转换为View中的信息,同时从View专递命令给Model;
从这个意义上来说,ViewModel看上去更像一个Model,但是它控制着View的很多显示逻辑,同时ViewModel也暴漏一些方法用来维护view的状态,根据View的行为和事件来更新model;
综上,ViewModel位于UI层的后面,暴漏数据给View,可以认为是View层的数据和行为的源;
KnockoutJS把ViewModel解释为数据的展现和表现在UI上的行为,他不是ui需要持久化的数据模型,但是他可以持有用户存储的数据;Knockout的 ViewModels是采用javascript对象实现的,不用关心html标签,这种抽象的方法可以使它们的实现保持简单。

浅谈JavaScript前端开发的MVC结构与MVVM结构

优点:
1.MVVM使并行开发更加容易,使前端开发和后端开发人员互不影响。
2.抽象化View层,减少了代码中的业务逻辑
3.ViewModel比事件驱动更容易测试
4.ViewModel的测试不用关心uI的自动化和交互
缺点:
1.对于简单的ui,使用MVVM有点太重
2.声明式的数据绑定不利于调试,因为命令式的代码可以和容易的设置断点,这种模式就不利于设置这样的断点
3.在不挑剔(non-trivial)的应用里数据绑定可以创建大量的簿记(book-keeping)。你也不想结束于绑定比被绑定的对象更复杂的情况。
4.在大的应用中,在获取大量的概要(generalization)前很难设计视图-模型层

Javascript 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
AngularJS执行流程详解
Feb 17 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
深入理解JavaScript内置函数
Jun 03 #Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 #Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 #Javascript
浅谈JavaScript 浏览器对象
Jun 03 #Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 #Javascript
JS中使用变量保存arguments对象的方法
Jun 03 #Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 #Javascript
You might like
非常不错的一个javascript 类
2006/11/07 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
python如何对链表操作
2020/10/10 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
高一语文教学反思
2016/02/16 职场文书