Building an event driven web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Building an event driven web

on

  • 683 views

 

Statistics

Views

Total Views
683
Views on SlideShare
549
Embed Views
134

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 134

http://wd.alibaba-inc.com 134

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building an event driven web Presentation Transcript

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