JavaScript 디자인 패턴 팩토리 패턴 및 생성자 패턴_javascript 기술

패턴이란

얼마 전 기말고사를 준비하다가 너무 힘들고 피곤해서 기사를 업데이트할 시간이 없었습니다. 오늘은 JavaScript의 디자인 패턴에 대해 이야기하겠습니다.

먼저 우리가 알아야 할 것은 패턴은 재사용 가능한 솔루션인 반면, 안티패턴은 특정 문제에 대한 빈약한 솔루션이라는 것입니다.

JS 안티 패턴의 일반적인 예

1. 함수 대신 setTimeout 및 setInterval에 문자열을 전달하면 eval()의 내부 사용이 시작됩니다.
2. 전역 컨텍스트에서 다수의 변수를 정의하여 전역 네임스페이스를 오염시키세요
3. Object 클래스의 프로토타입 수정
4. HTML 파일에 포함된 js 코드는 외부 단위 테스트 도구에 포함될 수 없습니다.
5. document.write 남용 페이지가 로드된 후 document.write가 실행되면 현재 있는 페이지가 다시 작성됩니다. 대신 document.creatElement를 사용할 수 있다면 document.write를 사용하지 마십시오.

디자인 패턴의 카테고리

창의적인 디자인 패턴

창의적인 디자인 패턴은 주어진 상황에 적합한 방식으로 객체를 생성하기 위해 객체 생성 메커니즘을 처리하는 데 중점을 둡니다. 이 카테고리에 속하는 자산은 다음과 같습니다.

생성자, 팩토리, 추상, 프로토타입, 싱글톤 및 빌더

구조적 디자인 패턴

구조 패턴은 객체 구성에 관한 것이며 종종 다양한 객체 간의 관계를 설정하는 간단한 방법을 찾는 데 사용될 수 있습니다.
이 카테고리에 속하는 패턴은 다음과 같습니다.

데코레이터, 파사드 외관, 플라이웨이트, 어댑터 어댑터 및 프록시 에이전트

행동 디자인 패턴

행동 패턴은 시스템 내 다양한 ​​개체 간의 통신을 개선하거나 단순화하는 데 중점을 둡니다.

행동 패턴은 다음과 같습니다.

반복자, 중재자, 관찰자 ​​및 방문자

공장 모드

유사한 객체가 여러 개 선언되는 문제를 해결하기 위해 팩토리 패턴이라는 방법을 사용할 수 있습니다. 이 방법은 객체를 인스턴스화할 때 다수의 중복 문제를 해결하는 것입니다.

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

공장 패턴 분류

팩토리 모드는 단순 팩토리, 추상 팩토리, 스마트 팩토리로 구분됩니다. 팩토리 모드에서는 명시적인 생성자를 사용할 필요가 없습니다.

간단한 팩토리 패턴: 클래스(일반적으로 싱글톤)를 사용하여 인스턴스를 생성합니다.
복잡한 팩토리 패턴: 서브클래스를 사용하여 멤버 변수가 어떤 특정 클래스 인스턴스여야 하는지 결정합니다.

팩토리 모델의 장점

가장 큰 이점은 new 키워드 대신 공학적 방법을 사용하여 개체 간의 결합을 제거할 수 있다는 것입니다. 모든 인스턴스화 코드를 한 위치에 중앙 집중화하여 코드 중복을 방지합니다.
공장모델의 단점

대부분의 클래스에서는 코드를 더 간단하고 읽기 쉽게 만들 수 있는 new 키워드와 생성자를 사용하는 것이 가장 좋습니다. 알아보기 위해 팩토리 메소드를 살펴볼 필요가 없습니다. 
팩토리 패턴은 반복되는 인스턴스화 문제를 해결하지만 또 다른 문제, 즉 식별의 문제가 있는데, 어떤 객체의 인스턴스인지 파악이 불가능하기 때문이다.

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

경고(테스트1 유형); //객체
경고(테스트1 인스턴스 오브 객체); //true

팩토리 패턴은 언제 사용하나요?

공장 모드는 주로 다음과 같은 시나리오에서 사용됩니다.

1. 개체나 구성 요소가 복잡도가 높은 경우
2. 다양한 환경에 따라 객체의 다양한 인스턴스를 쉽게 생성해야 하는 경우
3. 동일한 속성을 공유하는 여러 개의 작은 물체나 구성요소를 다룰 때

생성자 패턴

Constructor(생성자 메서드)는 ECMAScript에서 특정 객체를 생성하는 데 사용할 수 있습니다. 이 모드는 위의 팩토리 모드가 객체 인스턴스를 식별할 수 없는 문제를 해결할 수 있습니다.

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

생성자 메서드를 사용하면 반복되는 인스턴스화 문제뿐만 아니라 객체 인식 문제도 해결됩니다. 이 모드와 팩토리 모드의 차이점은 다음과 같습니다.

1. 생성자 메서드는 객체를 명시적으로 생성하지 않습니다(new Object()). 2. 이 객체에 속성과 메소드를 직접 할당합니다.
3. 반품 명세서가 없습니다.

생성자 메서드에 대한 몇 가지 사양이 있습니다.

1. 함수 이름과 인스턴스화 생성자 이름이 동일하고 대문자로 표시됩니다(PS: 필수는 아니지만 이렇게 작성하면 생성자를 일반 함수와 구별하는 데 도움이 됩니다). 2. 생성자를 통해 객체를 생성하려면 new 연산자를 사용해야 합니다.

객체는 생성자를 통해 생성될 수 있으므로 이 객체는 어디에서 왔으며 new Object()는 어디에서 실행됩니까? 실행과정은 다음과 같습니다.

1. 생성자를 사용하고 new constructor()를 사용하면 백그라운드에서 new Object()가 실행됩니다. 2. 생성자의 범위를 새 객체(즉, new Object()에 의해 생성된 객체)에 부여하고 함수 본문의 이는 new Object()에 의해 생성된 객체를 나타냅니다.

3. 생성자 내에서 코드를 실행합니다.

4. 새 객체를 반환합니다(백그라운드에서 직접 반환).


프로토타입이 있는 생성자

js에는 프로토타입이라는 속성이 있습니다. js 생성자를 호출하여 객체를 생성한 후 새 객체는 생성자 프로토타입의 모든 속성을 갖게 됩니다. 이러한 방식으로 여러 Car 객체를 생성하고 동일한 프로토타입에 액세스할 수 있습니다.

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

        기능 자동차(모델,연도,마일) {

This.model = 모델;
올해.년 = 년;
This.miles = 마일;
}
Car.prototype.run = 함수 () {
                return this.model " has done " this.miles " Miles ";

};
        var Benz = 신차('S350',2010,20000);         var Ford = new Car('Ford',2012,12000);

console.log(Benz.run());//"S350이 20000마일을 주행했습니다"
console.log(Ford.run());

이제 run()의 단일 인스턴스를 모든 Car 객체에서 공유할 수 있습니다.