基于YUI3的组件开发

2,996 views

Published on

基于YUI3的组件开发

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,996
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
104
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

基于YUI3的组件开发

  1. 1. 基于 YUI3 的组件开发 拔赤 [email_address] http://www.uedmagazine.com 2009-11-20
  2. 2. 组件化的 web 开发
  3. 3. 组件化的 web 开发 <ul><li>项目中我们关注的是如何组装这些颗粒化的组件,而不用花费精力去考究每个组件黑盒内的实现。从而使得项目开发更加高效。 </li></ul>
  4. 4. 组件化的 web 开发 续
  5. 5. YUI2.x 的组件
  6. 6. YUI2.x 的组件 续
  7. 7. YUI3.x 的组件?
  8. 8. YUI3.x 的组件? 续 <ul><li>YUI3 来势汹汹,但 YUI3 还未有太多 widget 可用,我们需要手动开发组件。 </li></ul>
  9. 9. 组件的模样
  10. 10. 组件的模样 <ul><li>高内聚,低耦合 </li></ul><ul><li>组件 -> 不依赖环境 </li></ul><ul><li>插件 -> 需要宿主环境 </li></ul>
  11. 11. 进一步看组件的模样 <ul><li>只对外暴露接口,供外界调用 </li></ul><ul><li>http://www.uedmagazine.com/test/call/Noname2.html </li></ul>
  12. 12. 进一步看组件的模样 续 <ul><li>组件需要初始化 ( 构造器 ) why ? </li></ul><ul><li>依赖的子组件、库、皮肤 </li></ul><ul><li>http://www.uedmagazine.com/test/tbrr.html </li></ul><ul><li>组件实例可被修改(重新初始化?) </li></ul><ul><li>http://www.uedmagazine.com/test/tbrr.html </li></ul>
  13. 13. 再进一步看组件的模样
  14. 14. 再进一步看组件的模样 续 <ul><li>开发者需要关注的三部分 </li></ul><ul><li>http://www.uedmagazine.com/test/tbrr.html </li></ul><ul><li>http://www.uedmagazine.com/test/pagination-2.html </li></ul><ul><li>http://www.uedmagazine.com/test/call/Noname2.html </li></ul><ul><li>http://www.uedmagazine.com/test/box/msg.html </li></ul>
  15. 15. 再进一步看组件的模样 续 <ul><li>Module ( data ) -> 数据 不确定 </li></ul><ul><li>View -> UI 皮肤 半确定 </li></ul><ul><li>Controller -> 交互和组件逻辑 确定 </li></ul>
  16. 16. 设计 & 开发一个组件
  17. 17. 组件的设计原则 <ul><li>组件源于项目而高于项目 -> 有意义的组件 </li></ul><ul><li>不对使用环境进行假设 -> 可重用的组件 </li></ul><ul><li>容易理解的接口、参数 -> 易用的组件 </li></ul><ul><li>完善的黑盒中的交互 -> 优质健壮的组件 </li></ul>
  18. 18. 组件的开发原则 <ul><li>配置项的优先级 </li></ul><ul><li>尽可能少的类 </li></ul><ul><li>源码可扩展 </li></ul>
  19. 19. 配置项的优先级 <ul><li>基础配置 </li></ul><ul><li>缺省配置 </li></ul><ul><li>必填的配置 </li></ul>
  20. 20. 配置项的优先级 续 <ul><li>基础配置,项目中确定下来即不可修改 </li></ul>YAHOO.CN.msg = { isShowMod: true , isHiddenScroll: true , isOpenDrag: false , //… }; Example:YAHOO 关系弹出框组件
  21. 21. 配置项的优先级 续 <ul><li>缺省配置,参数为空的默认值 </li></ul><ul><li>T.tbwidget.calendar.prototype = { </li></ul><ul><li>buildParam:function(o){ </li></ul><ul><li>var that = this; </li></ul><ul><ul><ul><ul><ul><li>var o = o || {}; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>that.date = o.date || new Date(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>that.selectedate = o.selectedate || that.date; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>that.duration = o.duration || 0.9; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>that.easing = o.easing || Y.Easing.elasticOut; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>that.closeable= o.closeable || true; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>return this; </li></ul></ul></ul></ul></ul><ul><li>}, </li></ul><ul><li>//… </li></ul><ul><li>}; </li></ul>Example: 日历组件 http://www.uedmagazine.com/test/call/t-calendar.js
  22. 22. 配置项的优先级 续 <ul><li>必填的配置:缺少必要的参数会报错 </li></ul>var c = new T.tbwidget.calendar( node , callback ,options); Example: 日历组件 http://www.uedmagazine.com/test/call/Noname2.html var c = new T.tbwidget.calendar( null , null ,options); 正确的参数 错误的参数
  23. 23. 尽可能少的类 <ul><li>使用单体, & ,原型单体是最佳选择 </li></ul>T.box = function(){ this. init .apply(this,arguments); }; T.box.prototype = { init :function(args){ // 构造器 }, render :function(o){ // 渲染 }, //… }; Example: 弹出框 http:// www.uedmagazine.com/test/box/msg.html
  24. 24. 组件源码的可扩展 <ul><li>组件状态相关数据的保存 , 为了再次渲染组件 </li></ul><ul><li>区分 初始化 (init) 和 重新初始化 (render) </li></ul><ul><li>init :生成对象 </li></ul><ul><li>new Widget() 时调用 </li></ul><ul><li>render :根据运行时数据和当前状态渲染出 ui </li></ul><ul><li>随时调用 </li></ul>Example: 分页组件 http://www.uedmagazine.com/test/pagination-2.html
  25. 25. 组件开发进阶
  26. 26. 组件开发进阶 <ul><li>属性属于对象,方法属于原型 </li></ul><ul><li>基于原型的 ( 显式 ) 构造器 </li></ul><ul><li>组件的自定义 </li></ul>
  27. 27. 基于原型的构造器 T.box = function(){ this. init .apply(this,arguments); }; T.box.prototype = { init :function(args){ // 构造代码 }, //… }; T.box = function(o){ this.a = o.sth; this.render(); }; 显式构造: 隐式构造: Example:dojo 、 mootools 、 prototype 等 js 库在代码继承方面的设计
  28. 28. 组件的自定义 <ul><li>YUI3 </li></ul><ul><li>T.box </li></ul>Example: http:// www.uedmagazine.com/test/box/msg.html Example: http://adamlu.com/Demo/dialog.html Y.mix() => Y.extend() Y.merge() Y.augment() T.box() => T.box.alert() T.box.confirm() T.box.diy()
  29. 29. 组件的生命周期 <ul><li>组件来源于一个特定的项目和业务场景 </li></ul><ul><li>开发者将通用的功能抽取出来,形成组件原型 </li></ul><ul><li>更多项目和业务场景使用这个组件 </li></ul><ul><li>组件越来越完善和强壮 </li></ul><ul><li>组件使用更加广泛,生命周期远超过某个产品的生命周期 </li></ul>
  30. 30. Would u like to know more… <ul><li>YUI3 的自定义事件 </li></ul><ul><li>YUI3 的 augment 和 extend </li></ul><ul><li>YUI3 的 plugin </li></ul>
  31. 31. 产品恒久远 组件永流传 Thank u~

×