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.
基于 YUI3 的组件开发 续 拔赤  [email_address] http://www.uedmagazine.com   2009-12-11
<ul><li>李晶(花名拔赤) </li></ul><ul><li>中国雅虎 / 淘宝网前端开发工程师 </li></ul><ul><li>msn & email:  [email_address]   </li></ul><ul><li>B...
回顾 组件化的 web 开发 组件的模样 开发一个组件
Our Choise?
WHY YUI ?
使用原生 javascript 的开发
使用 prototype 的开发
使用 JQuery 的开发
使用 YUI 的开发
<ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
<ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
<ul><li>javascript 是一种 </li></ul><ul><li>基于对象( Object Based ) </li></ul><ul><li>和  事件驱动( Event Driver ) </li></ul><ul><li>...
当 click 发生的时候执行 foo var foo = new Function; document.onclick = foo;
绑定 foo 回调,等待 click 的发生
事件的细节?
事件的生命周期 <ul><li>事件工厂 </li></ul><ul><li>事件类型注册 </li></ul><ul><li>运行时的监听绑定 </li></ul>
浏览器是事件工厂
事件工厂生产浏览器事件 Click Mouseover Keydown Keypress Mouseout Blur Load Dbclick Change
面向开发者的 运行时环境 runtime
<ul><li>事件工厂  </li></ul><ul><li>事件类型注册  </li></ul><ul><li>监听绑定 </li></ul>浏览器的实现,对开发者不可见 IE/FF/Safari  click/mouseover…  宿主...
<ul><li>事件工厂  </li></ul><ul><li>事件类型注册   </li></ul><ul><li>监听绑定 </li></ul>IE/FF/Safari  click/mouseover…  宿主元素 a/div/input...
<ul><li>事件监听 </li></ul>监听绑定的实现方法 setter 方法 vs
<ul><li>事件监听 </li></ul>Widget.on(‘trigger’,callback); Widget.setCallback(callback); setter 方法
<ul><li>setter 方法 </li></ul>// 点击空白处弹层关闭 document.onclick  = function(){ Box.close(); }; // 点击空白处弹层关闭 且 菜单关闭 document.oncl...
// 点击空白处弹层关闭 Y.on('click',function(e){ Box.close(); },document); // 点击空白处弹层关闭 Y.on('click',function(e){ Box.close(); },doc...
<ul><li>事件监听 </li></ul>setter 方法
YUI3 的自定义事件 // 实现一个三击事件 // 事件工厂 var tripleClickFactory = function(){}; Y.augment(tripleClickFactory, Y.Event.Target); // 事...
组件的自定义事件 // 事件的定义在组件内完成 // 给分页组件绑定监听 new PAGINATION(node).on(‘trigger’,function(n){ Y.log(n); }); Example:  http://www.ued...
<ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
YUI3 中的 OOP <ul><li>extend </li></ul><ul><li>augment </li></ul><ul><li>clone </li></ul><ul><li>merge </li></ul><ul><li>agg...
<ul><li>Extend( 继承 ) :方法成员 + 构造 </li></ul><ul><li>Augment( 扩充 ) :方法成员 </li></ul>Extend 与 Augment 的区别
YUI3 里的掺元类 专门用来被扩充用的 <ul><li>Y.Plugin.Host (插件) </li></ul><ul><li>Y.Event.Target (事件) </li></ul>
<ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
YUI3 对 plugin 的定位
Plugin 的三个要素 <ul><li>小特性、小功能 </li></ul><ul><li>宿主 </li></ul><ul><li>可装载,可卸载 </li></ul>Example:  http:// www.uedmagazine.co...
Host Plugin
Host Plugin Meny meny Plugins
Plugin 的定义 // 定义一个插件 var AnchorPlugin = function(){}; AnchorPlugin.NS = 'anchors';
Plugin 的装载 // 装载插件 var container = Y.Node.get('#id'); container.plug(AnchorPlugin);
执行插件提供的方法 // 执行插件提供的方法 container.anchors.disable();
Plugin 的卸载 //plugin 的卸载 container.unplug(AnchorPlugin);
 
Thank u ~ 拔赤 - 李晶 msn/email:lijing00333@163.com Blog: http://www.uedmagazine.com
Upcoming SlideShare
Loading in …5
×

基于yui3的组件开发进阶

2,347 views

Published on

基于yui3的组件开发

Published in: Technology, Business
  • Be the first to comment

