Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building an event driven web

1,005 views

Published on

  • Be the first to comment

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⽇日星期六

×