> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 시리즈 심층이해(28): 디자인 패턴의 팩토리 패턴에 대한 자세한 설명_자바스크립트 능력

자바스크립트 시리즈 심층이해(28): 디자인 패턴의 팩토리 패턴에 대한 자세한 설명_자바스크립트 능력

WBOY
풀어 주다: 2016-05-16 16:11:13
원래의
1019명이 탐색했습니다.

소개

생성 패턴과 유사하게 팩토리 패턴은 생성할 객체의 특정 클래스를 지정하지 않고 객체(공장에서 제품으로 간주)를 생성합니다.

팩토리 패턴은 객체 생성을 위한 인터페이스를 정의합니다. 이 인터페이스는 하위 클래스에서 인스턴스화할 클래스를 결정합니다. 이 패턴은 클래스의 인스턴스화를 하위 클래스로 연기합니다. 서브클래스는 인터페이스 메서드를 재정의하여 생성 시 자체 객체 유형을 지정할 수 있습니다.

이 모드는 특히 많은 설정 파일에 의존하는 등 개체 생성 과정에 값을 할당할 때 매우 유용합니다. 더욱이, 프로그램에서 서브클래스가 생성되어야 하는 객체의 유형을 정의하도록 하는 데 사용되는 팩토리 메소드를 종종 볼 수 있습니다.

텍스트

다음 예제는 팩토리 메소드를 적용하는 26장의 생성자 패턴 코드를 개선한 버전입니다.

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

var Car = (함수 () {
var Car = 기능(모델, 연도, 마일) {
This.model = 모델;
올해.년 = 년;
This.miles = 마일;
};
반환 기능(모델, 연도, 마일) {
         새 차 반납(모델, 연식, 마일);
};
})();

var tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

이해하기 어렵다면 다른 예를 들어보겠습니다.

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

var productManager = {};

productManager.createProductA = 함수() {
console.log('ProductA');
}

productManager.createProductB = 함수() {
console.log('제품B');
}
                             
productManager.factory = 함수(typeType) {
새 productManager[typeType] 반환;
}

productManager.factory("createProductA");

아직 이해가 되지 않는다면 웹 페이지에 일부 요소를 삽입하려고 하는데 이러한 요소의 유형이 그림, 링크 또는 텍스트일 수 있다고 가정해 보겠습니다. 팩토리 패턴을 정의하려면 먼저 팩토리 클래스와 해당 하위 클래스를 정의해야 합니다. 먼저 하위 클래스(즉, 하위 함수)의 특정 구현을 정의하겠습니다.

코드 복사 코드는 다음과 같습니다.
var 페이지 = 페이지 || {};
page.dom = 페이지.dom || //하위 기능 1: 텍스트 처리
page.dom.Text = 함수 () {
This.insert = 함수(여기서) {
        var txt = document.createTextNode(this.url);
Where.appendChild(txt);
};
};

//하위 기능 2: 링크 처리 page.dom.Link = 함수 () {

This.insert = 함수(여기서) {
        var link = document.createElement('a');
         link.href = this.url;
         link.appendChild(document.createTextNode(this.url));
Where.appendChild(링크);
};
};

//하위 기능 3: 사진 처리

page.dom.Image = 함수 () {

This.insert = 함수(여기서) {
         var im = document.createElement('img');
          im.src = this.url;
Where.appendChild(im);
};
};


그렇다면 공장 가공 기능을 어떻게 정의할까요? 실제로는 매우 간단합니다.


page.dom.factory = 함수(유형) {
새 페이지 반환.dom[유형];
}


사용방법:


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

var o = page.dom.factory('링크');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

이 시점에서 공장 모델 소개에 대해 모두가 명확하게 이해하고 있다고 생각하므로 더 이상 설명하지 않겠습니다.

요약

팩토리 패턴을 사용하는 경우

공장 모드는 다음과 같은 시나리오에서 특히 유용합니다.

1. 객체 구성이 매우 복잡합니다
2. 특정 환경에 따라 다양한 인스턴스를 생성해야 합니다
3. 동일한 속성을 가진 다수의 작은 물체를 처리

공장 모드를 사용하지 않을 때

팩토리 패턴을 남용하지 마세요. 때로는 코드에 불필요한 복잡성만 추가하고 테스트 실행을 어렵게 만들기도 합니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