이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!