JavaScript 디자인 패턴 싱글톤 패턴 example_javascript 기술

"Practical Common Lisp"의 저자인 Peter Seibel은 패턴이 필요하다면 뭔가 잘못된 것이라고 말했습니다. 그가 말하는 문제는 언어의 본질적인 결함 때문에 보편적인 해결책을 찾아 요약해야 한다는 것이다.

약한 형식이든 강력한 형식이든, 정적 언어든 동적 언어든, 명령형 언어든 선언적 언어든, 모든 언어에는 고유한 장점과 단점이 있습니다. 자메이카 선수는 단거리 달리기와 심지어 복싱에도 어느 정도 장점이 있지만 요가 연습에는 부족합니다.

워록과 섀도우 프리스트는 쉽게 훌륭한 지원군이 될 수 있지만, 메이컨을 등에 업고 맵을 돌아다니는 적 마법사는 약간 어색할 것입니다. 프로그램으로 전환하면 정적 언어로 데코레이터를 구현하는 데 많은 노력이 필요할 수 있지만 js는 언제든지 객체에 메서드를 던질 수 있으므로 js에서는 데코레이터 패턴이 쓸모가 없게 되었습니다.

JavaScript 디자인 패턴을 다루는 책은 상대적으로 적습니다. "Pro javaScript 디자인 패턴"은 고전적인 책이지만, 그 안에 들어 있는 예제가 꽤 장황해서 제가 직장에서 작성한 코드와 결합해 보았습니다. 요약하다. 제가 이해한 내용에 차이가 있는 경우 언제든지 정정해 주시기 바랍니다.

1. 싱글톤 모드

싱글턴 패턴의 정의는 클래스의 고유한 인스턴스를 생성하는 것이지만 js 자체는 "클래스 없는" 언어입니다. js 디자인 패턴에 관해 이야기하는 많은 기사에서는 {}를 싱글톤으로 사용하는데, 이는 거의 의미가 없습니다. js에서 객체를 생성하는 방법은 다양하므로 좀 더 의미 있는 또 다른 싱글톤을 살펴보겠습니다.

버튼을 클릭하면 페이지에 마스크 레이어가 팝업되어야 하는 일반적인 요구 사항이 있습니다. 예를 들어 web.qq.com에 로그인하기 위해 클릭하는 경우입니다.

회색 배경 마스크 레이어를 생성하는 코드는 작성하기가 매우 쉽습니다.

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

var createMask = function(){
return document,body.appendChild( document.createElement(div) );
}
$( '버튼' ).click( function(){
Var 마스크 = createMask();
마스크.쇼();
})

문제는 이 마스크 레이어가 전역적으로 고유하므로 createMask가 호출될 때마다 새 div가 생성된다는 점입니다. 마스크 레이어를 숨길 때 이를 제거할 수는 있지만 이는 분명히 무리입니다.

두 번째 옵션을 살펴보겠습니다. 페이지 시작 부분에 이 div를 만든 다음 변수를 사용하여 참조하세요.

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

var 마스크 = document.body.appendChild( document.createElement( ”div' ) );
$( ”버튼' ).click( function(){
마스크.쇼();
} )

이렇게 하면 페이지에 하나의 마스크 레이어 div만 생성되지만 또 다른 문제가 뒤따르게 됩니다. 아마도 이 마스크 레이어가 필요하지 않을 것입니다. 이는 다른 div를 낭비하게 되며 DOM 노드에 대한 모든 작업은 다음과 같아야 합니다. 엄청 인색해요.

변수를 사용하여 div가 생성되었는지 확인할 수 있다면 어떨까요?

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

var 마스크;
var createMask = function(){
if (마스크) 마스크 반환;
그렇지 않으면{
마스크 = document,body.appendChild( document.createElement(div) );
마스크 반납;
}
}

좋아 보입니다. 이제 단일 열 객체를 생성하는 함수가 완성되었습니다. 이 코드에 어떤 문제가 있는지 자세히 살펴보겠습니다.

우선, 이 함수에는 외부 변수 마스크에 대한 참조가 함수 본문 내에서 변경되는 반면, createMask는 안전하지 않은 함수입니다. 마스크는 꼭 필요한게 아닙니다. 다시 개선해보겠습니다.

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

var createMask = function(){
var 마스크;
반환 함수(){
마스크 반환 || ( 마스크 = document.body.appendChild( document.createElement('div') ) )
}
}()

간단한 클로저는 변수 마스크를 래핑하는 데 사용되며, 최소한 createMask 함수의 경우 닫힙니다.

이것을 보면 싱글턴 패턴이 너무 단순하다고 느낄 수도 있습니다. 실제로 일부 디자인 패턴은 디자인 패턴의 개념에 대해 전혀 주의를 기울이지 않았더라도 일상 생활에서 무의식적으로 사용하고 있습니다. 코드. 디자인 패턴. 몇 년 전 노인의 유모차가 무엇인지 알았을 때와 마찬가지로 이것도 노인의 유모차라는 것을 알게 되었습니다.

GOF에 포함된 23가지 디자인 패턴 역시 오랫동안 존재해 왔으며 소프트웨어 개발에 반복적으로 사용되어 온 패턴입니다. 프로그래머가 자신이 특정 패턴을 사용했다는 사실을 명확하게 깨닫지 못하면 다음 번에는 더 적합한 디자인을 놓칠 수도 있습니다. "마츠모토 유키히로의 프로그래밍 세계"에서 발췌한 내용입니다.

주제로 돌아가서, 이전 싱글톤에는 여전히 단점이 있습니다. 마스크 레이어를 생성하는 데에만 사용할 수 있습니다. 고유한 xhr 객체를 생성하는 함수를 작성해야 하는 경우에는 어떻게 해야 합니까?

js의 함수는 첫 번째 유형이므로 함수를 매개변수로 전달할 수도 있습니다.

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

var 싱글턴 = 함수( fn ){
var 결과;
반환 함수(){
결과 반환 || ( 결과 = fn .apply( this, 인수 ) );
}
}
var createMask = 싱글톤( function(){
return document.body.appendChild( document.createElement('div') );
})

변수를 사용하여 첫 번째 반환 값을 저장합니다. 이미 할당된 경우 후속 호출에서 변수가 먼저 반환됩니다. 실제로 마스크 레이어를 생성하는 코드는 콜백 함수를 통해 싱글톤에 전달됩니다. 이 방식을 브릿지 모드라고 합니다. 브릿지 모드에 대해서는 잠시 후에 다루겠습니다.

그러나 싱글톤 함수는 아직 div의 참조를 저장하기 위한 변수 결과가 필요합니다. 불행하게도 선언과 명령문을 완전히 제거하기에는 js의 기능적 특성이 충분하지 않습니다.