Weitere ähnliche Inhalte Ähnlich wie Building an event driven web Ähnlich wie Building an event driven web (6) 2. Agenda
• 事件定义
• 事件编程的演进
• 事件编程实战
• 对事件编程的一些思考
12年3月31⽇日星期六
3. 事件的定义
• Anything that happened(or didn’t happen)
• A change in state
• A condition that triggers a notification
• An event is always named in the past tense
and is immutable
12年3月31⽇日星期六
4. 事件的三个层次
• 触发
• 识别
• 事件的上下⽂文
12年3月31⽇日星期六
9. if(button.addEventListener){
button.addEventListener(‘click’,doSomething,false);
}else if(button.attachEvent){
button.attachEvent(‘click’,doSomething);
}
12年3月31⽇日星期六
11. function doSomething(e){
if(e && e.preventDefault){
e.preventDefault();
}
return false;
}
每一段代码里都需要进行这样的处理,坑爹啊
12年3月31⽇日星期六
13. YUI2
YAHOO.util.Event.on(button,‘click’,doSomething);
YAHOO.util.Event.preventDefault(e);
规范化的事件订阅
规范化的事件处理
12年3月31⽇日星期六
14. jQuery
button.on(‘click’,doSomething)
e.preventDefault()
感兴趣,可以去看看jQuery
Event模块源码,会有意想
不到的收获
规范化的事件订阅
规范化的事件处理
context重置为当前DOM
12年3月31⽇日星期六
15. Custom Events
button.on(‘myEvent’,doSomething);
button.trigger(‘myEvent’);
12年3月31⽇日星期六
16. App
Event API
DOM Events App Events
API for everything with events
12年3月31⽇日星期六
21. Publish-Subscribe
Consumer1
Producer Topic Consumer2
Producer2 Consumer3
Topic2
12年3月31⽇日星期六
22. 先来看一个例子
１
２
target
３ 滚动条滚动到指定位置
12年3月31⽇日星期六
23. 单页面
Ｎ个APP
通过应用框架来管理
支持配置按需加载
12年3月31⽇日星期六
24. 对于App的要求
• 可维护性
• 可扩展性
• 支持单元测试(部分)
• 高性能
• 尽量少的模块依赖
• App快速接入和下线
12年3月31⽇日星期六
25. 肿么办?
Event-driven!!!
12年3月31⽇日星期六
26. Event-driven Architecture
Event
APP APP APP
Producers
Event Event Bus
Transport Event Bus
Event APP APP APP
Consumers
12年3月31⽇日星期六
28. 事件流
通过事件流来解决多个App级联关系
12年3月31⽇日星期六
29. 页面打点
一次部署,解决后顾之忧
12年3月31⽇日星期六
30. 组件对外的接口
定义事件名称以及传递的数据格式，暴露给外部
12年3月31⽇日星期六
32. 使用Event-driven性能怎么样?
查看Event模块源码,只在第一次进行初始化操作,后
续事件查找是在cache中,并且不涉及和DOM交互,
基本事件响应在0~1ms之间
12年3月31⽇日星期六
33. 有思路了么?
１
２
target
３ 滚动条滚动到指定位置
12年3月31⽇日星期六
34. 优点
• 模块的稳定性增强
• 模块的低耦合度
• 单模块重构成本低
• plugin支持良好
• 易于团队协作以及单模块测试
12年3月31⽇日星期六
35. 问题和挑战
• 开发人员需要对事件进行抽象,分类和管理
• 需要处理好事件触发顺序
• 对于异步的理解
12年3月31⽇日星期六
