浅谈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 相关文章推荐
JQuery小知识
Oct 15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
浅析javascript函数表达式
Feb 10 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python SQL查询并生成json文件操作示例
2018/08/17 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
高等教育专业自荐信范文
2014/03/26 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
信息技术教研组工作总结
2015/08/13 职场文书