Technical Learning

Once Handling in EventEmitter

EventEmitter Initial Version class EventEmitter{ constructor(){ this.events={} } on(type,listener){ if(!this.events[type]){ this.events[type]=[] } this.events[type].push(listener) } emit(type,...args){ this.events[type].forEach(listener=>{ listener.call(this,...args) }) } off(type,listener){ if(this.events[type]){ const index=this.events[type].indexOf(listener) if(index!==-1){ this.events[type].splice(index,1) } } } once(type,listener){ const onceListener=(...args)=>{ listener.call(this,...args) this.off(type,onceListener) } this.on(type,onceListener) } } Testing const eventEmitter=new EventEmitter() const listener=(args)=>{ console.log(args); } eventEmitter.once('test',listener) eventEmitter.off('test',listener) eventEmitter.emit('test',{a:1}) When executing the above code, you’ll find that the test event was triggered once, but it should not execute because it was turned off. The solution is as follows.

Mar 18, 2025

Click-to-Component Source Code Analysis

Click-to-component is a React component that enables one-click navigation to source code, significantly improving development efficiency. Here I attempt to read the source code and document key points. Source Code Structure The project uses pnpm as the package management tool, with pnpm workspace managing multiple packages.

Dec 31, 2024

Reading the Meituan Homepage HTML Source

A tour of the Meituan homepage markup covering SEO tags, DNS prefetching, async/defer, IIFEs, and more front-end details.

Oct 10, 2020

Important Details to Note When Using Antd

This article introduces important details to note when using Antd, including advantages, implementation details, and related resources to improve efficiency.

Feb 20, 2020

Redux-Thunk Source Code Walkthrough

Step-by-step walkthrough of redux-thunk’s implementation: how it wires into Redux, how applyMiddleware composes dispatch, and why thunk differs from saga.

Oct 5, 2019

JSX.Element vs React.ReactNode Comparison

This article provides a detailed comparison between JSX.Element and React.ReactNode types in React with TypeScript, including their differences, usage scenarios, and practical examples from antd source code.

Sep 28, 2019