집 > 기사 > 웹 프론트엔드 > JavaScript 디자인 패턴 클래식 단순 팩토리 패턴 코드 예

JavaScript 디자인 패턴 클래식 단순 팩토리 패턴 코드 예

黄舟원래의: 2017-03-20 11:08:021287검색

Simple팩토리 패턴은 어떤 클래스 인스턴스를 생성할지 결정하는 메서드이며 이러한 인스턴스는 동일한 인터페이스를 갖는 경우가 많습니다. 패턴은 인스턴스화된 유형이 컴파일 타임에 결정되지 않고 실행 시에 결정될 때 주로 사용됩니다. 쉽게 말하면 회사 식품 저장실의 음료 자판기와 같습니다. 커피를 원할 것인지, 우유를 원할 것인지는 어떤 버튼을 누르느냐에 따라 결정됩니다.

간단한 팩토리 패턴은 ajax 객체를 생성할 때에도 매우 유용합니다.

이 라이브러리는 xhr 객체의 가져오기 및 게시는 물론 도메인 간 사용 jsonp 및 사용의 편의를 위해 이러한 메소드는 동일한 인터페이스로 추상화됩니다.

var request1 = Request(‘cgi.xx.com/xxx’ , ”get’ );
request1.start();
request1.done( fn );
var request2 = Request(‘cgi.xx.com/xxx’ , ”jsonp’ );
request2.start();
request2.done( fn );

요청은 실제로 xhr 또는 jsonp 인스턴스를 생성할지 여부에 따라 결정됩니다. 암호.

사실 js에서는 소위 생성자 도 단순한 팩토리입니다. 방금 새 옷을 승인했습니다. 이 옷을 벗고 내부를 살펴보겠습니다.

이 코드를 통해 Firefox, Chrome 등의 브라우저에서 new를 완벽하게 시뮬레이션할 수 있습니다.

       function A( name ){
this.name = name;
}
function 
Object
Factory(){
var obj = {},
Constructor = 
Array
.prototype.shift.call( arguments );
obj.
proto
 =  typeof Constructor .prototype === ‘number’  ? Object.prototype
:  Constructor .prototype;
var ret = Constructor.apply( obj, arguments );
return
 typeof ret === ‘object’ ? ret : obj;
}
var a = ObjectFactory( A, ‘svenzeng’ );
alert ( a.name );  //svenzeng

이 코드는 es5의 new 및 생성자의 관련 지침에서 가져온 것임을 알 수 있습니다. -new라고 불리는 것 자체는 단지 객체를 복사하고 다시 쓰는 과정일 뿐이며, 생성되는 것은 ObjectFactory를 호출할 때 전달된 매개변수에 의해 결정됩니다.

JavaScript 디자인 패턴 클래식 단순 팩토리 패턴 코드 예

관련 기사