本文讨论了基于 YUI3 进行组件开发的方法，涵盖了自定义事件和代码重用的概念。深入介绍了事件工厂的机制以及如何在 web 开发中实现事件监听与绑定。文中还提供了几个示例，演示了如何实现插件的定义、装载和卸载。

1. 基于 YUI3 的组件开发 续 拔赤 [email_address] http://www.uedmagazine.com 2009-12-11

2. 李晶（花名拔赤） 中国雅虎 / 淘宝网前端开发工程师 msn & email: [email_address] Blog: http://www.uedmagazine.com

3. 回顾 组件化的 web 开发 组件的模样 开发一个组件

4. Our Choise?

5. WHY YUI ？

6. 使用原生 javascript 的开发

7. 使用 prototype 的开发

8. 使用 JQuery 的开发

9. 使用 YUI 的开发

10. 自定义事件 代码重用 插件

11. 自定义事件 代码重用 插件

12. javascript 是一种 基于对象（ Object Based ） 和 事件驱动（ Event Driver ） 的编程语言。

13. 当 click 发生的时候执行 foo var foo = new Function; document.onclick = foo;

14. 绑定 foo 回调，等待 click 的发生

15. 事件的细节？

16. 事件的生命周期 事件工厂 事件类型注册 运行时的监听绑定

17. 浏览器是事件工厂

18. 事件工厂生产浏览器事件 Click Mouseover Keydown Keypress Mouseout Blur Load Dbclick Change

19. 面向开发者的 运行时环境 runtime

20. 事件工厂 事件类型注册 监听绑定 浏览器的实现，对开发者不可见 IE/FF/Safari click/mouseover… 宿主元素 a/div/input 发布事件 事件类型 触发回调

21. 事件工厂 事件类型注册 监听绑定 IE/FF/Safari click/mouseover… 宿主元素 a/div/input 发布事件 事件类型 触发回调 document.onclick = callback;

22. 事件监听 监听绑定的实现方法 setter 方法 vs

23. 事件监听 Widget.on(‘trigger’,callback); Widget.setCallback(callback); setter 方法

24. setter 方法 // 点击空白处弹层关闭 document.onclick = function(){ Box.close(); }; // 点击空白处弹层关闭 且 菜单关闭 document.onclick = function(){ Box.close(); Menu.close(); }; 需求增加

25. // 点击空白处弹层关闭 Y.on('click',function(e){ Box.close(); },document); // 点击空白处弹层关闭 Y.on('click',function(e){ Box.close(); },document); // 点击空白处菜单关闭 Y.on('click',function(e){ Menu.close(); },document); 事件监听 需求增加

26. 事件监听 setter 方法

27. YUI3 的自定义事件 // 实现一个三击事件 // 事件工厂 var tripleClickFactory = function(){}; Y.augment(tripleClickFactory, Y.Event.Target); // 事件注册 var tripleClick = new tripleClickFactory('#id'); // 触发回调 tripleClick.fire('tpClick',[s1,s2]); // 监听绑定 tripleClick.subscribe('tpClick', callback); Example: http:// www.uedmagazine.com/test/tripleclick.html

28. 组件的自定义事件 // 事件的定义在组件内完成 // 给分页组件绑定监听 new PAGINATION(node).on(‘trigger’,function(n){ Y.log(n); }); Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html

29. 自定义事件 代码重用 插件

30. YUI3 中的 OOP extend augment clone merge aggregate 类继承 类扩充 对象克隆 对象合并 对象聚合 Function Function Object Object Object

31. Extend( 继承 ) ：方法成员 + 构造 Augment( 扩充 ) ：方法成员 Extend 与 Augment 的区别

32. YUI3 里的掺元类 专门用来被扩充用的 Y.Plugin.Host （插件） Y.Event.Target （事件）

33. 自定义事件 代码重用 插件

34. YUI3 对 plugin 的定位

35. Plugin 的三个要素 小特性、小功能 宿主 可装载，可卸载 Example: http:// www.uedmagazine.com/test/plugin/astro.html Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html

36. Host Plugin

37. Host Plugin Meny meny Plugins

38. Plugin 的定义 // 定义一个插件 var AnchorPlugin = function(){}; AnchorPlugin.NS = 'anchors';

39. Plugin 的装载 // 装载插件 var container = Y.Node.get('#id'); container.plug(AnchorPlugin);

40. 执行插件提供的方法 // 执行插件提供的方法 container.anchors.disable();

41. Plugin 的卸载 //plugin 的卸载 container.unplug(AnchorPlugin);

43. Thank u ~ 拔赤 - 李晶 msn/email:lijing00333@163.com Blog: http://www.uedmagazine.com