자바스크립트 패턴 팩토리 패턴 응용 소개_자바스크립트 기술

팩토리 패턴도 객체 생성 패턴 중 하나이며 일반적으로 클래스 또는 클래스의 정적 메서드에서 구현됩니다. 객체를 구성하는 한 가지 방법은 new 연산자를 사용하는 것이지만 new를 사용하는 것은 정확하게는 구현 프로그래밍을 위한 것이므로 "결합" 문제를 일으키고 특정 클래스와 밀접하게 관련됩니다. 이로 인해 코드가 더 취약해지고 유연성이 부족해집니다. 복잡한 논리를 사용하는 프로젝트에서는 인터페이스 지향 프로그래밍을 권장합니다.
간단한 팩토리 패턴을 먼저 보세요

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

Person(name, age) {
var obj = {}
obj.name = name
obj.age = age
return obj
}
var p1 = Person( 'jack', 25)
var p2 = Person('lily', 22)

생성자 방식으로 클래스를 작성하는 것의 차이점은 이것을 사용하지 않고 매번 빈 개체를 만든 다음 속성을 추가하세요. 객체를 생성하는 방법은 new를 사용하는 것이 아니라 함수 호출을 사용하는 것입니다. 이 접근 방식은 기본적으로 클래스(동일한 속성을 가진 객체)를 대체하는 데 사용되는 반면, 더 복잡한 팩토리는 다양한 유형의 객체를 생성할 수 있습니다.
다음은 과일공장의 예시입니다

코드를 복사하세요 코드는 다음과 같습니다

function Banana( ) {
this.price = '$1.5'
}
function Apple() {
this.price = '$1.2'
}
function Orange () {
this .price = '$2.2'
}
// 정적 팩토리 클래스
function Fruit() {}
Fruit.factory = function(type) {
if (!window[type]) {
return
}
var Fruit = new window[type]
return Fruit
}
// 다른 과일 만들기
var 바나나 = Fruit.factory('Banana')
var apple = Fruit.factory('Apple')
var orange = Fruit.factory('Orange')

세 가지 과일 클래스가 있습니다. 바나나, 사과, 오렌지, 하나 과일 팩토리 클래스 Fruit는 정적 메소드 팩토리를 통해 매번 다른 과일 객체를 생성할 수 있습니다.
공장 패턴은

코드 복사와 같은 JavaScript 기본 개체 Object에도 반영됩니다. 코드는 다음과 같습니다.

var obj = Object(),
num = Object(1),
str = Object('s'),
boo = Object(false); >

Object는 다양한 매개변수에 따라 다양한 객체를 구성하는 공장입니다. obj는 빈 객체, num은 Number 유형 객체, str은 String 유형 객체, boo는 Boolean 유형 객체입니다.
jQuery.Callbacks도 호출될 때마다 추가, 제거, 실행 등과 같은 메서드가 포함된 개체를 반환합니다. "한 번", "기억" 등과 같은 매개변수를 기반으로 다양한 속성을 가진 개체를 구성할 수도 있습니다.

팩토리 패턴이란 객체를 반환할 수 있는 메소드를 말합니다.
이 모델을 사용하여 무엇을 할 수 있나요? 기존 DOM 객체의 메서드가 만족스럽지 않고 sayHello라는 사용자 지정 메서드를 추가하고 싶다고 가정해 보겠습니다.

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

function RemouldNodeObj(DomNode){
//먼저 전달된 매개변수가 Dom 노드인지 확인합니다.
if(typeof DomNode = = "object" && DomNode.nodeType == 1){
DomNode.say = function(){
alert("Hello!!")
}
}else{
경고 ("전달한 매개변수가 올바르지 않습니다!");
}
}

//다음과 같이 호출하세요.
window.onload = function(){
var oDiv = RemouldNodeObj(document.getElementById("test"));
//이 단계를 통해 oDiv에는
oDiv.say()
}

After라는 새로운 메서드가 있습니다. 위의 기초를 바탕으로 js를 호출하여 몇 가지 복잡한 기능을 구현해 보겠습니다. 코드를 살펴보세요.

코드를 복사하세요. > 코드는 다음과 같습니다.

###

;




보셨나요? 이 호출 방법은 jQuery와 매우 유사합니까? 브라우저 간 문제를 해결할 수 있다면 실제로 검색창 플러그인을 만들 수 있습니다!