JavaScript에서 가벼운 기본 이벤트 버스를 만들어 봅시다

이벤트 버스는 디자인 패턴입니다 (여기서는 JavaScript에 대해 논의 할 것이지만 모든 언어의 디자인 패턴) 다른 구성 요소 간의 통신을 단순화하는 데 사용할 수 있습니다. 또한 게시/구독 또는 Pubsub로 간주 될 수 있습니다.

아이디어는 구성 요소가 이벤트 버스를들을 수 있으며 작업이 수행 될 때 이해할 수 있다는 것입니다. 예를 들어, 탭 패널 구성 요소는 활성 탭이 변경되었음을 나타내는 이벤트를들을 수 있습니다. 물론 이것은 탭 중 하나를 클릭하여 발생할 수 있으므로 해당 구성 요소 내에서 전적으로 처리됩니다. 그러나 이벤트 버스를 사용하면 다른 요소가 탭에 변경하여 변경할 수 있습니다. 양식 제출이 사용자가 특정 탭에서 경고를 받게하는 오류를 상상해보십시오. 따라서 양식은 이벤트 버스로 메시지를 보내어 탭 구성 요소에 오류가 포함 된 탭으로 활성 탭을 변경하도록 지시합니다. 이것이 이벤트 버스에서의 모습입니다.

이 경우의 의사 코드는 다음과 같습니다.

 // 탭 구성 요소 탭. changetab = id => {
  // 활성 탭의 DOM 작업을 변경합니다.
};
MyeventBus.Subscribe ( "Change-TAB", Tabs.Changetab (ID));

// 기타 구성 요소 ...
// 어떤 일이 발생하고 다음과 같은 일이 발생합니다.
myeventbus.publish ( "Change-Tab", 2);

이것을 구현하려면 JavaScript 라이브러리가 필요합니까? (팁 질문 : JavaScript 라이브러리가 필요 하지 않습니다 ). 글쎄, 많은 옵션이 있습니다.

• pubsubjs
• 이벤트 미터 3
• postal.js
• JQuery는이 패턴과 매우 관련이있는 사용자 정의 이벤트를 지원합니다.

또한 200 바이트의 GZIP 만있는 라이브러리 인 Mitt를 확인하십시오. 이 간단한 패턴은 사람들이 가능한 한 간결한 방식으로 스스로 해결하도록 영감을주었습니다.

스스로 해보자! 우리는 타사 라이브러리를 전혀 사용하지 않고 대신에 이미 JavaScript에 내장 된 이벤트 청취 addEventListener 을 활용합니다.

먼저, 어떤 맥락

JavaScript의 addEventListener API는 EventTarget 클래스의 멤버 기능입니다. 클릭 이벤트를 버튼에 바인딩 할 수있는 이유는 ( HTMLButtonElement )의 프로토 타입 인터페이스가 EventTarget 에서 간접적으로 상속되기 때문입니다.

대부분의 다른 DOM 인터페이스와 달리 new 키워드를 사용하여 EventTarget 직접 만들 수 있습니다. 모든 현대식 브라우저에서 지원되지만 최근에야. 위의 스크린 샷에서 볼 수 있듯이 Node EventTarget 상속하므로 모든 DOM 노드에는 Method addEventListener 가 있습니다.

팁

이벤트 청취 버스 : HTML 주석 ( <!-- --> )으로 매우 가벼운 노드 유형을 사용하는 것이 좋습니다.

브라우저 렌더링 엔진의 경우 HTML 주석은 코드의 주석 일뿐 아니라 개발자에게 설명 텍스트를 제공하는 것 외에는 기능이 없습니다. 그러나 주석은 여전히 ​​HTML로 작성되었으므로 DOM에 실제 노드로 나타나고 Node 에서 상속되는 자체 프로토 타입 인터페이스 ( Comment )가 있습니다.

Comment 클래스는 EventTarget 과 마찬가지로 new 부터 직접 생성 할 수 있습니다.

 const myeventbus = 새로운 댓글 ( 'my-event-bus');

