前端mvc探讨及实践
TRANSCRIPT
前端MVC探讨及实践
李燕青 (霸先 )@淘宝
About me
李燕青 (Taobao花名：霸先 ) Twitter:@enmaai Weibo:@enmaai Email:[email protected] 2007-2009 中国雅虎 UED 2009-NOW 淘宝 UED
议题1. Why2. What3. 传统MVC4. 现有前端MVC框架5. 前端MVC6. 湖畔前端MVC实践7. 总结及反思
Why
我创立的Model-View-Controller（MVC）模式作为一个直观的解决方案，针对的是一个一般性的问题，即让用户能够支配自己从多个角度看到的信息。http://heim.ifi.uio.no/~trygver/ Trygue Reenskaughttp://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html 李松峰
MVC引起了的关注之多，让人有点始料不及。有些教材对MVC的改造甚至达到了离经叛道的程度，甚至企图达到让计算机来控制用户的悖谬目的。http://heim.ifi.uio.no/~trygver/ Trygue Reenskaughttp://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html 李松峰
What
MVC的根本目的是在人类头脑中的心智模型和计算机中的数字模型之间架起一座桥梁。理想情况下，MVC的实现方案与用户直接查看和操作领域信息的直觉吻合。假如用户想在不同的上下文中以及 /或者以不同的视角看到相同的模型要素，那MVC就有了它的用武之地。http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.htmlhttp://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
Model
http://fc00.deviantart.net/fs71/f/2010/128/4/8/Model_Walk_by_Natsuki_Suzuhara.gif
Model模型，表示知识。它既可能是一个对象（当然，如果仅一个对象就没多大意思了），也可能是由许多对象组成的结构。
模型及其组成部分是一方，而模型创建者意识中要表现的世界则是另一方，这两方应该一一对应。自然地，模型的每个节点都应该明确对应于问题的一个部分。
模型的所有节点都应该把问题解决到相同的程度，把面向问题的节点（例如，在日程中添加约会活动）与实现细节（例如，用段落展示）混在一起不容易理解，是应该避免的做法。http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
View
http://farm3.static.flickr.com/2505/4018357910_4dc764621e_z.jpg
View视图是模型的（可见的）表现。视图通常会突出模型的某些属性，同时隐藏其他属性。从这个意义上讲，视图就像是一个展示过滤器。
视图依赖于模型（或模型的一部分），通过询问问题的方式从模型中获得用于展示的必要数据。视图通过发送适当的消息，也可以更新模型。这些问题和消息都要按 照模型的术语来传达，由此视图必须得知道自己所要表现的模型，它的属性都有什么语义。（比如说，视图可能会询问模型的标识符，期待返回一个 Text的实 例，但它可能并不认为模型就是 Text类。）
http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.htmlhttp://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
Controller
http://browse.deviantart.com/customization/?q=controller#/d3ijqvu
Controller
控制器是用户与系统之间的纽带。它为用户提供输入，即它会将相关的视图显示在屏幕上适当的位置上（供用户浏览查看）。它为用户提供输出的手段，即它会向用 户展示菜单以及其他能接受命令和数据的控件。控制器接收到上述的用户输出，将其转换为适当的消息，然后再将这些消息传递给一或多个视图。
控制器不应该当作视图来用，例如，不能用控制器来画箭头以连接视图的节点。
从另一方面讲，视图也不应该关心用户输入，比如鼠标操作或按键操作之类的。在任何情况下，都应该能够在控制器里编写一个方法，该方法将消息发送到视图，以便原原本本地再现用户的命令。
http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.htmlhttp://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
传统MVC
http://www.51cto.com/files/uploadimg/20090730/1351240.gif
http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/mvc.html
MVC from Smalltalk(GUI Applications)
http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/mvc.html
MVC from Smalltalk(GUI Applications)
Model(模型 ) “数据模型”（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“模型”有对数据直接访问的权利，例如对数据库的访问。
View(视图 ) 视图层能够实现数据有目的的显示（理论上，这不是必需的）。在视图中一般没有程序上的逻辑。为了实现视图上的刷新功能，视图需要访问它监视的数据模型（Model），因此应该事先在被它监视的数据那里注册。
Controller(控制器 ) 控制器起到不同层面间的组织作用，用于控制应用程序的流程。它处理事件并作出响应。“事件”包括用户的行为和数据模型上的改变。
优点
低耦合性
高重用性和可适用性
较低的生命周期成本
快速的部署可维护性
有利于软件工程化管理
一个模型可以对应多个视图
缺点MVC本身无明确定义，难于
理解模型、视图、控制器分离，
调试不方便
文件增加
不适用于小型项目甚至中型
项目
需要仔细考虑整个应用程序架构
视图对模型的访问可能效率
低
MVC前端框架
Backbone.jsJavaScriptMVC
SproutCoreJamal
trimpath JunctioncorMVC
YUI 3.4.0 App Framework(now PR2)
谁在用MobileMe
阿尔法城
豆瓣说
Eloqua
NPR
Insightfy
TillMill
Menagerie Whiteboard
Turnitin
Sencond Story
DocumentCloud
Basecamp Mobile
Flow
CloudApp
SoundCloud
Quote Roller
Insta-great!
Decide
Bittorent
Fluxiom
Chop
QuietWrite
Tzigla
Substance
前端MVC
http://www.javascriptmvc.com/
Model 负责保存 view 需要的数据以及数据处理逻辑 ( 读写，更新，删除，验证，转换等 )，以及和后端服务器和 View的数据交互
View 负责接收显示Model 提供的数据以及接收用户输入，响应事件，Model更新后及时将更新反馈给用户
Controller 处理业务逻辑、事件逻辑 ( 包括用户触发的事件和model数据发生改变的事件 )和管理 history hash
湖畔前端MVC
湖畔
特点
主体部分使用 js 渲染
单个话题要求可分享，有独立链接
数据实时性要求比较高，数据频繁更新
大量异步操作，需要维护大量的 json数据，部分数据可重复使用
局部 html 频繁渲染
湖畔
Model
使用 localStorage和 obj storage在本地缓存数据
Model使用轮询来实现数据更新，所有异步请求使用一个时间戳，服务器通过时间戳来计算更新的数据，服务器可自由调节轮询间隔
Model
当有本地缓存数据的时候使用本地数据而不向服务器请求，除轮询数据更新接口外，其他任意异步接口均可返回更新数据
Model当有数据更新时，更新本地数据并通知 Controller更新 View
View
通过 View根节点进行事件代理，接收用户输入并反馈给 controller
View
维护 html模板及进行渲染
JavaScript TemplateMustache.js
Template
Resig Micro-Templating
Underscore.js Template
jQuery Template
doT.js&doU.js
YUI substitude
EXT js Template
trimpath(JST)
Haml-js Template
Jade Template
Eco Template
jQote2
and more…
合适的就是最好的
http://www.carlescapdevila.com/?p=3127
Why Mustache?
跨平台、语言 模板统一由前端进行开发和维护 后端只关心数据结构，不用关心
Html，不用关心页面的显示 数据和模板前后端通用
Mustache 并不完美 渲染速度是所有 JavaScript模板里
最慢的 还有个别的 bug，如 {} 认为是 true 要求数据结构为严格的map 格式 无法处理 [[],[]]这样的结构
Controller
管理 history hash及具体业务处理
http://www.hupan.com/home.htm#!topic=129016
Controller
管理 history hash及具体业务处理
未来 使用 long polling和WebSocket来做数据更新
代码结构上的MVC 将 history hash 管理剥离出来统一
管理 使用Web Workers来做一些数据处理
总结和反思 MVC适用于 single-page JavaScript
application(gmail,twitter) ； 简单项目如果使用会导致代码量增多，项目变复
杂 View和 Controller 耦合较高，目前的框架对于 V和 C的定义均不同；
前端可以使用合适的 JavaScript模板引擎来提高工作效率
Rich Javascript Application和 single-page JavaScript Application会越来越多
Thanks
Q&A