이번에는 JSDesign Pattern의 Factory 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 디자인 패턴의 팩토리 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!