读书人

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

发布时间: 2012-11-22 00:16:41 作者: rapoo

【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 组件的开发模式。效果如下:

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

? 升级为时间组件

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

? 进一步扩展日期组件:

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

?

? 开发中学到的小技巧:

? setInterval的时候,需要将组件的this传递进去,可是因为setInterval是全局的函数,this为指到浏览器Dom。

? var me=this;

? this._interval = setInterval(function(){me.Run();},150);

? 使用这样的方法可以将调用函数的this变换,比较简单。

?

? 以上个人浅见,错误的地方欢迎大家指正。

读书人网 >Web前端

热点推荐