> 웹 프론트엔드 > JS 튜토리얼 > JS 디자인 패턴의 팩토리 패턴에 대한 자세한 설명

JS 디자인 패턴의 팩토리 패턴에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-03-14 14:18:01
원래의
1679명이 탐색했습니다.

이번에는 JSDesign PatternFactory Pattern에 대해 자세히 설명하고, JS Factory Pattern 사용 시 Notes는 무엇인지 살펴보겠습니다.

개념: 팩토리 패턴은 객체 생성을 위한 인터페이스를 정의합니다. 이 인터페이스는 하위 클래스에서 인스턴스화할 클래스를 결정합니다. 이 패턴은 클래스 인스턴스화가 하위 클래스로 지연된다는 것입니다. 서브클래스는 생성 시 자체 객체 유형(추상 팩토리)을 지정하기 위해 인터페이스 메서드를 재정의할 수 있습니다.

함수 및 주의사항
함수: 객체 구성은 매우 복잡합니다.

특정 환경에 따라 다른 인스턴스를 생성해야 함

동일한 속성을 가진 다수의 작은 개체를 처리해야 함

참고: 팩토리를 남용할 수 없으며 때로는 코드가 복잡해질 뿐입니다

사용 방법
Let's 예제 사용 이 문제를 설명하기 위해 공장에서 다양한 유형의 제품을 생산하려는 것처럼 각 유형을 메소드에 작성하여 생산 중에 이 메소드를 직접 호출할 수 있습니다. 그런 다음 다음 코드를 살펴보세요.

var productManager = {};
productManager.createProductA = function () {
    console.log('ProductA');
}
productManager.createProductB = function () {
    console.log('ProductB');
}
productManager.factory = function (typeType) {
    return new productManager[typeType];
}
productManager.factory("createProductA");
로그인 후 복사

웹 페이지에 일부 요소를 삽입하려고 하는데 이러한 요소의 유형은 그림, 링크 또는 텍스트일 수 있습니다. ICBC 모델 정의 해당 하위 클래스를 정의해야 합니다

var page = page || {};
page.dom = page.dom || {};//子函数1:处理文本page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};//子函数2:处理链接page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};//子函数3:处理图片page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};
로그인 후 복사

그러면 팩토리 패턴을 어떻게 정의합니까? 사실 매우 간단합니다

page.dom.factory = function (type) {
    return new page.dom[type];}
로그인 후 복사

사용 방법은 다음과 같습니다.

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);
로그인 후 복사

이 기사의 사례를 읽고 나면 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하십시오. 중국사이트!

추천 도서:

JS 디자인 패턴 중 빌더 패턴에 대한 자세한 설명

JS 디자인 패턴 중 생성자 패턴에 대한 자세한 설명

js 디자인 패턴 - 싱글턴 패턴의 사용

위 내용은 JS 디자인 패턴의 팩토리 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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