本文介绍了基于 YUI3 的组件开发，强调组件化Web开发的高效性和模块化设计原则。讨论了组件的设计和开发，包括高内聚低耦合、接口设计及其配置项优先级等关键要素。最终指出组件生命周期的重要性与实例的可重用性，以提升项目开发的灵活性和可维护性。

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

2. 组件化的 web 开发

3. 组件化的 web 开发 项目中我们关注的是如何组装这些颗粒化的组件，而不用花费精力去考究每个组件黑盒内的实现。从而使得项目开发更加高效。

4. 组件化的 web 开发 续

5. YUI2.x 的组件

6. YUI2.x 的组件 续

7. YUI3.x 的组件？

8. YUI3.x 的组件？ 续 YUI3 来势汹汹，但 YUI3 还未有太多 widget 可用，我们需要手动开发组件。

9. 组件的模样

10. 组件的模样 高内聚，低耦合 组件 -> 不依赖环境 插件 -> 需要宿主环境

11. 进一步看组件的模样 只对外暴露接口，供外界调用 http://www.uedmagazine.com/test/call/Noname2.html

12. 进一步看组件的模样 续 组件需要初始化 ( 构造器 ) why ？ 依赖的子组件、库、皮肤 http://www.uedmagazine.com/test/tbrr.html 组件实例可被修改（重新初始化？） http://www.uedmagazine.com/test/tbrr.html

13. 再进一步看组件的模样

14. 再进一步看组件的模样 续 开发者需要关注的三部分 http://www.uedmagazine.com/test/tbrr.html http://www.uedmagazine.com/test/pagination-2.html http://www.uedmagazine.com/test/call/Noname2.html http://www.uedmagazine.com/test/box/msg.html

15. 再进一步看组件的模样 续 Module （ data ） -> 数据 不确定 View -> UI 皮肤 半确定 Controller -> 交互和组件逻辑 确定

16. 设计 & 开发一个组件

17. 组件的设计原则 组件源于项目而高于项目 -> 有意义的组件 不对使用环境进行假设 -> 可重用的组件 容易理解的接口、参数 -> 易用的组件 完善的黑盒中的交互 -> 优质健壮的组件

18. 组件的开发原则 配置项的优先级 尽可能少的类 源码可扩展

19. 配置项的优先级 基础配置 缺省配置 必填的配置

20. 配置项的优先级 续 基础配置，项目中确定下来即不可修改 YAHOO.CN.msg = { isShowMod: true , isHiddenScroll: true , isOpenDrag: false , //… }; Example:YAHOO 关系弹出框组件

21. 配置项的优先级 续 缺省配置，参数为空的默认值 T.tbwidget.calendar.prototype = { buildParam:function(o){ var that = this; var o = o || {}; that.date = o.date || new Date(); that.selectedate = o.selectedate || that.date; that.duration = o.duration || 0.9; that.easing = o.easing || Y.Easing.elasticOut; that.closeable= o.closeable || true; return this; }, //… }; Example: 日历组件 http://www.uedmagazine.com/test/call/t-calendar.js

22. 配置项的优先级 续 必填的配置：缺少必要的参数会报错 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. 尽可能少的类 使用单体， & ，原型单体是最佳选择 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. 组件源码的可扩展 组件状态相关数据的保存 , 为了再次渲染组件 区分 初始化 (init) 和 重新初始化 (render) init ：生成对象 new Widget() 时调用 render ：根据运行时数据和当前状态渲染出 ui 随时调用 Example: 分页组件 http://www.uedmagazine.com/test/pagination-2.html

25. 组件开发进阶

26. 组件开发进阶 属性属于对象，方法属于原型 基于原型的 ( 显式 ) 构造器 组件的自定义

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. 组件的自定义 YUI3 T.box 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. 组件的生命周期 组件来源于一个特定的项目和业务场景 开发者将通用的功能抽取出来，形成组件原型 更多项目和业务场景使用这个组件 组件越来越完善和强壮 组件使用更加广泛，生命周期远超过某个产品的生命周期

30. Would u like to know more… YUI3 的自定义事件 YUI3 的 augment 和 extend YUI3 的 plugin

31. 产品恒久远 组件永流传 Thank u~