正式进入了控件开发之旅，首先，一套好用的控件，要有一套实用的继承关系，先列出初步的类关系图，大致如下：
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)。
