패턴이란 무엇입니까?
나는 얼마 전에 최종 시험을 준비하고 있었지만, 그것은 힘든 사람이었고 정말 바빴습니다. 기사를 업데이트 할 시간이 없었습니다. 오늘은 JavaScript의 디자인 패턴에 대해 알려 드리겠습니다.
우선, 우리가 알아야 할 것은 패턴은 재사용 가능한 솔루션이지만 방지 방지는 특정 문제에 대한 나쁜 해결책이라는 것입니다.
JS의 반포 반포의 일반적인 예
1. 함수가 아닌 settimeout 및 setInterval로 문자열을 통과하여 eval ()의 내부 사용을 트리거합니다.
2. 글로벌 네임 스페이스를 오염시키기 위해 글로벌 컨텍스트에서 많은 수의 변수를 정의합니다.
3. 객체 클래스의 프로토 타입을 수정하십시오
4. JS Inline을 사용하고 HTML 파일에 포함 된 JS 코드를 외부 장치 테스트 도구에 포함시킬 수 없습니다.
5. 학대 문서 .Write. 페이지를로드 한 후 heart.write를 실행하면 당사가있는 페이지를 다시 작성합니다. 대신 Document.CreatElement를 사용할 수 있으면 Document.Write를 사용하지 마십시오.
디자인 패턴 범주
디자인 패턴 생성
창의적인 디자인 패턴은 주어진 상황에 맞는 방식으로 객체를 만드는 객체 생성 메커니즘을 처리하는 데 중점을 둡니다. 이 범주에 속하는 속성에는 다음이 포함됩니다.
생성자 생성자, 공장 공장, 초록 추상화, 프로토 타입 프로토 타입, 싱글 톤 싱글 톤 및 빌더 생성기
구조 설계 패턴
구조 패턴은 객체 조합과 관련이 있으며 종종 다른 물체 간의 관계를 설정하는 간단한 방법을 찾는 데 사용될 수 있습니다.
이 범주에 속하는 패턴은 다음과 같습니다.
데코레이터 데코레이터, 외관 외관, 플라이급 백과 사전, 어댑터 어댑터 및 프록시 프록시
행동 설계 패턴
행동 패턴은 시스템의 다른 객체 간의 통신을 개선하거나 단순화하는 데 중점을 둡니다.
행동 패턴은 다음과 같습니다.
반복자 반복자, 중재자 중재자, 관찰자 관찰자 및 방문자 방문자
공장 모드
여러 유사한 객체 선언의 문제를 해결하기 위해 공장 패턴이라는 방법을 사용할 수 있습니다.이 방법은 많은 복제로 개체를 인스턴스화하는 문제를 해결하는 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 createobject (이름, 연령, 직업) {// 중앙 인스턴스형 기능 {//
var obj = new Object ();
obj.name = 이름;
obj.age = 나이;
obj.profession = 직업;
obj.move = function () {
' + this.age +'에서 ' +' + ' +' + 'this.name +'를 반환하십시오.
};
반환 obj;
}
var test1 = createobject ( 'trigkit4', 22, 'programmer'); // 첫 번째 인스턴스
var test2 = createObject ( 'Mike', 25, 'Engineer'); // 두 번째 인스턴스
알림 (test1.move ());
alert (test2.move ());
</스크립트>
공장 모델의 범주
공장 패턴은 단순한 공장, 추상 공장 및 스마트 공장으로 나뉩니다. 공장 패턴은 생성자를 표시하지 않고 사용해야합니다.
간단한 공장 패턴 : 클래스 (일반적으로 단량체)를 사용하여 인스턴스를 생성합니다.
복잡한 공장 패턴 : 서브 클래스를 사용하여 멤버 변수의 특정 클래스 인스턴스를 결정하십시오.
공장 모델의 이점
주요 장점은 새로운 키워드 대신 엔지니어링 방법을 사용하여 객체 간의 커플 링을 제거 할 수 있다는 것입니다. 코드 복제를 방지하기 위해 모든 인스턴스형 코드를 한 곳에 집중하십시오.
공장 모델의 단점
대부분의 클래스는 새로운 키워드 및 생성자와 함께 사용되므로 코드를 쉽게 읽을 수 있습니다. 공장 방법을 확인하는 대신
공장 패턴은 반복적 인 인스턴스화의 문제를 해결하지만 또 다른 문제가 있습니다. 즉, 문제를 식별하는 것은 객체의 인스턴스를 파악할 수 없기 때문에 문제를 식별합니다.
코드 사본은 다음과 같습니다.
경고 (typeof test1); //물체
경고 (test1 인스턴스 객체); //진실
공장 모드를 언제 사용해야합니까?
공장 모드는 주로 다음 시나리오에서 사용됩니다.
1. 객체 또는 구성 요소가 높은 복잡성을 포함하는 경우
2. 다른 환경에 따라 다른 객체 인스턴스를 쉽게 생성 해야하는 경우
3. 동일한 속성을 공유하는 많은 작은 개체 또는 구성 요소를 처리 할 때
생성자 모드
ECMAScript에서 생성자 (생성자)를 사용하여 특정 객체를 작성할 수 있습니다. 이 모드는 위의 공장 모드가 객체 인스턴스를 인식 할 수없는 문제를 해결할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능 차량 (모델, 연도, 마일) {// 생성자 모드
this.model = 모델;
this.year = 년;
this.miles = 마일;
this.run = function () {
model + "님이" + this.miles + "miles"를 반환합니다.
}
}
var benz = 새로운 자동차 ( 'Benz', 2014,20000);
var bmw = 새 차 ( "BMW", 2013,12000);
경고 (벤츠 인스턴스); // 나는 그것을 자동차의 종속으로 명확하게 식별합니다
console.log (benz.run ());
console.log (bmw.run ());
</스크립트>
생성자 방법을 사용하면 반복 된 인스턴스화 문제와 객체 인식 문제가 해결됩니다. 이 패턴과 공장 패턴의 차이점은 다음과 같습니다.
1. 생성자 메소드에 의해 표시되지 않는 개체 (new Object ())을 작성합니다.
2.이 객체에 속성과 방법을 직접 할당하십시오.
3. 반환 명세서 없음.
생성자 방법에 대한 몇 가지 사양이 있습니다.
1. 함수 이름과 인스턴스턴스 생성자는 동일하고 대문자가되어 있습니다 (PS : 필수는 아니지만 작성하는 것은 생성자와 일반 기능을 구별하는 데 도움이됩니다).
2. 생성자를 통해 객체를 만들려면 새 연산자를 사용해야합니다.
생성자를 통해 객체를 만들 수 있기 때문에이 객체는 어디에서 왔으며 새 개체 ()는 어디에서 실행 되었습니까? 실행 프로세스는 다음과 같습니다.
1. 생성자가 사용되고 새 생성자 ()가 사용되면 새로운 개체 ()가 백그라운드에서 실행됩니다.
2. 생성자를 새 개체 (즉, new Object ()로 만든 객체)로 범위로, 기능 본문에서 이것은 new Object ()에 의해 생성 된 객체를 나타냅니다.
3. 생성자 내에서 코드를 실행합니다.
4. 새 개체를 반환합니다 (백그라운드에서 직접 반환).
프로토 타입이있는 생성자 (생성자)
JS에는 프로토 타입이라는 속성이 있습니다. 객체를 생성하기 위해 JS 생성기를 호출 한 후 새 개체는 생성자 프로토 타입의 모든 특성을 갖습니다. 이러한 방식으로 여러 차량 객체를 만들 수 있으며 동일한 프로토 타입에 액세스 할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능 차량 (모델, 연도, 마일) {
this.model = 모델;
this.year = 년;
this.miles = 마일;
}
car.prototype.run = function () {
model + "님이" + this.miles + "miles"를 반환합니다.
};
var 벤츠 = 새로운 자동차 ( 'S350', 2010,20000);
var ford = 새 차 ( '포드', 2012,12000);
Console.log (Benz.run ()); // "S350은 20000 마일을 완료했습니다"
console.log (ford.run ());
</스크립트>
이제 Run ()의 단일 인스턴스를 모든 자동차 객체 중에서 공유 할 수 있습니다.