javascript控件开发之继承关系

经过上一篇，我们实现了文件的动态加载， 为了能方便编写控件，后续我们将采用类似继承的关系，编写多个js文件，并动态加载到页面上，在此我们编写一个函数，用于虚拟继承，
在目录common下添加extend.js文件， 并定义函数Extend，其中带三个参数，第一个参数，为基类，第二个参数为子类，第三个参数为绑定this状态,为了方便，我们参数做了兼容处理，即可以只有子类childClass的处理,

function Extend(baseClass, childClass, isBind) {
        // 兼容jClass({}, true)的情况
	if(typeof childClass === "boolean"){
		isBind = childClass;
	}
	// 只接受一个参数的情况 - jClass(childClass)
	if (typeof (baseClass) === "object") {
		childClass = baseClass;
		baseClass = null;
	}
}

为了方便起见，我们后续的类结构都以json结构为主，这样我们需要把json对象转换成标准的函数结构，并把基类上的方法，复制到子类，并合并同名函数，
因此，接下来，为函数添加一个，函数体curClass，及合并同名函数的方法mergeFunc，剩下的就是函数prototype的继承调整及函数和属性的复制和构建了。

function Extend(baseClass, childClass, isBind) {
        // 兼容jClass({}, true)的情况
	if(typeof childClass === "boolean"){
		isBind = childClass;
	}
	// 只接受一个参数的情况 - jClass(childClass)
	if (typeof (baseClass) === "object") {
		childClass = baseClass;
		baseClass = null;
	}
        //在继承时，不执行构造函数
    var initializing = false;	
        /**
	 * 构造新的对象，本次调用所创建的类（构造函数）
	 */
	function curClass() {
		// 如果当前处于实例化类的阶段，则调用init原型函数
		if (!initializing) {
			// 如果存在初始化方法才执行
			if(typeof this.init == "function") {
			    this.init.apply(this, arguments);
			}
		}
	}
        /** 
	 * 合并同名函数
	 * 把两个对象的同名函数，并排起来，默认调用子类函数， 
	 * 并在执行时，把基类函数赋给this.base，拱子类函数可以调用，
	 * 如此可以起到不改变结构的情况下，能灵活调用基类函数
	 */
	function mergeFunc(funcName) {
	    //定义一个新函数体
		var func = function() {
			//把原来的base先缓存起来
			var _base = this.base;
			//把当前的基类函数放到this.base对象，以便在子类的同名方法中调用。
			this.base = baseClass.prototype[funcName];
			//执行子类的方法，并把结果返回
			var result = childClass[funcName].apply(this, arguments);
			//还原基类的this.base函数
			this.base = _base;
			//返回执行结果
			return result;
		};
		//返回函数体
		return func;
	}

	// 如果此类需要从其它类扩展
	if (baseClass) {
		initializing = true;
		//结构指向基类，在javascript结构上会形成类似继承的关系
		curClass.prototype = new baseClass();
		curClass.prototype.constructor = curClass;
		initializing = false;
	}

	// 覆盖父类的同名函数 通过prototype定义的函数
	for (var name in childClass) {
		if (childClass.hasOwnProperty(name)) {
			//如果此类继承自父类baseClass并且父类原型中存在同名函数name
			if (baseClass && typeof (childClass[name]) === "function" 
			    && typeof (curClass.prototype[name]) === "function") {
				//合并函数
				curClass.prototype[name] = mergeFunc(name);
			} else {
				curClass.prototype[name] = childClass[name];
			}
		}
	}

	// 复制静态方法 不通过prototype定义的函数
	for(var name in baseClass){
		if(typeof baseClass[name] !== "function") continue;
		curClass[name] = baseClass[name];
	}

	//通过bind方法给每个方法的this绑定当前对象，避免丢失
	if(isBind){
		for(var name in curClass.prototype){
			if(typeof curClass.prototype[name] === "function"){
				curClass.prototype[name] = curClass.prototype[name].bind(this);
			}
		}
	}		
	return curClass;
}

添加好该文件后，我们的目录如下：
+--demo
+--script
+--common
+--init.js
+--staticScript.js
+--extend.js
+--css
+--com.comStyle.css
+--web
+--test.html
并在staticScript.js文件中添加

staticScript = [
    "../css/com.comStyle.css",
    "extend.js"
]

这样我们的面向对象的继承关系就完成了，
源码如附件
请关注下一篇， javascript控件开发之渲染对象