npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

magic-tools

v1.2.8

Published

huynq js tools

Readme

Cái gì đây?

Đây là 1 thư viện chứa các công cụ nhỏ hỗ trợ xử lý javascript được thuận tiện. Hiện tại thư viện mới chỉ có 2 công cụ: EventEmitter và Queue

1. EventEmitter

EventEmitter là gì?

Chúng ta không còn xa lạ với xử lý events DOM ở javascript nữa phải không? Nếu chúng ta lắng nghe event 'click' bằng onClick hoặc addEventListener thì: Khi Button A bị người dùng click, event 'click' sẽ được trigger, callback trong eventListener sẽ được thực hiện. tools EventEmitter này cũng có tác dụng tương tự. Nhưng nó không phải dùng để xử lý events DOM mà là để tạo, quản lý và xử lý các events riêng của chúng ta trong javascript (Hoạt động trên cả Node.JS và JS browser)

Các trường hợp sử dụng?

  • Giả dụ chúng ta có 2 function nằm ở 2 module js khác nhau trong cùng 1 project. Giả dụ function B đang chạy, đến 1 bước nào đó, cần đợi 1 global variable được khởi tạo bởi function A có giá trị thì mới thực hiện tiếp. Trong trường hợp này chúng ta xử lý thế nào? Ex:
  • Function A ở module 1.js:` var x = undefined; (function A() { console.log("start A"); setInterval(() => { const timestamp = new Date().getTime();

    if(timestamp % 5 === 0) {
      x = timestamp;
    }

    }, 2000); })(); `

  • Function B ở module 2.js:` (function B() { console.log("start B"); /* Xử lý abcdxyz gì đó ở chỗ này */

    // Sau đó làm thế nào để đợi có giá trị của biến x để thực thi console.log("end B", x); })(); `

Tất nhiên là chúng ta có thể sử dụng callback để xử lý vấn đề này. Tuy nhiên, chúng ta sẽ phải đối mặt với một số vấn đề:

  • phải export function B ở module 2.js và import lại ở module 1.js hoặc phải tạo thêm biến global để lưu callback
  • Giả sử như muốn function B chỉ được thực thi 2 lần khi timestamp chia hết cho 5 rồi thôi thì xử lý thế nào? Tất nhiên là có thể chọc vào và sửa code function A tuy nhiên nó sẽ làm đoạn code trở nên cồng kềnh hơn
  • Và một cái vấn đề quan trọng nhất là khi bê function B vào trong vị trí module 1.js nó sẽ làm mất đi tính rõ ràng, minh bạch và riêng biệt giữa các module Tất cả những vấn đề trên có thể giải quyết dễ dàng bằng thư viện EventEmitter này. Tất nhiên mình không nói đây là phương pháp duy nhất, nhưng đối với mình thì đây là giải pháp tối ưu để giải quyết những vấn đề được nêu trên