자바스크립트 패턴 디자인 팩토리 패턴 학습 experience_js 객체지향

패턴 유형: 팩토리 패턴

패턴 설명: 객체를 동적으로 생성하는 데 사용되는 일반적인 패턴 중 하나

적용 범위: 런타임 중에 상호 교환 가능한 일련의 하위 클래스 중에서 선택해야 함 클래스

참고: 인터페이스를 구현하면 다양한 하위 클래스를 동일하게 처리할 수 있지만, 형식에 얽매이지 말고 본질을 이해하세요.

핵심 사항: 함수/클래스/서브 클래스로 구축된 선택기

본질: 함수를 선택기로 사용

일반적인 사용 형태:

독립 선택자:

코드 복사 코드는 다음과 같습니다.

function FactoryMode( index){
switch(index){
case "index1" :
return new Class1();break
case "index2" :
return new Class2();break
case "index3":
return new Class3();break;
default:return new ClassComm();break;
}
}

또는 존재 클래스 메소드로:

코드 복사 코드는 다음과 같습니다.

var MainClass =function(){};//메인 클래스 생성자
MainClass.prototype={
FactoryMode:function(){}//하위 클래스 선택기
}

또는 암시적 선택, 즉 사용자의 주관적 선택이 없는 선택:

코드 복사 코드는 다음과 같습니다.

var xmlRequest=function(){
if(this.isOffOnline()){
xhr= new OfflineHandler()
}//네트워크를 사용할 수 없는 경우 이번에는 캐시 가능한 AJAX 객체를 생성합니다
else if(this.isHightLatency()){
xhr= new QueuedHandler()
}//네트워크 지연이 크면 대기 중인 AJAX 객체를 생성합니다
else {
xhr=new SimpleHandler();
}//네트워크가 정상이면 간단한 AJAX 객체를 생성합니다.
interface.ensureImplements(xhr,AjaxHandler)//여부를 확인합니다. 객체는 향후 작업이 원활하게 진행될 수 있도록 인터페이스를 구현합니다.
return xhr; 선택자는 객체로만 사용될 수 없습니다. 선택은 함수 선택, 클래스 선택, 매개변수 선택

과 같은 함수 선택으로도 사용될 수 있습니다. 코드 복사


코드는 다음과 같습니다.

var addEvent=(function(){ if(!-[0,]){ return function(elem,type,handler){ elem[type handler.toString()]=handler; elem.attachEvent("on" type,elem[type handler.toString])

} }//if IE

else {
return function(elem,type,handler){
elem.addEventListener(type,handler,false)
}
}
}) ();//복수 판단을 피하세요


클래스 선택:

코드 복사


코드는 다음과 같습니다:

var적절한Class=function(){ if(일치 조건 A) return Class1; else if(일치 조건 B) return Class2; return ClassComm;

매개변수 선택:

코드 복사

코드

function Country(country){ if(country=="China") this.config={};//기본 매개변수 설정 1 else if(contry=="America") this.config={};//매개변수 2 설정 else if() .....//기타

}

Country.prototype={}