자바스크립트 디자인 패턴 관찰자 패턴(Publisher-Subscriber Pattern)_javascript 기술

관찰자 패턴(게시자-구독자 패턴이라고도 함)은 가장 일반적으로 사용되는 패턴 중 하나이며 우리가 일반적으로 접하는 DOM 이벤트를 포함하여 js 간에도 구현됩니다. dom 관찰자 패턴입니다.

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

div.onclick = 함수 클릭(){
알림( '클릭' )
}

div의 클릭 이벤트를 구독하는 한 div를 클릭하면 함수 클릭이 실행됩니다.

그럼 관찰자 패턴이 무엇인지 먼저 생활 속의 관찰자 패턴을 살펴볼까요?

할리우드에는 "전화하지 마세요. 내가 전화하겠습니다."라는 유명한 말이 있습니다. 이 문장은 관찰자 패턴의 모든 것을 설명합니다. 여기서 "나"는 게시자이고 "당신"은 구독자입니다.

또 다른 예로 제가 회사에 면접보러 왔을 때 면접관들은 모두 면접이 끝난 후 저에게 "연락처를 남겨주시면 새로운 소식이 있으면 알려드리겠습니다."라고 말하곤 했습니다. 여기서 "나"는 구독자이고 인터뷰어는 출판사입니다. 그래서 매일, 매시간 면접 결과에 대해 물어볼 필요가 없습니다. 의사 소통의 주도권은 면접관에게 있습니다. 그리고 연락처 정보만 제공하면 됩니다.

관찰자 패턴은 두 모듈 간의 분리를 잘 달성할 수 있습니다. 팀에서 HTML5 게임을 개발 중이라고 가정해 보겠습니다. 게임이 시작되면 일부 이미지 자료를 로드해야 합니다. 이러한 이미지를 로드한 후 게임 로직이 실행됩니다. 이 프로젝트는 여러 사람의 협력이 필요하며 Gamer 및 Map 모듈을 완료했고 동료 A가 이미지 로더 loadImage를 작성했습니다.

loadImage의 코드는 다음과 같습니다.

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

loadImage(imgAry, function(){
Map.init();
Gamer.init();
} )

이미지가 로드되면 지도가 렌더링되고 게임 로직이 실행됩니다. 그런데 이 프로그램은 잘 실행됩니다. 어느 날 갑자기 게임에 사운드 기능을 추가해야 한다는 생각이 들었습니다. 이미지 로더.

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

loadImage(imgAry, function(){
Map.init();
Gamer.init();
Sound.init();
} )

그런데 이 모듈을 작성한 동료 A가 해외 여행을 갔는데, 안녕하세요. loadImage 함수를 바꾸면 어떤 부작용이 생길까요? 불안한 일이 일어났습니다. 다음과 같이 작성할 수 있다면 어떨까요?

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

loadImage.listen( "준비', function(){
Map.init();
})
loadImage.listen( "준비', function(){
Gamer.init();
})
loadImage.listen( "준비', function(){
Sound.init();
})

loadImage가 완료된 후에는 작업이 완료되었으므로 앞으로 무슨 일이 일어날지 신경쓰지 않습니다. 다음으로 신호만 게시하면 됩니다.

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

loadImage.trigger( "ready' );

그러면 loadImage의 'ready' 이벤트를 듣는 개체에게 알림이 전달됩니다. 마지막 인터뷰 예와 마찬가지로 면접관은 면접 결과를 받은 후 어디로 식사하러 갈지 전혀 신경 쓰지 않습니다. 지원자의 이력서를 함께 모아 면접 결과가 나오면 이력서에 기재된 전화번호로 한 명씩 통보해 드립니다.

많은 개념에 대해 이야기한 후 구현 과정은 실제로 매우 간단합니다. 면접관은 이력서를 상자에 넣은 다음 면접관이 상자에 있는 이력서를 하나씩 호출합니다. 결과를 알려줄 적절한 때입니다.

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

이벤트 = function() {
var 수신, 로그, obj, 하나, 제거, 트리거, __this;
obj = {};
__이것 = 이것;
Listen = function( key, eventfn ) { //이력서를 상자에 넣으세요. 열쇠는 연락처 정보입니다.
var stack, _ref; //스택은 상자입니다
스택 = ( _ref = obj[key] ) != null ? _ref : obj[ 키 ] = [];
return stack.push( eventfn );
};
하나 = 함수( 키, 이벤트fn ) {
제거(키);
return 수신( key, eventfn );
};
제거 = 기능( 키 ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
Trigger = function() { //면접관이 면접관에게 알리기 위해 호출
var fn, 스택, _i, _len, _ref, 키;
키 = Array.prototype.shift.call( 인수 );
스택 = ( _ref = obj[ 키 ] ) != null ? _ref : obj[ 키 ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i ) {
fn = 스택[ _i ];
if ( fn.apply( __this, 인수 ) === false) {
false를 반환합니다.
}
}
반환 {
들어요: 들어요
하나:하나,
제거: 제거,
트리거: 트리거
}
}

마지막으로 관찰자 모드를 사용해 소형 성인 TV 애플리케이션을 만들어 보겠습니다.

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

//구독자
var AdultTv = 이벤트();
AdultTv .listen( ”재생', function( 데이터 ){
경고("오늘 영화는 누구의 영화입니까?" data.name );
});
//출판사:
AdultTv .trigger( ”play', { 'name': '아소 노조미' } )