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 컨트롤 개발 렌 더 링 대상 을 주목 하 십시오.