JavaScript_javascript 팁의 게시/구독 패턴에 대한 간단한 예-JS 튜토리얼-php.cn

JavaScript_javascript 팁의 게시/구독 패턴에 대한 간단한 예

WBOY

풀어 주다： 2016-05-16 16:32:08

원래의

1277명이 탐색했습니다.

저번에 관찰자 모드에 대해 공부했을 때 많은 기사에서 Subscribe/Publish(게시/구독 모드)라고도 한다고 했습니다. 그러나 "Javascript Design Patterns"라는 책에는 이 두 패턴 사이에 여전히 약간의 차이점이 있습니다. 책에 나온 원문은 다음과 같습니다.

1. 관찰자 모드에서는 주제 알림을 받으려는 관찰자가 콘텐츠 변경 이벤트를 구독해야 합니다.

2.구독/게시 모드는 구독자와 게시자 사이에 있는 주제/이벤트 채널을 사용합니다. 이벤트 시스템을 사용하면 코드에서 구독자에게 필요한 값이 포함된 사용자 정의 매개변수를 전달할 수 있는 애플리케이션별 이벤트를 정의할 수 있습니다. 그 목적은 구독자와 게시자 간의 종속성을 방지하는 것입니다.

모든 구독자가 적절한 이벤트 핸들러를 실행하여 게시자로부터 알림을 등록하고 받을 수 있다는 점에서 관찰자 패턴과 다릅니다.

글쎄요, 모르겠어요. 제가 이해한 내용은 다음과 같습니다.

1. 관찰자 패턴에서는 대상 객체가 관찰자를 유지하는 역할을 담당합니다. 게시/구독 모델에서 게시자는 구독자에 대해 신경 쓰지 않고 메시지를 삭제하는 작업만 담당합니다.

2. 관찰자 패턴에서는 관찰자가 인터페이스를 제공해야 하며, 대상 객체가 대상 상태와 일치하도록 자체 상태가 변경될 때 이 인터페이스를 호출해야 합니다. 즉, 모든 관찰자는 통일된 인터페이스를 가져야 합니다(예를 들어 위에서 작성한 업데이트 메소드, 모든 사람의 메소드는 이 이름으로 불려야 합니다). 게시/구독 모델에서 구독자 이벤트의 트리거는 이러한 인터페이스에 의존하지 않지만 특정 메시지(이 메시지에는 일반적으로 구독자가 요구하는 이름과 매개변수가 포함되어 있음)를 수신하여 구독자가 트리거합니다. 구독자가 모니터링하는 것은 게시자가 아니라 메시지 풀에 관심 있는 메시지가 있으면 메시지를 게시한 사람이 누구인지에 관계없이 이벤트가 발생한다는 것을 알 수 있습니다. 게시자와 구독자는 분리됩니다.

다음은 js의 게시/구독 모드 구현입니다. 복사하여 콘솔에 붙여넣고 사용해 보세요.

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

var pubsub = (함수(){

var q = {}

주제 = {},

        subUid = -1;

//뉴스 게시

​ q.publish = function(topic, args) {

If(!topics[주제]) {return;}

      var subs = 주제[주제],

            len = subs.length;

​​​​동안(len--) {

              subs[len].func(topic, args);

}

         이것을 돌려주세요;

};

//이벤트 구독

​ q.subscribe = function(topic, func) {

주제[주제] = 주제[주제] ? 주제[주제] : [];

      var token = ( subUid).toString();

주제[주제].push({

토큰 : 토큰,

              func : func

        });

         토큰 반환

};

q를 돌려주세요;

//구독을 취소하고 주제를 순회한 다음 저장하여 토큰을 반환하고 지정된 요소를 삭제하면 더 이상 쓰기가 필요하지 않습니다 

})();

//트리거된 이벤트

var logmsg = 함수(주제, 데이터) {

console.log("로깅:" 주제 ":" data);

}

//지정된 메시지 'msgName' 듣기

var sub = pubsub.subscribe('msgName', logmsg);

//'msgName' 메시지 게시

pubsub.publish('msgName', 'hello world');

//모니터링되지 않는 메시지 'msgName1' 게시

pubsub.publish('anotherMsgName', '나도!');