0
改进的事件机制     + mvc项目分享   @饭鱼
项目背景
http://huabao.jia.tmall.com/huabao/index.htm
•   KISSY to   1.2    #set($version = "1.2.0")•   前端mvc    KISSY.use(“mvc”, function(S, mvc){…})•   Common Paganation Comp...
Get data1   from URL1 Get data2from URL2
S.getScript(url1, function(){     //get data1     S.getScript(url2, function(){          //get data2…     })});       •   ...
Data1              Data2        Timeline
EventEmmiteremitter.on(event, listener)emitter.emit(event, [arg1], [arg2], [...])
//事件中心雏形var EventCenter = S.mix({}, S.EventTarget);var data1, data2;EventCenter.on(„dataready‟ , function(){     if(data1 ...
S.io.jsonp(url1, function(data){      data1 = data;       EventCenter .fire(„dataready‟);});S.io.jsonp(url2, function(data...
var EventCenter = S.mix({     //用于同时绑定多个事件     „bindAll‟: function(){     },     „unbind‟: function(){     },     „trigger...
EventCenter.bindAll(“ev1, ev2, ev3”,      function(data1, data2, data3){            //callback      });S.io.jsonp(url1, fu...
Data1     Data2           Data3Data1 Data2  Data3                  流水线优化
EventCenter可以解决的问题•   多个事件同时绑定,全部满足时触发    EventCenter.bindAll(„a, b‟, function(a, b){})•   减少回调函数嵌套•   通过事件机制解耦复杂的业务逻辑•   ...
MVC项目分享
1. 前端mvc概述2. Model/View/Router3. 家装团购项目4. Kissy Complier5. 总结
前端MVC是个啥
MVC是个好东西
#•#代表网页中的一个位置•HTTP请求不包括#•#后面出现的任何字符,被浏览器解读为位置标识符•改变#不触发网页重载•改变#会改变浏览器的访问历史•window.location.hash读取#值•onhashchange事件•Google抓...
Request、hashChange                        RouterItemModel   function Index       function List   ListModel             Lis...
KISSY.config({     packages:[           {                  name:TuanGou,                  tag:1,                  path:./ ...
KISSY Module CompilerTuanGou.combine.js
Demo:http://tuan.jia.daily.tmall.net/tuangou/index.htm#!/label/1
优点 •   不同于传统的Web开发方式 •   前后端彻底分工、代码维护起来更容易 •   模块化更清晰 •   在大多数Web场景下体验更好缺点 •   前端开发成本增加 •   如考虑SEO后端开发成本也有所增加
个人看法 •   MVC不仅仅是一种代码架构方式 •   可以成为多人开发中的一种规范
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Mvc
Upcoming SlideShare
Loading in...5
×

Mvc

607

Published on

MVC

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
607
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Mvc"

  1. 1. 改进的事件机制 + mvc项目分享 @饭鱼
  2. 2. 项目背景
  3. 3. http://huabao.jia.tmall.com/huabao/index.htm
  4. 4. • KISSY to 1.2 #set($version = "1.2.0")• 前端mvc KISSY.use(“mvc”, function(S, mvc){…})• Common Paganation Components• 其他一些新技术尝试 CSS Mask、Shadow
  5. 5. Get data1 from URL1 Get data2from URL2
  6. 6. S.getScript(url1, function(){ //get data1 S.getScript(url2, function(){ //get data2… })}); • callback多级嵌套 • 代码耦合程度高 • 假如数据之间没有前后依赖关系, 那么串行请求就是浪费时间的
  7. 7. Data1 Data2 Timeline
  8. 8. EventEmmiteremitter.on(event, listener)emitter.emit(event, [arg1], [arg2], [...])
  9. 9. //事件中心雏形var EventCenter = S.mix({}, S.EventTarget);var data1, data2;EventCenter.on(„dataready‟ , function(){ if(data1 && data2){ //render.. }});
  10. 10. S.io.jsonp(url1, function(data){ data1 = data; EventCenter .fire(„dataready‟);});S.io.jsonp(url2, function(data){ data2 = data; EventCenter.fire(„dataready‟);});//… Trigger a same event 2 times.
  11. 11. var EventCenter = S.mix({ //用于同时绑定多个事件 „bindAll‟: function(){ }, „unbind‟: function(){ }, „trigger‟:function(evName, data){ }}, S.EventTarget);
  12. 12. EventCenter.bindAll(“ev1, ev2, ev3”, function(data1, data2, data3){ //callback });S.io.jsonp(url1, function(data){ EventCenter .trigger(„ev1‟, data);});S.io.jsonp(url2, function(data){ EventCenter .trigger(„ev2‟, data);});S.io.jsonp(url3, function(data){ EventCenter .trigger(„ev3‟, data);});
  13. 13. Data1 Data2 Data3Data1 Data2 Data3 流水线优化
  14. 14. EventCenter可以解决的问题• 多个事件同时绑定,全部满足时触发 EventCenter.bindAll(„a, b‟, function(a, b){})• 减少回调函数嵌套• 通过事件机制解耦复杂的业务逻辑• 多个异步请求无阻塞(一些场景下)
  15. 15. MVC项目分享
  16. 16. 1. 前端mvc概述2. Model/View/Router3. 家装团购项目4. Kissy Complier5. 总结
  17. 17. 前端MVC是个啥
  18. 18. MVC是个好东西
  19. 19. #•#代表网页中的一个位置•HTTP请求不包括#•#后面出现的任何字符,被浏览器解读为位置标识符•改变#不触发网页重载•改变#会改变浏览器的访问历史•window.location.hash读取#值•onhashchange事件•Google抓取#的机制
  20. 20. Request、hashChange RouterItemModel function Index function List ListModel ListView IndexView
  21. 21. KISSY.config({ packages:[ { name:TuanGou, tag:1, path:./ } ]});
  22. 22. KISSY Module CompilerTuanGou.combine.js
  23. 23. Demo:http://tuan.jia.daily.tmall.net/tuangou/index.htm#!/label/1
  24. 24. 优点 • 不同于传统的Web开发方式 • 前后端彻底分工、代码维护起来更容易 • 模块化更清晰 • 在大多数Web场景下体验更好缺点 • 前端开发成本增加 • 如考虑SEO后端开发成本也有所增加
  25. 25. 个人看法 • MVC不仅仅是一种代码架构方式 • 可以成为多人开发中的一种规范
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×