MVC

1. 改进的事件机制
+
mvc项目分享
@饭鱼

2. 项目背景

3. http://huabao.jia.tmall.com/huabao/index.htm

6. • KISSY to 1.2
#set($version = "1.2.0")
• 前端mvc
KISSY.use(“mvc”, function(S, mvc){…})
• Common Paganation Components
• 其他一些新技术尝试
CSS Mask、Shadow

9. Get data1
from URL1
Get data2
from URL2

10. S.getScript(url1, function(){
//get data1
S.getScript(url2, function(){
//get data2…
})
});
• callback多级嵌套
• 代码耦合程度高
• 假如数据之间没有前后依赖关系，
那么串行请求就是浪费时间的

11. Data1 Data2
Timeline

12. EventEmmiter
emitter.on(event, listener)
emitter.emit(event, [arg1], [arg2], [...])

13. //事件中心雏形
var EventCenter = S.mix({}, S.EventTarget);
var data1, data2;
EventCenter.on(„dataready‟ , function(){
if(data1 && data2){
//render..
}
});

14. 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.

15. var EventCenter = S.mix({
//用于同时绑定多个事件
„bindAll‟: function(){
},
„unbind‟: function(){
},
„trigger‟:function(evName, data){
}
}, S.EventTarget);

16. 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);
});

17. Data1 Data2 Data3
Data1
Data2
Data3
流水线优化

18. EventCenter可以解决的问题
• 多个事件同时绑定，全部满足时触发
EventCenter.bindAll(„a, b‟, function(a, b){})
• 减少回调函数嵌套
• 通过事件机制解耦复杂的业务逻辑
• 多个异步请求无阻塞（一些场景下）

19. MVC项目分享

20. 1. 前端mvc概述
2. Model/View/Router
3. 家装团购项目
4. Kissy Complier
5. 总结

21. 前端MVC是个啥

22. MVC是个好东西

32. #
•#代表网页中的一个位置
•HTTP请求不包括#
•#后面出现的任何字符，被浏览器解读为位置标识符
•改变#不触发网页重载
•改变#会改变浏览器的访问历史
•window.location.hash读取#值
•onhashchange事件
•Google抓取#的机制

35. Request、hashChange
Router
ItemModel function Index function List ListModel
ListView IndexView

37. KISSY.config({
packages:[
{
name:'TuanGou',
tag:'1',
path:'./'
}
]
});

38. KISSY Module Compiler
TuanGou.combine.js

39. Demo：
http://tuan.jia.daily.tmall.net/tuangou/index.htm#!/label/1

40. 优点
• 不同于传统的Web开发方式
• 前后端彻底分工、代码维护起来更容易
• 模块化更清晰
• 在大多数Web场景下体验更好
缺点
• 前端开发成本增加
• 如考虑SEO后端开发成本也有所增加

41. 个人看法
• MVC不仅仅是一种代码架构方式
• 可以成为多人开发中的一种规范