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本身组合而成， 此处我们不进行详细说明，而是直接开门见山的写第一个控件基类com.baseObject.js
首先我们在框架中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控件开发之可见控件
整包请下载附件