javascriptコントロール開発の継承関係


前のページを通じて、ファイルのダイナミックロードを実現しました.コントロールを簡単に作成できるように、後続の私たちは類似の継承関係を利用して、複数のjsファイルを作成し、ページに動的にロードします.
    目次のcomonにexted.jsファイルを追加し、関数Extedを定義します.ここでは3つのパラメータを持って、最初のパラメータはベースクラス、2番目のパラメータはサブクラス、3番目のパラメータは結合this状態となります.便利さのために、パラメータは互換性のある処理をしました.つまり、サブクラスのchild Classのみの処理が可能です.

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、および同名の関数をマージする方法mergFun、残りは関数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;
}
このファイルを追加したら、私達のディレクトリは以下の通りです.
+--デモ
     +--スクリプト
          +--common
               +--init.js
               +--static Script.js
               +--exted.js
          +--css
               +--comp.com Style.css
     +--web
          +--test.
そしてstatic Script.jsファイルに追加します.

staticScript = [
    "../css/com.comStyle.css",
    "extend.js"
]
これで私達の対象に向かう継承関係は完成しました.
ソースは添付ファイルのようです
次の記事に注目してください.javascriptコントロール開発のレンダリング対象