javascript控件开发教程 控件初体验

发布时间:2019-11-28编辑:脚本学堂
本文介绍了javascript控件开发的一些基础知识,javascript控件初体验,有需要的朋友参考学习下。

正式进入了控件开发之旅,首先,一套好用的控件,要有一套实用的继承关系,先列出初步的类关系图,大致如下:
com.baseObject 
  

  +--com.list
    +--com.treeNode
    +--com.treeList
    +--com.ui.window
            +--com.ui.scrollBar
            +--com.ui.botton
            +--com.ui.calendar
            +--com.ui.panel
                   +--com.ui.frame
                         +--com.ui.listView
                         +--com.ui.treeView
                         +--com.ui.grid
                   +--com.ui.toolBar
                   +--com.ui.speedBotton
            +--com.ui.drop.popWindow
                   +--com.ui.drop.popMenu
                   +--com.ui.drop.popListView
                   +--com.ui.drop.popCalendar
            +--com.ui.input.edit
                   +--com.ui.input.number
                   +--com.ui.input.datePicker
                   +--com.ui.input.comboBox
 

当然,这些继承关系也并非单纯的继承,其中还有一些混合控件,比如com.ui.treeView就是由com.treeList、com.ui.scrollBar加上com.ui.treeView本身组合而成, 此处不进行详细说明,而是直接开门见山的写第一个控件基类。

首先,在框架中script目录下添加component文件夹,component主要用于放置上面的控件代码文件,框架目录:
 

+--demo
     +--script
          +--common
               +--init.js
               +--staticScript.js
               +--extend.js
               +--render.js
               +--nameSpace.js
          +--css
               +--com.comStyle.css
          +--component
               +--com.baseObject.js
     +--web
          +--test.html
 

先写第一个控件类com.baseObject并把文件放入component文件夹内, 如上目录图,
作为所有控件基类,该类只用来做一些基本的事情,
1. 初始化浏览器对象,
2. 定义并执行create函数,
3. 输出日志
4. 计算字符串长度
5. 判断变量是否空
6. 给数值增加千分符
当然,后续需要的话还可以增加别的功能函数,因比较简单,直接上整个类代码,
 

复制代码 代码示例:
/**
 * 基础控件类
 * 创建:qzz
 * 日期: 2014-04-06
 */ 
(function(undefined) { 
     
    nameSpace("com"); 
     
    com.baseObject = Extend({ 
        /**
         * 初始化方法,合并处理界面和元模型的属性.
         * @param option 属性
         */ 
        init:function(option) {  
            this.index = com.baseObject.index++; 
            //控件属性 
            if(typeof option != "undefined") { 
                this.option = option; 
            } else { 
                this.option = {}; 
            } 
            //this.base(); 
            this.logInfo("baseObject.init"); 
            var ua = navigator.userAgent.toLowerCase(); 
            //浏览器判断 
            this.browser = { 
                msie:(/msie ([d.]+)/).test(ua), 
                firefox:(/firefox/([d.]+)/).test(ua), 
                chrome:(/chrome/([d.]+)/).test(ua), 
                opera:(/opera.([d.]+)/).test(ua), 
                safari:(/version/([d.]+)/).test(ua) 
            }; 
                //是否控件的判断 
            this.isComponent = true; 
                //执行创建函数 
            this.create(); 
        }, 
        /**
         * 创建函数.
         */ 
        create:function(){ 
            this.className = "com.baseObject"; 
            this.logInfo("baseObject.create"); 
            this._update = true; 
            this.beginDate = null;       
        }, 
        /**
         * 获取控件名.
         */ 
        getName:function() { 
            return this.name || this.className; 
        }, 
        /**
         *日志输出函数 .
         *@param str 字符串
         *@param date 日期
         */ 
        logInfo:function(str){       
            if(typeof window.console != "undefined") { 
                var date = new Date(); 
                var h = date.getHours(); 
                var m = date.getMinutes(); 
                var s = date.getSeconds(); 
                var ms = date.getMilliseconds(); 
                window.console.info("["+h+":"+m+":"+s+"."+ms+"]["  
                + this.index +  ":" + this.getName() + "]" + str);               
                date = null; 
            }            
        }, 
        /**
         * 时间统计日志.
         * @param str 字符串
         */ 
        logBegin:function(str) { 
            this.beginDate = new Date(); 
            this.logInfo("[BEGIN]" + str, this.beginDate); 
        }, 
        /**
         * 时间统计日志.
         * @param str 字符串
         */ 
        logEnd:function(str) { 
            if(this.beginDate != null) { 
                var bh = this.beginDate.getHours(); 
                var bm = this.beginDate.getMinutes(); 
                var bs = this.beginDate.getSeconds(); 
                var bms = this.beginDate.getMilliseconds(); 
                var date = new Date(); 
                var eh = date.getHours() - bh; 
                var em = date.getMinutes() - bm; 
                if(em < 0) { 
                    eh --; 
                    em += 60; 
                } 
                var es = date.getSeconds() - bs; 
                if(es < 0) { 
                    em --; 
                    es += 60; 
                } 
                var ems = date.getMilliseconds() - bms; 
                if(ems < 0) { 
                    es --; 
                    ems += 1000; 
                }                
                this.logInfo("[END]" + str + " use " + eh+":"+em+":"+es+"."+ems); 
                date = null; 
                this.beginDate = null; 
            } 
        }, 
        /**
         * 字符串长度.
         * @param str 字符串
         */ 
        strLen:function(str) { 
            var v = str; 
            var len = 0;      
            for(var i=0; i<v.length; i++) { 
               if(v.charCodeAt(i)>256) { 
                   len   +=   2; 
               } else { 
                   len++; 
               } 
            } 
            v = null; 
            i = null; 
            return len; 
        }, 
        /**
         * 是否为空. 
         * @param value 判断的值
         */ 
        isEmpty:function(value) { 
            return (typeof value == "undefined" || value == null || value === ""); 
        },  
        /**
         * 是否不为空.
         * @param value 判断的值
         */ 
        isNotEmpty:function(value) { 
            return !this.isEmpty(value); 
        }, 
        /**
         * 数值型添加千分符.
         * @param value 数值
         */ 
        numberFormat:function(value) {           
            return (value + "").replace(/(d{1,3})(?=(d{3})+(?:$|.))/g, "$1,");  
        }, 
        /**
         * 注析掉当前类.
         */ 
        destroy:function() { 
            this.option = null; 
        } 
    }); 
    com.baseObject.index = 0; 
})(); 

并把文件添加到staticScript列表中,如下,
重点说明一下, 因加载的脚本是有顺序要求的,因此该文件,包括后续写的控件文件的加载顺序都必须在渲染文件(render.js)之前,
 

复制代码 代码示例:
staticScript = [ 
    "../css/com.comStyle.css", 
    "extend.js", 
    "nameSpace.js", 
    "../component/com.baseObject.js", 
    "render.js" 

为了让大家对控件有一个初步的体验,下一篇将先编写com.ui.window对象,并展示到html页面上,请关注下一篇,javascript控件开发之可见控件(1)。