【YUI组件】开发作派&微调控件

2012-11-22

【YUI组件】开发风格&微调控件???? 前段时间的学习，试着分析了一下Calendar组件，却发现比较大，大致了解到组

【YUI组件】开发风格&微调控件

??? 前段时间的学习，试着分析了一下Calendar组件，却发现比较大，大致了解到组件的一般开发风格。我们在使用Calendar组件，两步，init()；然后render();

??? init()所做事情有以下：

??? 初始化组件所需参数；??? 将一般对组件的配置信息进行解析，一般设有默认配置信息，对于需要生成的id可以通过Dom.generateId()来得? 到；??? initStyles() 日期组件的css 样式有专门的存放地方，initStyles就是初始化所需的className。
??? initEvents() 初始化事件，有组件内部传递的事件，也有提供接口给调用者来订阅处理该事件；YAHOO提供了自定义事件对象的类CustomEvent通过这个初始化事件，并且指定方法订阅。

?? 组件开发后还要添加上一句话：
? YAHOO.register("calendar", YAHOO.widget.Calendar, {version: "2.8.0r4", build: "2449"});
? 用来方便YUI在YUILoader的时候的版本冲突控制。
?
? 仿造以上的开发风格，将网上的一个微调控件进行改装，符合YUI 组件的开发模式。效果如下：
?
? 升级为时间组件
? 
? 进一步扩展日期组件：
? 
?
? 开发中学到的小技巧：
? setInterval的时候，需要将组件的this传递进去，可是因为setInterval是全局的函数，this为指到浏览器Dom。
? var me=this;
? this._interval = setInterval(function(){me.Run();},150);
? 使用这样的方法可以将调用函数的this变换，比较简单。
?
? 以上个人浅见，错误的地方欢迎大家指正。

热点排行

Web前端

【YUI组件】开发作派&微调控件