改进的事件机制+

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 Components

• 其他一些新技术尝试CSS Mask、 Shadow

Get data1 from URL1

Get data2 from URL2

S.getScript(url1, function(){//get data1S.getScript(url2, function(){

//get data2…})

});

• callback多级嵌套• 代码耦合程度高• 假如数据之间没有前后依赖关系，那么串行请求就是浪费时间的

Data1 Data2

Timeline

EventEmmiter 

emitter.on(event, listener)

emitter.emit(event, [arg1], [arg2], [...])

//事件中心雏形var EventCenter = S.mix({}, S.EventTarget);

var data1, data2;

EventCenter.on(‘dataready’ , function(){if(data1 && data2){

//render..}

});

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.

var EventCenter = S.mix({//用于同时绑定多个事件‘bindAll’: function(){

},‘unbind’: function(){

},‘trigger’:function(evName, data){

}}, S.EventTarget);

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

Data1 Data2 Data3

Data1

Data2

Data3

流水线优化

EventCenter可以解决的问题

• 多个事件同时绑定，全部满足时触发 EventCenter.bindAll(‘a, b’, function(a, b)

{})

• 减少回调函数嵌套• 通过事件机制解耦复杂的业务逻辑• 多个异步请求无阻塞（一些场景下）

MVC项目分享

1. 前端mvc概述2. Model/View/Router

3. 家装团购项目4. Kissy Complier

5. 总结

前端MVC是个啥

MVC是个好东西

#•#代表网页中的一个位置•HTTP请求不包括#

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

Router

IndexViewListView

function Index function List ItemModel ListModel

Request、 hashChange

KISSY.config({packages:[

{name:'TuanGou',tag:'1',path:'./'

}]

});

KISSY Module Compiler

TuanGou.combine.js

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

• 不同于传统的Web开发方式• 前后端彻底分工、代码维护起来更容易• 模块化更清晰• 在大多数Web场景下体验更好

优点

缺点

• 前端开发成本增加• 如考虑 SEO后端开发成本也有所增加

个人看法

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