1. 前端MVC探讨及实践 李燕青(霸先)@淘宝

2. About me 李燕青(Taobao花名：霸先) Twitter:@enmaai Weibo:@enmaai Email:freyaoo@gmail.com 2007-2009 中国雅虎UED 2009-NOW 淘宝UED

3. 议题 Why What 传统MVC 现有前端MVC框架 前端MVC 湖畔前端MVC实践 总结及反思

4. Why

5. TrygveReenskaughttp://heim.ifi.uio.no/~trygver/

6. 我创立的Model-View-Controller（MVC）模式作为一个直观的解决方案，针对的是一个一般性的问题，即让用户能够支配自己从多个角度看到的信息。 http://heim.ifi.uio.no/~trygver/TrygueReenskaug http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html 李松峰

7. MVC引起了的关注之多，让人有点始料不及。有些教材对MVC的改造甚至达到了离经叛道的程度，甚至企图达到让计算机来控制用户的悖谬目的。 http://heim.ifi.uio.no/~trygver/TrygueReenskaug http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html 李松峰

8. What

9. MVC的根本目的是在人类头脑中的心智模型和计算机中的数字模型之间架起一座桥梁。理想情况下，MVC的实现方案与用户直接查看和操作领域信息的直觉吻合。假如用户想在不同的上下文中以及/或者以不同的视角看到相同的模型要素，那MVC就有了它的用武之地。 http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html

10. http://heim.ifi.uio.no/~trygver/

11. Model http://fc00.deviantart.net/fs71/f/2010/128/4/8/Model_Walk_by_Natsuki_Suzuhara.gif

12. Model 模型，表示知识。它既可能是一个对象（当然，如果仅一个对象就没多大意思了），也可能是由许多对象组成的结构。 模型及其组成部分是一方，而模型创建者意识中要表现的世界则是另一方，这两方应该一一对应。自然地，模型的每个节点都应该明确对应于问题的一个部分。 模型的所有节点都应该把问题解决到相同的程度，把面向问题的节点（例如，在日程中添加约会活动）与实现细节（例如，用段落展示）混在一起不容易理解，是应该避免的做法。 http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html

13. View http://farm3.static.flickr.com/2505/4018357910_4dc764621e_z.jpg

14. View 视图是模型的（可见的）表现。视图通常会突出模型的某些属性，同时隐藏其他属性。从这个意义上讲，视图就像是一个展示过滤器。 视图依赖于模型（或模型的一部分），通过询问问题的方式从模型中获得用于展示的必要数据。视图通过发送适当的消息，也可以更新模型。这些问题和消息都要按 照模型的术语来传达，由此视图必须得知道自己所要表现的模型，它的属性都有什么语义。（比如说，视图可能会询问模型的标识符，期待返回一个Text的实 例，但它可能并不认为模型就是Text类。） http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html

15. Controller http://browse.deviantart.com/customization/?q=controller#/d3ijqvu

16. Controller 控制器是用户与系统之间的纽带。它为用户提供输入，即它会将相关的视图显示在屏幕上适当的位置上（供用户浏览查看）。它为用户提供输出的手段，即它会向用 户展示菜单以及其他能接受命令和数据的控件。控制器接收到上述的用户输出，将其转换为适当的消息，然后再将这些消息传递给一或多个视图。 控制器不应该当作视图来用，例如，不能用控制器来画箭头以连接视图的节点。 从另一方面讲，视图也不应该关心用户输入，比如鼠标操作或按键操作之类的。在任何情况下，都应该能够在控制器里编写一个方法，该方法将消息发送到视图，以便原原本本地再现用户的命令。 http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html

17. 传统MVC

18. http://www.51cto.com/files/uploadimg/20090730/1351240.gif

19. MVC from Smalltalk(GUI Applications) http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/mvc.html

20. MVC from Smalltalk(GUI Applications) http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/mvc.html

22. 优点

23. 缺点

24. MVC前端框架

26. 谁在用

27. 前端MVC

28. http://www.javascriptmvc.com/

30. 湖畔前端MVC

31. 湖畔

32. 特点

33. 湖畔

34. Model 使用localStorage和obj storage在本地缓存数据

35. Model 使用轮询来实现数据更新，所有异步请求使用一个时间戳，服务器通过时间戳来计算更新的数据，服务器可自由调节轮询间隔

36. Model 当有本地缓存数据的时候使用本地数据而不向服务器请求，除轮询数据更新接口外，其他任意异步接口均可返回更新数据

37. Model 当有数据更新时，更新本地数据并通知Controller更新View

38. View 通过View根节点进行事件代理，接收用户输入并反馈给controller

39. View 维护html模板及进行渲染

40. JavaScript Template

41. 合适的就是最好的 http://www.carlescapdevila.com/?p=3127

42. View {{Mustache}}

43. Why Mustache? 跨平台、语言 模板统一由前端进行开发和维护 后端只关心数据结构，不用关心Html，不用关心页面的显示 数据和模板前后端通用

44. Mustache并不完美 渲染速度是所有JavaScript模板里最慢的 还有个别的bug，如{}认为是true 要求数据结构为严格的map格式 无法处理[[],[]]这样的结构

45. Controller 管理history hash及具体业务处理 http://www.hupan.com/home.htm#!topic=129016

46. Controller 管理history hash及具体业务处理

47. 未来 使用long polling和WebSocket来做数据更新 代码结构上的MVC 将history hash管理剥离出来统一管理 使用Web Workers来做一些数据处理

48. 总结和反思 MVC适用于single-page JavaScript application(gmail,twitter)； 简单项目如果使用会导致代码量增多，项目变复杂 View和Controller耦合较高，目前的框架对于V和C的定义均不同； 前端可以使用合适的JavaScript模板引擎来提高工作效率 Rich Javascript Application和single-page JavaScript Application会越来越多

49. Thanks

50. Q&A