Building an Event-driven Web                       谢传贵                     2012.03.3012年3月31⽇日星期六
Agenda               • 事件定义               • 事件编程的演进               • 事件编程实战               • 对事件编程的一些思考12年3月31⽇日星期六
事件的定义               • Anything that happened(or didn’t happen)               • A change in state               • A conditi...
事件的三个层次               • 触发               • 识别               • 事件的上下⽂文12年3月31⽇日星期六
事件编程的演进12年3月31⽇日星期六
long  long  ago...               <input type=”button” onclick=”doSomething();”/>12年3月31⽇日星期六
<input type=”button” onclick=”doSomething();”/>                      button.onclick = doSomething;12年3月31⽇日星期六
<input type=”button” onclick=”doSomething();”/>                      button.onclick = doSomething;          button.addEven...
if(button.addEventListener){        button.addEventListener(‘click’,doSomething,false);     }else if(button.attachEvent){ ...
<input type=”button” onclick=”doSomething();”/>                      button.onclick = doSomething;          button.addEven...
function doSomething(e){                  if(e && e.preventDefault){                     e.preventDefault();              ...
<input type=”button” onclick=”doSomething();”/>                      button.onclick = doSomething;          button.addEven...
YUI2           YAHOO.util.Event.on(button,‘click’,doSomething);               YAHOO.util.Event.preventDefault(e);         ...
jQuery     button.on(‘click’,doSomething)     e.preventDefault()                                      感兴趣,可以去看看jQuery    ...
Custom  Events               button.on(‘myEvent’,doSomething);               button.trigger(‘myEvent’);12年3月31⽇日星期六
App                          Event API               DOM Events          App Events                API for everything with...
事件编程实践12年3月31⽇日星期六
先来理解事件中的两种角色12年3月31⽇日星期六
⽣生产者(Producer)                  提供信息12年3月31⽇日星期六
消费者(Consumer)                  接收信息12年3月31⽇日星期六
Publish-Subscribe                                Consumer1          Producer     Topic    Consumer2         Producer2     ...
先来看一个例子                                    1                                2                                        targe...
 单页面                 N个APP                 通过应用框架来管理                 支持配置按需加载12年3月31⽇日星期六
对于App的要求           • 可维护性           • 可扩展性           • 支持单元测试(部分)           • 高性能           • 尽量少的模块依赖           • App快速接入...
肿么办?               Event-driven!!!12年3月31⽇日星期六
Event-driven  Architecture        Event                   APP          APP       APP      Producers         Event        ...
Example12年3月31⽇日星期六
事件流               通过事件流来解决多个App级联关系12年3月31⽇日星期六
页面打点               一次部署,解决后顾之忧12年3月31⽇日星期六
组件对外的接口        定义事件名称以及传递的数据格式,暴露给外部12年3月31⽇日星期六
事件的管理12年3月31⽇日星期六
使用Event-driven性能怎么样?               查看Event模块源码,只在第一次进行初始化操作,后               续事件查找是在cache中,并且不涉及和DOM交互,               基本事件响...
有思路了么?                                    1                                2                                        target...
优点               • 模块的稳定性增强               • 模块的低耦合度               • 单模块重构成本低               • plugin支持良好               • 易于...
问题和挑战               • 开发人员需要对事件进行抽象,分类和管理               • 需要处理好事件触发顺序               • 对于异步的理解12年3月31⽇日星期六
对事件编程的思考12年3月31⽇日星期六
还是需要我们多去尝试事件方式的编程,才能挖掘           潜在的优点。12年3月31⽇日星期六
谢谢12年3月31⽇日星期六
Upcoming SlideShare
Loading in …5
×

Building an event driven web

985 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
985
On SlideShare
0
From Embeds
0
Number of Embeds
140
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building an event driven web

  1. 1. Building an Event-driven Web 谢传贵 2012.03.3012年3月31⽇日星期六
  2. 2. Agenda • 事件定义 • 事件编程的演进 • 事件编程实战 • 对事件编程的一些思考12年3月31⽇日星期六
  3. 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 immutable12年3月31⽇日星期六
  4. 4. 事件的三个层次 • 触发 • 识别 • 事件的上下⽂文12年3月31⽇日星期六
  5. 5. 事件编程的演进12年3月31⽇日星期六
  6. 6. long  long  ago... <input type=”button” onclick=”doSomething();”/>12年3月31⽇日星期六
  7. 7. <input type=”button” onclick=”doSomething();”/> button.onclick = doSomething;12年3月31⽇日星期六
  8. 8. <input type=”button” onclick=”doSomething();”/> button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false);12年3月31⽇日星期六
  9. 9. if(button.addEventListener){ button.addEventListener(‘click’,doSomething,false); }else if(button.attachEvent){ button.attachEvent(‘click’,doSomething); }12年3月31⽇日星期六
  10. 10. <input type=”button” onclick=”doSomething();”/> button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false); if(button.addEventListener){ /* madness*/ } addEvent(button,‘click’,doSomething);12年3月31⽇日星期六
  11. 11. function doSomething(e){ if(e && e.preventDefault){ e.preventDefault(); } return false; } 每一段代码里都需要进行这样的处理,坑爹啊12年3月31⽇日星期六
  12. 12. <input type=”button” onclick=”doSomething();”/> button.onclick = doSomething; button.addEventListener(‘click’,doSomething,false); if(button.addEventListener){ /* madness*/ } addEvent(button,‘click’,doSomething);12年3月31⽇日星期六
  13. 13. YUI2 YAHOO.util.Event.on(button,‘click’,doSomething); YAHOO.util.Event.preventDefault(e); 规范化的事件订阅 规范化的事件处理12年3月31⽇日星期六
  14. 14. jQuery button.on(‘click’,doSomething) e.preventDefault() 感兴趣,可以去看看jQuery   Event模块源码,会有意想 不到的收获 规范化的事件订阅 规范化的事件处理 context重置为当前DOM12年3月31⽇日星期六
  15. 15. Custom  Events button.on(‘myEvent’,doSomething); button.trigger(‘myEvent’);12年3月31⽇日星期六
  16. 16. App Event API DOM Events App Events API for everything with events12年3月31⽇日星期六
  17. 17. 事件编程实践12年3月31⽇日星期六
  18. 18. 先来理解事件中的两种角色12年3月31⽇日星期六
  19. 19. ⽣生产者(Producer) 提供信息12年3月31⽇日星期六
  20. 20. 消费者(Consumer) 接收信息12年3月31⽇日星期六
  21. 21. Publish-Subscribe Consumer1 Producer Topic Consumer2 Producer2 Consumer3 Topic212年3月31⽇日星期六
  22. 22. 先来看一个例子 1 2 target 3 滚动条滚动到指定位置12年3月31⽇日星期六
  23. 23.  单页面  N个APP  通过应用框架来管理  支持配置按需加载12年3月31⽇日星期六
  24. 24. 对于App的要求 • 可维护性 • 可扩展性 • 支持单元测试(部分) • 高性能 • 尽量少的模块依赖 • App快速接入和下线12年3月31⽇日星期六
  25. 25. 肿么办? Event-driven!!!12年3月31⽇日星期六
  26. 26. Event-driven  Architecture Event APP APP APP Producers Event Event Bus Transport Event Bus Event APP APP APP Consumers12年3月31⽇日星期六
  27. 27. Example12年3月31⽇日星期六
  28. 28. 事件流 通过事件流来解决多个App级联关系12年3月31⽇日星期六
  29. 29. 页面打点 一次部署,解决后顾之忧12年3月31⽇日星期六
  30. 30. 组件对外的接口 定义事件名称以及传递的数据格式,暴露给外部12年3月31⽇日星期六
  31. 31. 事件的管理12年3月31⽇日星期六
  32. 32. 使用Event-driven性能怎么样? 查看Event模块源码,只在第一次进行初始化操作,后 续事件查找是在cache中,并且不涉及和DOM交互, 基本事件响应在0~1ms之间12年3月31⽇日星期六
  33. 33. 有思路了么? 1 2 target 3 滚动条滚动到指定位置12年3月31⽇日星期六
  34. 34. 优点 • 模块的稳定性增强 • 模块的低耦合度 • 单模块重构成本低 • plugin支持良好 • 易于团队协作以及单模块测试12年3月31⽇日星期六
  35. 35. 问题和挑战 • 开发人员需要对事件进行抽象,分类和管理 • 需要处理好事件触发顺序 • 对于异步的理解12年3月31⽇日星期六
  36. 36. 对事件编程的思考12年3月31⽇日星期六
  37. 37. 还是需要我们多去尝试事件方式的编程,才能挖掘 潜在的优点。12年3月31⽇日星期六
  38. 38. 谢谢12年3月31⽇日星期六

×