JavaScript 관찰자 패턴(클래식)_javascript 팁

옵저버 패턴(Observer Pattern)이라고도 불리는 옵저버 패턴은 GoF에서 제안한 23가지 소프트웨어 디자인 패턴 중 하나입니다. 관찰자 패턴은 동작 패턴 중 하나이며, 그 기능은 객체의 상태가 변경되면 자동으로 다른 관련 객체에 알리고 객체 상태를 자동으로 새로 고칠 수 있다는 것입니다.

옵저버 패턴의 개념

관찰자 모드는 동작 모드 중 하나이며, 해당 기능은 개체의 상태가 변경될 때 다른 관련 개체에 자동으로 알리고 개체 상태를 자동으로 새로 고치는 것입니다.
관찰자 패턴은 연관된 객체에 대한 동기 통신 수단을 제공하여 객체와 이에 의존하는 다른 객체 간의 상태 동기화를 유지합니다.

관찰자 모드 역할:

제목(관찰)
관찰되고 있는 물체. 관찰해야 할 상태가 변경되면 대기열에 있는 모든 관찰자 개체에 알려야 합니다. 주체는 관찰자 개체의 대기열 목록을 유지(추가, 삭제, 알림)해야 합니다.
콘크리트주제
관찰된 사람의 구체적인 실현. 몇 가지 기본 속성 상태 및 기타 작업이 포함되어 있습니다.
관찰자
인터페이스 또는 추상 클래스. Subject의 상태가 변경되면 콜백 함수를 통해 Observer 객체에 통보됩니다.
콘크리트옵저버
관찰자의 구체적인 구현. 알림을 받은 후 일부 특정 비즈니스 로직 처리가 완료됩니다.

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

div.onclick = function click (){
alert ( ”click' )
}

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

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

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

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

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

loadImage 코드는 다음과 같습니다

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

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

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

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

loadImage.listen( ”ready', function(){
Map.init();
})
loadImage.listen( ”ready', function(){
Gamer.init();
})
loadImage.listen( ”ready', function(){
Sount.init();
})

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

loadImage.trigger( ”ready' );

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

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

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}

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

//订阅者
var adultTv = Event();
adultTv .listen( ”play', function( data ){
alert ( “今天是谁的电影” + data.name );
});
//发布者
adultTv .trigger( ”play', { ‘name': ‘麻生希' } )