우리는 또한 고대이지만 널리 지원되는 document.createComment 사용할 수 있습니다. 데이터 매개 변수, 즉 주석의 내용이 필요합니다. 빈 문자열 일 수도 있습니다.

 const myeventbus = document.createcomment ( 'my-event-bus');

이제 dispatchEvent 사용하여 Event 객체를 수락하는 이벤트를 발행 할 수 있습니다. 사용자 정의 이벤트 데이터를 전달하려면 CustomEvent 사용하십시오. detail 필드를 사용하여 모든 데이터를 포함 할 수 있습니다.

 myeventbus.dispatchevent (
  새로운 customevent ( 'event-name', {
    세부 사항 : '이벤트 데이터'
  })
);

Internet Explorer 9-11은 CustomEvent 지원하지만 new CustomEvent 지원하는 버전은 없습니다. document.createEvent 사용하여 시뮬레이션을 시뮬레이션하기 위해 Createevent를 사용하는 것이 복잡하므로 IE 지원이 중요하다면이를 채울 방법이 있습니다.

이제 이벤트 리스너를 묶을 수 있습니다.

 myeventBus.addeventListener ( 'event-name', ({detail}) => {
  Console.log (세부 사항); // => 이벤트 데이터
});

이벤트가 한 번만 해고되기 의도 된 경우 일회성 바인딩에 { once: true } 사용할 수 있습니다. 다른 옵션은 여기에 적합하지 않습니다. 이벤트 리스너를 제거하기 위해 기본 removeEventListener 사용할 수 있습니다.

디버그

단일 이벤트 버스에 묶인 이벤트 수는 매우 클 수 있습니다. 삭제하는 것을 잊어 버리면 메모리 누출이있을 수 있습니다. myEventBus 에 얼마나 많은 이벤트가 구속되어 있는지 알고 싶다면 어떻게해야합니까?

myEventBus 는 DOM 노드이므로 브라우저의 DevTools가 확인할 수 있습니다. 그곳에서 요소 → 이벤트 리스너 탭에서 이벤트를 찾을 수 있습니다. document 와 window 에 묶인 이벤트를 숨기려면 "조상"을 선택 취소하십시오.

예

한 가지 단점은 EventTarget 의 구문이 약간 장점이라는 것입니다. 우리는 그것을 위해 간단한 래퍼를 쓸 수 있습니다. 다음은 TypeScript의 데모입니다.

 클래스 이벤트 버스<detailtype any> {
  개인 이벤트 타겟 : EventTarget;
  생성자 (description = '') {this.eventTarget = document.appendChild (document.createComment (description)); }
  on (유형 : 문자열, 리스너 : (이벤트 : customevent<detailtype> ) => void) {this.eventTarget.addeventListener (유형, 리스너); }
  일단 (유형 : 문자열, 리스너 : (이벤트 : customevent<detailtype> ) => void) {this.eventTarget.adeventListener (type, listener, {일단 : true}); }
  OFF (유형 : 문자열, 리스너 : (이벤트 : customevent<detailtype> ) => void) {this.eventTarget.removeEventListener (유형, 리스너); }
  emit (type : string, detail? : detailType) {return this.eventTarget.dispatchEvent (new customevent (type, {redafl})); }
}

// 사용법 const myeventBus = 새로운 이벤트 버스<string> ( 'My-Event-Bus');
myeventbus.on ( 'event-name', ({detail}) => {
  Console.log (세부 사항);
});

myeventbus.once ( 'event-name', ({detail}) => {
  Console.log (세부 사항);
});

myeventbus.emit ( 'event-name', 'hello'); // => 안녕하세요 안녕하세요
myeventbus.emit ( 'event-name', 'world'); // => 세계</string></detailtype></detailtype></detailtype></detailtype>

다음 데모는 컴파일 된 JavaScript를 제공합니다.

그게 다야! 방금 한 구성 요소가 다른 구성 요소에 변경 사항을 알리기 위해 다른 구성 요소에 알릴 수있는 종속성 이벤트 청취 버스를 만들었습니다. 이러한 작업을 수행하는 데 완전한 라이브러리가 필요하지 않으며,이를 켜질 가능성은 무제한입니다.

위 내용은 JavaScript에서 가벼운 기본 이벤트 버스를 만들어 봅시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!