`

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

    博客分类:
  • YUI
阅读更多

 

    前段时间的学习,试着分析了一下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 组件的开发模式。效果如下:

 

  升级为时间组件

 

  进一步扩展日期组件:

 

 

  开发中学到的小技巧:

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

  var me=this;

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

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

 

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

分享到:
评论

相关推荐

    【YUI组件】基于YUI的表单验证器

    “【YUI组件】基于YUI的表单验证器”指的是一个使用Yahoo用户界面库(YUI)开发的特定组件,它的主要功能是为HTML表单提供验证功能。YUI是一个开源的JavaScript库,它包含了丰富的工具和组件,用于创建交互式、高...

    淘宝旅行YUI通用日期日历控件

    UI Library (YUI) 开发的前端组件,主要用于在网页上实现高效、用户友好的日期选择功能。YUI 是一个广泛应用于网页开发的开源JavaScript库,它包含了一系列模块,用于创建交互式、高性能的Web应用程序。在淘宝旅行...

    YUI3 dialog组件

    YUI3 Dialog组件为Web开发提供了强大的弹出对话框功能,通过灵活的配置和丰富的API,可以满足各种对话框需求。在实际开发中,根据项目需求,结合HTML和CSS,可以创建出高度定制化的交互式Dialog,提升用户体验。

    yahoo yui控件

    2. **UI组件**:YUI提供了大量的UI控件,如按钮、菜单、日历、树形结构、滑块、进度条等,这些组件都具有良好的可定制性和兼容性,适应各种浏览器环境。例如,`YUI.Button` 提供了创建和操作按钮的功能,而`YUI....

    Yahoo YUI 插件库

    Yahoo User Interface (YUI) 是一个开源的JavaScript库,由Yahoo开发并维护,用于构建高性能、响应式的Web应用程序。它包含了一系列的模块和组件,帮助开发者处理常见的Web开发任务,如布局管理、事件处理、动画效果...

    开发用到的日历控件

    在软件开发中,日历控件是一个非常常见且重要的组件,尤其在处理日期选择、时间规划或者事件安排等场景下。本压缩包包含了一些实用的日历控件资源,旨在为开发者提供便利。以下是对这些文件内容的详细解读: 1. **...

    淘宝旅行YUI通用日期日历控件.zip

    淘宝旅行YUI通用日期日历控件是一款由淘宝前端开发人员昂天开发,基于雅虎YUI3实现,界面简洁清晰,功能非常强大,不仅可以显示单日历,双日历,三日历,甚至四日历,还可以显示节日信息以及指定日期显示范围,非常...

    YUI-ajax框架开发文档

    在"YUI-ajax框架开发文档"中,我们可以深入探讨YUI如何通过其Ajax组件实现异步数据通信。 YUI中的Ajax框架主要由`YAHOO.util.Connect`和`YAHOO.widget.DataSource`两个关键部分组成。`YAHOO.util.Connect`是YUI的...

    很好YUI好用的控件库

    3. **丰富的组件库**:YUI提供了大量预先封装好的UI控件,如按钮、表格、菜单、日期选择器等,这些控件设计精美,易于使用,大大提升了开发效率。 4. **强大的事件系统**:YUI的事件处理机制使得开发者可以方便地...

    YUI.rar_html_javascript YUI_yui_yui javascript

    YUI是雅虎公司开发的一个开源JavaScript库,它为Web开发者提供了丰富的工具和组件,以构建高效、可扩展的网页应用。这个压缩包"YUI.rar"包含了YUI的源代码以及相关的HTML和JavaScript示例,展示了如何利用YUI库创建...

    雅虎YUI组建

    综上所述,雅虎YUI组件是一个强大而全面的前端开发框架,其模块化设计、丰富的组件库以及详细的实例,使得开发者能够高效地构建功能完善的Web应用。无论你是前端新手还是经验丰富的开发者,YUI都能成为你得力的助手...

    雅虎 用户接口库YUI

    Yui组件分成2类:工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发(in-browser devolvement),使用DHTML和AJAX的特性开发所有的Web程序。 动画(Animation):在你的页面中通过指定位置,...

    YUI 详细说明文档

    ### YUI 详细说明文档 #### 一、YAHOO工具库 YUI是一个由Yahoo!开发的强大且灵活的开源JavaScript框架...YUI不仅提供了强大的工具库,还有一系列实用的组件,这些都大大简化了Web开发的工作量,并提高了项目的质量。

    yui.rar 例子

    例如,例子中可能用到了“yui-button”来创建交互式的按钮,或者使用“yui-menu”构建导航菜单,这些组件大大简化了开发工作,提升了用户体验。 在实际开发中,YUI的调试工具也非常实用。YUI Logger可以帮助开发者...

    《YUI使用文档》汉语版的yui学习材料

    `env`模块则包含环境信息和YUI组件的详细信息,这对于了解YUI运行环境和组件状态非常有帮助。`YUI_config.listener`允许定义自定义回调函数,当有新的YUI组件被加载时,该函数会被调用。 YUI的DOM操作是其强大之处...

    YUI-EXT使用详解

    总之,YUI-EXT是前端开发者的强大工具,它结合了YUI的底层强大功能和自身丰富的UI组件,让开发人员能够高效地构建功能丰富的Web应用,提升用户界面的体验和交互性。通过深入学习和实践,你将能够熟练掌握这一技术,...

    yui 资源包

    总结,YUI 3.9.0 r2是一个强大的前端开发框架,它提供了一整套工具和组件,以应对复杂的界面设计挑战,并通过优化资源加载和管理,提升了Web应用的性能和用户体验。无论是初学者还是经验丰富的开发者,都能从中找到...

    yui_2.9.0前端UI

    是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor ...

    yui_3.8.1.zip

    Yahoo UI Library(简称YUI)是一款开源的JavaScript库,由Yahoo公司开发并维护,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI 3.8.1是其发展过程中的一个重要版本,包含了丰富的组件和工具,为前端开发者...

Global site tag (gtag.js) - Google Analytics