javascript 컨트롤 개발 렌 더 링 대상

앞에서 우 리 는 파일 로드, 클래스 계승 을 썼 습 니 다. 모두 기본 적 이 고 앞의 프레임 워 크 가 있 습 니 다. 뒤쪽 에 우 리 는 보 이 는 컨트롤 의 렌 더 링 대상 이 필요 합 니 다. 이것 도 우리 가 본 장 에서 말 하 는 중심 입 니 다.
주요 목적 은 dom 요소 의 설정 에 따라 우리 가 원 하 는 효 과 를 나타 내 는 것 입 니 다. 예 를 들 어 div 에 code = "com. ui. botton" 속성 을 설정 하면 지정 한 com. ui. botton. js 클래스 에 따라 우리 의 단 추 를 그립 니 다.
사 고 를 실현 하 는 것 은 모든 dom 요 소 를 읽 고 지정 한 code 요소 가 있 는 지 확인 하 며 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();
	}
});

이 파일 도 staticScript. js 파일 목록 에 추가 합 니 다.

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

우선, 추 후 정 의 된 컨트롤 이름 이 혼 란 스 럽 지 않도록 네 임 스페이스 함수 nameSpace (nameSpace. js) 를 정의 합 니 다.

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 폴 더 에 넣 고 staticScript. js 목록 에 추가 합 니 다. 다음 과 같 습 니 다.

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

여기 서 우리 의 컨트롤 프레임 워 크 는 이미 형성 되 었 습 니 다. 다음 과 같 습 니 다.
+--demo
     +--script
          +--common
               +--init.js
               +--staticScript.js
               +--extend.js
               +--render.js
               +--nameSpace.js
          +--css
               +--com.comStyle.css
     +--web
          +--test.html
다음 에 우리 가 쓸 컨트롤 은 쉬 워 질 것 입 니 다.
첨부 파일 다운로드 가능
다음 자 바스 크 립 트 컨트롤 개발 의 컨트롤 초기 체험 을 주목 하 십시오