前端Mvc探讨及实践
Upcoming SlideShare
Loading in...5
×
 

前端Mvc探讨及实践

on

  • 6,379 views

 

Statistics

Views

Total Views
6,379
Views on SlideShare
2,044
Embed Views
4,335

Actions

Likes
8
Downloads
137
Comments
0

11 Embeds 4,335

http://www.d2forum.org 4306
http://www.itfeed.cn 10
http://cache.baidu.com 9
http://reader.youdao.com 2
http://getpocket.com 2
http://www.d2forum.org} {978743737|||pingback 1
http://www.d2forum.org} {1002140766|||pingback 1
http://www.d2forum.org} {868532427|||pingback 1
http://www.d2forum.org} {165085879||||} "GET 1
http://www.d2forum.org} {940517514|||pingback 1
http://www.chengxuyuans.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • “ I created the Model-View-Controller pattern as an obvious solution to the general problem of giving users control over their information as seen from multiple perspectives. MVC has created a surprising amount of interest. Some texts even use perverted variants for the opposite purpose of making the computer control the user.”
  • “ The essential purpose of MVC is to bridge the gap between the human user's mental model and the digital model that exists in the computer. The ideal MVC solution supports the user illusion of seeing and manipulating the domain information directly. The structure is useful if the user needs to see the same model element simultaneously in different contexts and/or from different viewpoints.” http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
  • “ Models represent knowledge. A model could be a single object (rather uninteresting), or it could be some structure of objects. There should be a one-to-one correspondence between the model and its parts on the one hand, and the represented world as perceived by the owner of the model on the other hand. The nodes of a model should therefore represent an identifiable part of the problem. The nodes of a model should all be on the same problem level, it is confusing and considered bad form to mix problem-oriented nodes (e.g. calendar appointments) with implementation details (e.g. paragraphs).” http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
  • “ A view is a (visual) representation of its model. It would ordinarily highlight certain attributes of the model and suppress others. It is thus acting as a presentation filter. A view is attached to its model (or model part) and gets the data necessary for the presentation from the model by asking questions. It may also update the model by sending appropriate messages. All these questions and messages have to be in the terminology of the model, the view will therefore have to know the semantics of the attributes of the model it represents. (It may, for example, ask for the model's identifier and expect an instance of Text, it may not assume that the model is of class Text.)” http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
  • “ A controller is the link between a user and the system. It provides the user with input by arranging for relevant views to present themselves in appropriate places on the screen. It provides means for user output by presenting the user with menus or other means of giving commands and data. The controller receives such user output, translates it into the appropriate messages and pass these messages on .to one or more of the views. A controller should never supplement the views, it should for example never connect the views of nodes by drawing arrows between them. Conversely, a view should never know about user input, such as mouse operations and keystrokes. It should always be possible to write a method in a controller that sends messages to views which exactly reproduce any sequence of user commands.” http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html

前端Mvc探讨及实践 前端Mvc探讨及实践 Presentation Transcript

  • 李燕青 ( 霸先 )@ 淘宝
    • 李燕青 (Taobao 花名:霸先 )
    • Twitter:@enmaai
    • Weibo:@enmaai
    • Email:freyaoo@gmail.com
    • 2007-2009 中国雅虎 UED
    • 2009-NOW 淘宝 UED
    • Why
    • What
    • 传统 MVC
    • 现有前端 MVC 框架
    • 前端 MVC
    • 湖畔前端 MVC 实践
    • 总结及反思
    • Why
  •  
    • 我创立的 Model-View-Controller ( MVC )模式作为一个直观的解决方案,针对的是一个一般性的问题,即让用户能够支配自己从多个角度看到的信息。
    • MVC 引起了的关注之多,让人有点始料不及。有些教材对 MVC 的改造甚至达到了离经叛道的程度,甚至企图达到让计算机来控制用户的悖谬目的。
    • http://heim.ifi.uio.no/~trygver / Trygue Reenskaug
    • http:// 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.html
    • http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
  • http://heim.ifi.uio.no/~trygver/
  • http://fc00.deviantart.net/fs71/f/2010/128/4/8/Model_Walk_by_Natsuki_Suzuhara.gif
    • 模型,表示知识。它既可能是一个对象(当然,如果仅一个对象就没多大意思了),也可能是由许多对象组成的结构。
    • 模型及其组成部分是一方,而模型创建者意识中要表现的世界则是另一方,这两方应该一一对应。自然地,模型的每个节点都应该明确对应于问题的一个部分。
    • 模型的所有节点都应该把问题解决到相同的程度,把面向问题的节点(例如,在日程中添加约会活动)与实现细节(例如,用段落展示)混在一起不容易理解,是应该避免的做法。
    • http://www.cn-cuckoo.com/2011/06/22/mvc-originals-2454.html
  • http://farm3.static.flickr.com/2505/4018357910_4dc764621e_z.jpg
    • 视图是模型的(可见的)表现。视图通常会突出模型的某些属性,同时隐藏其他属性。从这个意义上讲,视图就像是一个展示过滤器。
    • 视图依赖于模型(或模型的一部分),通过询问问题的方式从模型中获得用于展示的必要数据。视图通过发送适当的消息,也可以更新模型。这些问题和消息都要按 照模型的术语来传达,由此视图必须得知道自己所要表现的模型,它的属性都有什么语义。(比如说,视图可能会询问模型的标识符,期待返回一个 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
  • http://browse.deviantart.com/customization/?q=controller#/d3ijqvu
    • 控制器是用户与系统之间的纽带。它为用户提供输入,即它会将相关的视图显示在屏幕上适当的位置上(供用户浏览查看)。它为用户提供输出的手段,即它会向用 户展示菜单以及其他能接受命令和数据的控件。控制器接收到上述的用户输出,将其转换为适当的消息,然后再将这些消息传递给一或多个视图。
    • 控制器不应该当作视图来用,例如,不能用控制器来画箭头以连接视图的节点。
    • 从另一方面讲,视图也不应该关心用户输入,比如鼠标操作或按键操作之类的。在任何情况下,都应该能够在控制器里编写一个方法,该方法将消息发送到视图,以便原原本本地再现用户的命令。
    • http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html
    • http://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 Java(Web Applications)
  •  
  •  
  •  
    • MVC 前端框架
  •  
  •  
    • 前端 MVC
  • http://www.javascriptmvc.com/
  •  
    • 湖畔前端 MVC
  •  
  •  
  •  
    • 使用 localStorage 和 obj storage 在本地缓存数据
    • 使用轮询来实现数据更新,所有异步请求使用一个时间戳,服务器通过时间戳来计算更新的数据,服务器可自由调节轮询间隔
    • 当有本地缓存数据的时候使用本地数据而不向服务器请求,除轮询数据更新接口外,其他任意异步接口均可返回更新数据
    • 当有数据更新时,更新本地数据并通知 Controller 更新 View
    • 通过 View 根节点进行事件代理,接收用户输入并反馈给 controller
    • 维护 html 模板及进行渲染
  •  
  • 合适的就是最好的 http://www.carlescapdevila.com/?p=3127
    • {{Mustache}}
    • 跨平台、语言
    • 模板统一由前端进行开发和维护
    • 后端只关心数据结构,不用关心 Html ,不用关心页面的显示
    • 数据和模板前后端通用
    • 渲染速度是所有 JavaScript 模板里最慢的
    • 还有个别的 bug ,如 {} 认为是 true
    • 要求数据结构为严格的 map 格式
    • 无法处理 [[],[]] 这样的结构
    • 管理 history hash 及具体业务处理
    http://www.hupan.com/home.htm #!topic=129016
    • 管理 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