基于yui3的组件开发进阶

  1. 1. 基于 YUI3 的组件开发 续 拔赤 [email_address] http://www.uedmagazine.com 2009-12-11
  2. 2. <ul><li>李晶(花名拔赤) </li></ul><ul><li>中国雅虎 / 淘宝网前端开发工程师 </li></ul><ul><li>msn & email: [email_address] </li></ul><ul><li>Blog: http://www.uedmagazine.com </li></ul>
  3. 3. 回顾 组件化的 web 开发 组件的模样 开发一个组件
  4. 4. Our Choise?
  5. 5. WHY YUI ?
  6. 6. 使用原生 javascript 的开发
  7. 7. 使用 prototype 的开发
  8. 8. 使用 JQuery 的开发
  9. 9. 使用 YUI 的开发
  10. 10. <ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
  11. 11. <ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
  12. 12. <ul><li>javascript 是一种 </li></ul><ul><li>基于对象( Object Based ) </li></ul><ul><li>和 事件驱动( Event Driver ) </li></ul><ul><li>的编程语言。 </li></ul>
  13. 13. 当 click 发生的时候执行 foo var foo = new Function; document.onclick = foo;
  14. 14. 绑定 foo 回调,等待 click 的发生
  15. 15. 事件的细节?
  16. 16. 事件的生命周期 <ul><li>事件工厂 </li></ul><ul><li>事件类型注册 </li></ul><ul><li>运行时的监听绑定 </li></ul>
  17. 17. 浏览器是事件工厂
  18. 18. 事件工厂生产浏览器事件 Click Mouseover Keydown Keypress Mouseout Blur Load Dbclick Change
  19. 19. 面向开发者的 运行时环境 runtime
  20. 20. <ul><li>事件工厂 </li></ul><ul><li>事件类型注册 </li></ul><ul><li>监听绑定 </li></ul>浏览器的实现,对开发者不可见 IE/FF/Safari click/mouseover… 宿主元素 a/div/input 发布事件 事件类型 触发回调
  21. 21. <ul><li>事件工厂 </li></ul><ul><li>事件类型注册 </li></ul><ul><li>监听绑定 </li></ul>IE/FF/Safari click/mouseover… 宿主元素 a/div/input 发布事件 事件类型 触发回调 document.onclick = callback;
  22. 22. <ul><li>事件监听 </li></ul>监听绑定的实现方法 setter 方法 vs
  23. 23. <ul><li>事件监听 </li></ul>Widget.on(‘trigger’,callback); Widget.setCallback(callback); setter 方法
  24. 24. <ul><li>setter 方法 </li></ul>// 点击空白处弹层关闭 document.onclick = function(){ Box.close(); }; // 点击空白处弹层关闭 且 菜单关闭 document.onclick = function(){ Box.close(); Menu.close(); }; 需求增加
  25. 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. 26. <ul><li>事件监听 </li></ul>setter 方法
  27. 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. 28. 组件的自定义事件 // 事件的定义在组件内完成 // 给分页组件绑定监听 new PAGINATION(node).on(‘trigger’,function(n){ Y.log(n); }); Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html
  29. 29. <ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
  30. 30. YUI3 中的 OOP <ul><li>extend </li></ul><ul><li>augment </li></ul><ul><li>clone </li></ul><ul><li>merge </li></ul><ul><li>aggregate </li></ul>类继承 类扩充 对象克隆 对象合并 对象聚合 Function Function Object Object Object
  31. 31. <ul><li>Extend( 继承 ) :方法成员 + 构造 </li></ul><ul><li>Augment( 扩充 ) :方法成员 </li></ul>Extend 与 Augment 的区别
  32. 32. YUI3 里的掺元类 专门用来被扩充用的 <ul><li>Y.Plugin.Host (插件) </li></ul><ul><li>Y.Event.Target (事件) </li></ul>
  33. 33. <ul><li>自定义事件 </li></ul><ul><li>代码重用 </li></ul><ul><li>插件 </li></ul>
  34. 34. YUI3 对 plugin 的定位
  35. 35. Plugin 的三个要素 <ul><li>小特性、小功能 </li></ul><ul><li>宿主 </li></ul><ul><li>可装载,可卸载 </li></ul>Example: http:// www.uedmagazine.com/test/plugin/astro.html Example: http://www.uedmagazine.com/test/plugin/pagination-plugin.html
  36. 36. Host Plugin
  37. 37. Host Plugin Meny meny Plugins
  38. 38. Plugin 的定义 // 定义一个插件 var AnchorPlugin = function(){}; AnchorPlugin.NS = 'anchors';
  39. 39. Plugin 的装载 // 装载插件 var container = Y.Node.get('#id'); container.plug(AnchorPlugin);
  40. 40. 执行插件提供的方法 // 执行插件提供的方法 container.anchors.disable();
  41. 41. Plugin 的卸载 //plugin 的卸载 container.unplug(AnchorPlugin);
  42. 43. Thank u ~ 拔赤 - 李晶 msn/email:lijing00333@163.com Blog: http://www.uedmagazine.com

×