浅谈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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue+element表格导出为Excel文件
Sep 26 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
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python二分查找详解
2015/09/13 Python
Python 基础知识之字符串处理
2017/01/06 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
我的小天地教学反思
2014/04/30 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
家长评语怎么写
2014/12/30 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
大学生求职意向书
2015/05/11 职场文书
幼儿园见习总结
2015/06/23 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
《西门豹》教学反思
2016/02/23 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
python Tkinter模块使用方法详解
2022/04/07 Python