자바스크립트 패턴 팩토리 패턴 응용 소개_자바스크립트 기술
공장
모델
팩토리 패턴도 객체 생성 패턴 중 하나이며 일반적으로 클래스 또는 클래스의 정적 메서드에서 구현됩니다. 객체를 구성하는 한 가지 방법은 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); >
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를 호출하여 몇 가지 복잡한 기능을 구현해 보겠습니다. 코드를 살펴보세요. //먼저 전달된 매개변수가 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()
}