실제 Common LISP의 저자 인 Peter Seibel은 한 번 패턴이 필요한 경우 무언가 잘못되어야한다고 말했습니다. 그가 언급 한 문제는 언어의 고유 한 결함으로 인해 일반적인 해결책을 찾고 요약 할 필요성을 나타냅니다.
약하거나 강한 유형이든 정적 또는 역동적 인 언어, 명령 적 또는 설명 언어이든, 각 언어에는 고유 한 장점과 단점이 있습니다. 자메이카 선수는 스프린팅과 권투에도 몇 가지 장점이 있지만 요가 연습에는 일부 부족이 있습니다.
흑 마법사와 그림자 사제는 쉽게 훌륭한 보조 일 수 있으며, 등 뒤에 메이컨으로 날아 다니는 적의 마법은 약간 어색합니다. 프로그램으로 전환하려면 정적 언어로 데코레이터를 구현하는 데 많은 노력이 필요할 수 있습니다. JS는 언제든지 물체에 메소드를 던질 수 있으므로 Decorator 패턴은 JS에서 쓸모가 없습니다.
JavaScript 디자인 패턴에 관한 몇 권의 책이 있습니다. "Pro JavaScript Design Patterns"는 고전적인 책이지만, 그 예제는 매우 장점이므로 직장에서 쓴 코드를 바탕으로 이해를 요약 할 것입니다. 내 이해가 편견이 있다면 수정하십시오.
1. 싱글 톤 모드
싱글 톤 패턴의 정의는 클래스의 고유 한 인스턴스를 생성하는 것이지만 JS 자체는 "클래스가없는"언어입니다. JS 디자인 패턴에 대해 이야기하는 많은 기사는 {}를 싱글 톤으로 사용하고 의미가 있습니다. JS에 의해 객체를 생성하는 방법에는 여러 가지가 있기 때문에 또 다른 의미있는 싱글 톤을 살펴 보겠습니다.
버튼을 클릭 할 때 마스크 레이어가 페이지에 팝업되어야한다는 일반적인 요구 사항이 있습니다. 예를 들어, web.qq.com을 클릭하면 로그인 할 때.
회색 배경 마스크 레이어를 생성하는이 코드는 작성하기 쉽습니다.
코드 사본은 다음과 같습니다.
var createMask = function () {
return document, body.appendchild (document.createelement (div));
}
$ ( 'button') .click (function () {
var mask = createMask ();
mask.show ();
})
문제는이 마스크 레이어가 전 세계적으로 고유하므로 CreateMask를 호출 할 때마다 마스크 레이어를 숨길 때 제거 할 수 있지만 새로운 DIV가 생성됩니다. 그러나 이것을하는 것은 분명히 불합리합니다.
두 번째 솔루션을 살펴보고 페이지 시작 부분 에서이 DIV를 만듭니다. 그런 다음 변수로 참조하십시오.
코드 사본은 다음과 같습니다.
var mask = document.body.appendChild (document.createElement ( "div '));
$ ( "button ') .click (function () {
mask.show ();
})
이것은 페이지에 마스크 레이어 div 만 생성 될 것이라는 의미는 아니지만 또 다른 문제가 이어질 것입니다. 어쩌면 우리는이 마스크 레이어가 필요하지 않을 것입니다.이 마스크 레이어는 div를 낭비하고 Dom 노드의 작동에 대해 매우 인색해야합니다.
변수를 사용할 수 있다면 DIV가 생성되었는지 여부를 결정하십시오.
코드 사본은 다음과 같습니다.
var 마스크;
var createMask = function () {
if (마스크) 마스크를 반환합니다.
또 다른{
Mask = Document, Body.appendChild (Document.CreateElement (div));
리턴 마스크;
}
}
좋아 보이지만 여기서는 단일 열 객체를 생성하는 함수를 완성했습니다. 이 코드의 무엇이 잘못되었는지 자세히 살펴 보겠습니다.
우선,이 기능에는 특정 부작용이 있습니다. 함수는 기능 본문의 외부 변수 마스크에 대한 참조를 변경합니다. 다인원 협업 프로젝트에서 CreateMask는 안전하지 않은 기능입니다. 반면에 글로벌 변수 마스크는 필요한 마스크가 아닙니다. 개선합시다.
코드 사본은 다음과 같습니다.
var createMask = function () {
var 마스크;
return function () {
리턴 마스크 || (Mask = Document.body.appendChild (Document.CreateElement ( 'div'))))
}
} ()
간단한 클로저는 가변 마스크를 래핑하는 데 사용됩니다. 최소한 CreateMask 기능의 경우 닫힙니다.
어쩌면 이것을 볼 때 싱글 톤 패턴이 너무 간단하다고 생각합니다. 실제로 일부 디자인 패턴은 매우 간단합니다. 디자인 패턴의 개념에주의를 기울이지 않았음에도 불구하고 일일 코드에서 알지 못하고 디자인 패턴을 사용했습니다. 노인의 장바구니가 무엇인지 이해했을 때와 마찬가지로, 몇 년 전에 그것에 대해 생각했는데, 이것은 노인의 카트라는 것이 밝혀졌습니다.
GOF의 23 개 설계 패턴은 또한 소프트웨어 개발에 존재하고 반복적으로 사용 된 패턴입니다. 프로그래머가 자신이 특정 패턴을 사용했다는 사실을 분명히 인식하지 못하면 다음 번에 더 적합한 디자인을 놓칠 수 있습니다 (이 구절은 "Matsumoto의 프로그래밍 세계"에서 나옵니다.
주제로 돌아가 봅시다. 이전 싱글 톤에는 여전히 단점이 있습니다. 마스크 레이어 만 만드는 데만 사용될 수 있습니다. 고유 한 XHR 객체를 만들기 위해 함수를 작성 해야하는 경우 어떻게해야합니까? 일반 싱글 톤 래퍼를 찾을 수 있습니까?
JS의 함수는 첫 번째 유형이며, 이는 함수를 매개 변수로 전달할 수 있음을 의미합니다. 최종 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var singleton = function (fn) {
var 결과;
return function () {
반환 결과 || (결과 = fn .apply (this, arguments));
}
}
var createMask = Singleton (function () {
return document.body.appendChild (document.createElement ( 'div'));
})
변수를 사용하여 첫 번째 리턴 값을 저장하십시오. 지정된 경우 변수는 후속 통화에서 먼저 반환됩니다. 실제로 마스크 레이어를 생성하는 코드는 콜백 함수를 통해 싱글 톤 래퍼로 전달됩니다. 이 방법을 실제로 브리지 모드라고합니다. 브리지 모드와 관련하여 조금 나중에 놓습니다.
그러나 싱글 톤 함수는 완벽하지 않으므로 DIV에 대한 참조를 등록하려면 항상 변수 결과가 필요합니다. 불행히도, JS의 기능적 특성은 선언과 진술을 완전히 제거하기에 충분하지 않습니다.