JavaScript EventEmitter의 기본 논리 분석

이번에는 JavaScript EventEmitter 기본 로직 분석을 가지고 왔습니다. JavaScript EventEmitter 기본 로직 분석의 Notes는 무엇이며, 다음은 실제 사례입니다. 살펴보겠습니다.

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

이벤트 이미터는 이벤트를 트리거하는 것처럼 들리며 무엇이든 이 이벤트를 수신할 수 있습니다.

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

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

여기서 우리의 목표는 자체 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 함수를 호출하면, 우리가 삭제하는 함수는 구독 함수 컬렉션의 필터링 방법(배열 필터)에 따라 달라집니다.

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

위 내용은 JavaScript EventEmitter의 기본 논리 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!