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

最新推荐文章于 2022-03-31 15:53:15 发布

最新推荐文章于 2022-03-31 15:53:15 发布 · 276 阅读

文章标签：

#YUI #CSS #Yahoo #HTML #AOP

YUI 专栏收录该内容

11 篇文章

订阅专栏

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

init()所做事情有以下：

初始化组件所需参数；
将一般对组件的配置信息进行解析，一般设有默认配置信息，对于需要生成的id可以通过Dom.generateId()来得到；
initStyles() 日期组件的css 样式有专门的存放地方，initStyles就是初始化所需的className。

initEvents() 初始化事件，有组件内部传递的事件，也有提供接口给调用者来订阅处理该事件；YAHOO提供了自定义事件对象的类CustomEvent通过这个初始化事件，并且指定方法订阅。

initEvents : function() {
 



//将全局变量的长变量名 引用到 局部变量的短变量名。且将this赋值给局部变量，防止方法中的this的变换。




        var defEvents = Calendar._EVENT_TYPES,
            CE = YAHOO.util.CustomEvent,
            cal = this; // To help with minification
        cal.beforeSelectEvent = new CE(defEvents.BEFORE_SELECT); 
        cal.selectEvent = new CE(defEvents.SELECT);
        cal.beforeDeselectEvent = new CE(defEvents.BEFORE_DESELECT);
        cal.deselectEvent = new CE(defEvents.DESELECT);
        cal.changePageEvent = new CE(defEvents.CHANGE_PAGE);
    
       
        cal.beforeRenderEvent = new CE(defEvents.BEFORE_RENDER);
    
       
        cal.renderEvent = new CE(defEvents.RENDER);

        
        cal.beforeDestroyEvent = new CE(defEvents.BEFORE_DESTROY);

        cal.destroyEvent = new CE(defEvents.DESTROY);

       。。。。//其他事件如上，下面就是订阅。

 
        cal.renderNavEvent = new CE(defEvents.RENDER_NAV);

        cal.beforeSelectEvent.subscribe(cal.onBeforeSelect, this, true);
        cal.selectEvent.subscribe(cal.onSelect, this, true);
        cal.beforeDeselectEvent.subscribe(cal.onBeforeDeselect, this, true);
     。。。//需要注意的是订阅的时候，传递this参数，指定本组件为事件的context
    },

setupConfig()将默认配置信息初始化，如同initStyles()将样式class名转换为组件的变量。
applyConfig()如果创建calendar的时候，有配置，则将配置信息覆盖在以前的默认配置上。

render()所作的事情很简单，就是创建日期组件所需的Element，在创建的时候，也许调用者想特殊处理一些信息，则将Event.fire()，调用者对事件subscribe来处理特殊；比如在日期创建之前想将页面做些其他改变。效果类似AOP面向切面。

    render : function() {
    //render之前的事件接口
        this.beforeRenderEvent.fire();
        var workingDate = DateMath.findMonthStart(this.cfg.getProperty(DEF_CFG.PAGEDATE.key));

        this.resetRenderers();
        this.cellDates.length = 0;

        Event.purgeElement(this.oDomContainer, true);

        var html = [];

        html[html.length] = '<table cellSpacing="0" class="' + this.Style.CSS_CALENDAR + ' y' + (workingDate.getFullYear() + this.Locale.YEAR_OFFSET) +'" id="' + this.id + '">';
   //这里就是浏览器会读取到的HTML代码。

        html = this.renderHeader(html);
        html = this.renderBody(workingDate, html);
        html = this.renderFooter(html);

        html[html.length] = '</table>';

        this.oDomContainer.innerHTML = html.join("\n");
  //内部事件的监听处理，比如日期组件的《》按钮的click事件
        this.applyListeners();
        this.cells = Dom.getElementsByClassName(this.Style.CSS_CELL, "td", this.id);
    
        this.cfg.refireEvent(DEF_CFG.TITLE.key);
        this.cfg.refireEvent(DEF_CFG.CLOSE.key);
        this.cfg.refireEvent(DEF_CFG.IFRAME.key);

        this.renderEvent.fire();
    },

组件开发后还要添加上一句话：

YAHOO.register("calendar", YAHOO.widget.Calendar, {version: "2.8.0r4", build: "2449"});

用来方便YUI在YUILoader的时候的版本冲突控制。

仿造以上的开发风格，将网上的一个微调控件进行改装，符合YUI 组件的开发模式。效果如下：