基于yui3的组件开发

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

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

4. Our Choise?

5. WHY YUI ？

6. 使用原生 javascript 的开发

7. 使用 prototype 的开发

8. 使用 JQuery 的开发

9. 使用 YUI 的开发

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

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

15. 事件的细节？

17. 浏览器是事件工厂

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

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

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); 事件监听 需求增加

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

34. YUI3 对 plugin 的定位

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