JS EventEmitter 사례 튜토리얼

이번에는 JS EventEmitter 사례 튜토리얼을 가져왔습니다. JS EventEmitter 사용 시 주의사항은 무엇인가요?

여기서 우리의 목표는 자체 Event Emitter를 만들어 그 뒤에 숨은 비밀을 이해하는 것입니다. 그럼 다음 코드가 어떻게 작동하는지 살펴보겠습니다. 필요한 친구는 이를 참조할 수 있습니다.

이벤트 이미터란 무엇인가요?

이벤트 이미터는 마치 이벤트를 트리거하는 것처럼 들립니다.

이 시나리오를 상상해 보세요. 비동기 코드에서 일부 이벤트가 발생하도록 "호출"하고 다른 부분이 "호출"을 듣고 생각을 등록하도록 하세요.

다양한 목적으로 이벤트 이미터 패턴을 구현하는 다양한 방법이 있지만 기본 아이디어는 이벤트 관리 및 구독 기능을 갖춘 프레임워크를 제공하는 것입니다.

여기서 우리의 목표는 자체 Event Emitter를 만들어 그 뒤에 숨은 비밀을 이해하는 것입니다. 그럼 아래 코드가 어떻게 작동하는지 살펴보겠습니다.

let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h1 = document.querySelector("h1");
button.addEventListener("click", () => {
  emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
  h1.innerHTML = `Your name is: ${data.name}`;
});

시작해 보세요.

class EventEmitter {
  constructor() {
    this.events = {};
  }
}

먼저 EventEmiiter 클래스를 생성하고 이벤트의 빈 객체 속성을 초기화합니다. 이 이벤트 속성의 목적은 이벤트 컬렉션을 저장하는 것입니다. 이 이벤트 개체는 이벤트 이름을 키로 사용하고 구독자 컬렉션을 값으로 사용합니다. (각 구독자를 함수로 생각할 수 있습니다).

구독 함수

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
}

이 구독 함수는 이벤트 이름을 가져옵니다. 이전 예에서는 이벤트가 호출될 때 "event:name-changed" 以及传入一个回调，当有人调用 emit(또는 비명) 콜백이었습니다.

JavaScript 함수의 장점 중 하나는 함수는 첫 번째 개체이므로 이전 구독 방법과 마찬가지로 함수를 다른 function의 매개 변수로 전달할 수 있습니다.

이 이벤트가 등록되지 않은 경우 처음으로 초기 값을 설정해야 합니다. 이벤트 이름은 키로 빈 배열을 초기화하고 할당한 다음 이 배열에 함수를 넣어서 이 이벤트를 방출을 통해 호출합니다.

함수 호출

emit(eventName, data) {
  const event = this.events[eventName];
  if (event) {
    event.forEach(fn => {
      fn.call(null, data);
    });
  }
}

이 호출 함수는 이벤트 이름("호출"하려는 이벤트 이름)과 이 이벤트에 전달하려는 데이터입니다. 이 이벤트가 이벤트에 존재하는 경우 데이터를 사용하여 구독된 모든 메서드를 반복합니다. 위의 코드는 우리가 말한 모든 것을 할 수 있습니다. 하지만 더 이상 필요하지 않은 구독을 등록 취소할 수 있는 방법이 필요합니다. 그렇게 하지 않으면 메모리 누수가 발생하기 때문입니다.

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
  return () => {
    this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
  }
}

JavaScript 함수는 첫 번째 객체이므로 함수에서 함수를 반환할 수 있습니다. 이제 다음과 같이 등록되지 않은 함수를 호출할 수 있습니다. unregister 함수를 호출하면, 우리가 삭제하는 함수는 구독 함수 컬렉션의 필터링 방법(배열 필터)에 따라 달라집니다.

메모리 누수와 작별하세요!

위 내용은 JS EventEmitter 사례 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!