Enviar búsqueda
Cargar
前端Mvc探讨及实践
•
Descargar como PPTX, PDF
•
3 recomendaciones
•
933 vistas
enmaai
Seguir
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 50
Descargar ahora
Recomendados
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
AngularJS 開發 ASP.NET MVC -twMVC#9
AngularJS 開發 ASP.NET MVC -twMVC#9
twMVC
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
twMVC
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
twMVC
ASP.NET MVC 善用網路資源快速完打造網站
ASP.NET MVC 善用網路資源快速完打造網站
twMVC
ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰 -twMVC#3
ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰 -twMVC#3
twMVC
架構行動式網站(使用 ASP.NET MVC 4.0 -twMVC#6
架構行動式網站(使用 ASP.NET MVC 4.0 -twMVC#6
twMVC
Recomendados
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
AngularJS 開發 ASP.NET MVC -twMVC#9
AngularJS 開發 ASP.NET MVC -twMVC#9
twMVC
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
twMVC
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
MVC實戰分享 分頁與排序相關技巧-tw mvc#13
twMVC
ASP.NET MVC 善用網路資源快速完打造網站
ASP.NET MVC 善用網路資源快速完打造網站
twMVC
ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰 -twMVC#3
ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰 -twMVC#3
twMVC
架構行動式網站(使用 ASP.NET MVC 4.0 -twMVC#6
架構行動式網站(使用 ASP.NET MVC 4.0 -twMVC#6
twMVC
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
Chui-Wen Chiu
輕鬆上手ASP.NET Web API 2.1.2
輕鬆上手ASP.NET Web API 2.1.2
Bruce Chen
Asp.Net MVC 一教就上手
Asp.Net MVC 一教就上手
Study4TW
ASP.NET MVC之實戰架構探討 -twMVC#5
ASP.NET MVC之實戰架構探討 -twMVC#5
twMVC
Vs2013新功能介紹 twMVC#11
Vs2013新功能介紹 twMVC#11
twMVC
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
twMVC
ASP.NET MVC Model 的設計與使用 twMVC#10
ASP.NET MVC Model 的設計與使用 twMVC#10
twMVC
ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
twMVC
Mvvm及其组件体系@杨文坚
Mvvm及其组件体系@杨文坚
正炎 高
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
twMVC
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
twMVC
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
twMVC
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
twMVC
twMVC#22 | 什麼鬼的IOC與DI
twMVC#22 | 什麼鬼的IOC與DI
twMVC
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
twMVC
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
Bruce Chen
MVC MVVM MVVMC
MVC MVVM MVVMC
Ng Hui Qin
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
twMVC
Asp.net mvc 基礎
Asp.net mvc 基礎
Gelis Wu
Más contenido relacionado
La actualidad más candente
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
Chui-Wen Chiu
輕鬆上手ASP.NET Web API 2.1.2
輕鬆上手ASP.NET Web API 2.1.2
Bruce Chen
Asp.Net MVC 一教就上手
Asp.Net MVC 一教就上手
Study4TW
ASP.NET MVC之實戰架構探討 -twMVC#5
ASP.NET MVC之實戰架構探討 -twMVC#5
twMVC
Vs2013新功能介紹 twMVC#11
Vs2013新功能介紹 twMVC#11
twMVC
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
twMVC
ASP.NET MVC Model 的設計與使用 twMVC#10
ASP.NET MVC Model 的設計與使用 twMVC#10
twMVC
ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
twMVC
Mvvm及其组件体系@杨文坚
Mvvm及其组件体系@杨文坚
正炎 高
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
twMVC
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
twMVC
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
twMVC
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
twMVC
twMVC#22 | 什麼鬼的IOC與DI
twMVC#22 | 什麼鬼的IOC與DI
twMVC
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
twMVC
La actualidad más candente
(17)
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
輕鬆上手ASP.NET Web API 2.1.2
輕鬆上手ASP.NET Web API 2.1.2
Asp.Net MVC 一教就上手
Asp.Net MVC 一教就上手
ASP.NET MVC之實戰架構探討 -twMVC#5
ASP.NET MVC之實戰架構探討 -twMVC#5
Vs2013新功能介紹 twMVC#11
Vs2013新功能介紹 twMVC#11
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
ASP.NET MVC 內建驗證擴充與活用技巧 -twMVC#3
ASP.NET MVC Model 的設計與使用 twMVC#10
ASP.NET MVC Model 的設計與使用 twMVC#10
ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
Mvvm及其组件体系@杨文坚
Mvvm及其组件体系@杨文坚
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
輕鬆上手Asp.net web api 2.1-twMVC#14
輕鬆上手Asp.net web api 2.1-twMVC#14
一小時可以打造什麼服務Plus twMVC#18
一小時可以打造什麼服務Plus twMVC#18
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
使用 ASP.NET MVC 開發SPA網站-微軟實戰課程日
twMVC#22 | 什麼鬼的IOC與DI
twMVC#22 | 什麼鬼的IOC與DI
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
開發的效能與效率-twMVC#15
開發的效能與效率-twMVC#15
Similar a 前端Mvc探讨及实践
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
Bruce Chen
MVC MVVM MVVMC
MVC MVVM MVVMC
Ng Hui Qin
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
twMVC
Asp.net mvc 基礎
Asp.net mvc 基礎
Gelis Wu
ASP.NET MVC 快速上手
ASP.NET MVC 快速上手
Study4TW
twMVC#10 | ASP.NET MVC Model 的設計與使用
twMVC#10 | ASP.NET MVC Model 的設計與使用
twMVC
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
栋 王
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
Duran Hsieh
Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘
Zhenhua Tang
ASP.NET MVC 5線上課程(入門前三天)
ASP.NET MVC 5線上課程(入門前三天)
MIS2000 Lab.
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
twMVC
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
twMVC#03 | ASP.NET MVC內建驗證活用與擴充
twMVC#03 | ASP.NET MVC內建驗證活用與擴充
twMVC
twMVC#03 | ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰
twMVC#03 | ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰
twMVC
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
twMVC#13 | ASP.NET MVC 分頁與排序相關技巧
twMVC#13 | ASP.NET MVC 分頁與排序相關技巧
twMVC
ASP.NET MVC简介
ASP.NET MVC简介
Du Wanzhi
ASP.NET MVC The Begining
ASP.NET MVC The Begining
Simon Huang
MVVM.pptx
MVVM.pptx
binlu33
Similar a 前端Mvc探讨及实践
(20)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
MVC MVVM MVVMC
MVC MVVM MVVMC
twMVC#22 | 一個微信專案從0到.000的效能調教之路
twMVC#22 | 一個微信專案從0到.000的效能調教之路
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
Asp.net mvc 基礎
Asp.net mvc 基礎
ASP.NET MVC 快速上手
ASP.NET MVC 快速上手
twMVC#10 | ASP.NET MVC Model 的設計與使用
twMVC#10 | ASP.NET MVC Model 的設計與使用
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘
ASP.NET MVC 5線上課程(入門前三天)
ASP.NET MVC 5線上課程(入門前三天)
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
twMVC#03 | ASP.NET MVC內建驗證活用與擴充
twMVC#03 | ASP.NET MVC內建驗證活用與擴充
twMVC#03 | ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰
twMVC#03 | ASP.NET MVC 新增、查詢、修改、刪除 基本功實戰
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
twMVC#13 | ASP.NET MVC 分頁與排序相關技巧
twMVC#13 | ASP.NET MVC 分頁與排序相關技巧
ASP.NET MVC简介
ASP.NET MVC简介
ASP.NET MVC The Begining
ASP.NET MVC The Begining
MVVM.pptx
MVVM.pptx
前端Mvc探讨及实践
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
21.
22.
优点
23.
缺点
24.
MVC前端框架
25.
26.
谁在用
27.
前端MVC
28.
http://www.javascriptmvc.com/
29.
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
Descargar ahora