javascriptコントロール開発の描画対象

前に私達はファイルのロード、クラスの継承を書いています.すべての基礎を比較して、前のフレームがあります.後には可視コントロールの描画対象が必要です.また、私達の本章の重点です.
主な目的は私達のdom元素の配置によって、私達の欲しい効果をレンダリングすることです.例えば、私達はdivにcode=「com.ui.Botton」属性を配置して、指定されたcomp.ui.Botton.js類と一緒に私達のボタンを描きます.
考えを実現するには、まずすべてのdom要素を読み取り、指定されたコードの要素があるかどうかを確認し、dom対応のコントロールコードを実行します.
私達はcommonの下にファイルrender.jsを追加します.

/**
 * ui    
 *   ：dom    
 *       callBack     
 */
function render(dom, callBack){
	if(typeof dom == "undefined") return;
	//     dom        
	var len = dom.childNodes.length;
	for(var i = 0; i < len; i++) {
	    //     dom     
		var curDom = dom.childNodes[i];
		//           
		var childDom = curDom.childNodes;
		//       id name         ，
		var comName = curDom.id || curDom.name;
		//        
		if(comName !== "" && typeof comName != "undefined" && comName != null) {
			if(typeof thisWindow.com[comName] === "undefined") {
			    //     code  
				var code = curDom.attributes.code;
				if(typeof code != "undefined") {
					var code = code.nodeValue;
					// code        
					var comClass = eval(code);
					if(typeof comClass != "undefined") {
					    //         ，    option  
						var option = curDom.attributes.option;
						if(typeof option != "undefined") {
							option = eval("(" + option.nodeValue + ")");
						}
						try {
						    //  code   ui    ，
							var ui = new comClass(option, curDom, true);
							//   com   ，
							thisWindow.com[curDom.id || curDom.name] = ui;
							//      ，           
							curDom = ui.getRectDom();
						} catch(e) {
						    //           。
							thisWindow.LogInfo("create class " + code 
							+ " error:" + e.message);
						}
					} else {
					    //          
						thisWindow.LogInfo("class " + code + " can not found.");
					}
				}
			} else {
			    //  id  ，  ，    
				thisWindow.LogInfo(comName + " is exist");
			}
		}
		if(childDom.length > 0 && curDom != null && typeof curDom != "undefined") {
		    //       ，     
			render(curDom);
		}
	}
	if(typeof callBack == "function") {
		callBack();
	}
};
//       body      
render(document.body, function(){
	if(typeof thisWindow.onAfterRender == "function") {
	    //     
		thisWindow.onAfterRender();
	}
});

私たちはこのファイルをstatic Script.jsのファイルリストにも入れます.

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

まず、後に定義されたコントロールの名前が混乱しないように、名前空間関数nameSpaceを定義します.

function nameSpace(){
    var arg = arguments, obj = null, i, j, arr, ns;
		//      nameSpace
		for (i = 0; i < arg.length; i++){
			//  "."     
			arr = arg[i].split(".");
			//         
			ns = arr[0];
			//       ns        ，               {}
			if(window[ns] === undefined){
				window[ns] = {};
			}
			obj = window[ns];
			//          ，     ，         {}
			for (j = 1; j < arr.length; j++){
				if(obj[arr[j]] === undefined){
					obj[arr[j]] = {};
				}
				obj = obj[arr[j]];
			}
		}
		return obj;
}

このファイルをcommonフォルダに入れて、static Script.jsリストに追加します.以下の通りです.

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

ここで、私たちのコントロールの枠組みは次のように形成されました.
+--デモ
     +--スクリプト
          +--common
               +--init.js
               +--static Script.js
               +--exted.js
               +--render.js
               +--name Space.js
          +--css
               +--comp.com Style.css
     +--web
          +--test.
これから書くコントロールは簡単になります.
添付ファイルをダウンロードできます
次のjavascriptコントロール開発のコントロール初体験に注目してください.