# Event Bus Trong JavaScript và TypeScript 🚍 **Event Bus** là một trung tâm **publish/subscribe** đơn giản giúp các module có thể giao tiếp mà không cần tham chiếu trực tiếp đến nhau. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Event Bus trong JavaScript và TypeScript, những lợi ích, cũng như một số mẫu sử dụng thực tế. ## Mục Lục 1. [Tại sao nên sử dụng Event Bus?](#tại-sao-nên-sử-dụng-event-bus?) 2. [Triển khai JavaScript tối giản và nhanh chóng](#triển-khai-javascript-tối-giản-và-nhanh-chóng) 3. [Event Bus với TypeScript](#event-bus-với-typescript) 4. [Mẫu sử dụng trong React](#mẫu-sử-dụng-trong-react) 5. [Node.js: Bạn đã có một Event Bus](#nodejs-bạn-đã-có-một-event-bus) 6. [Mẹo và cạm bẫy](#mẹo-và-cạm-bẫy) 7. [Tóm tắt nhanh](#tóm-tắt-nhanh) ## Tại sao nên sử dụng Event Bus? Sử dụng Event Bus mang lại nhiều lợi ích, bao gồm: - **Tách biệt**: Các nhà xuất bản không cần phải nhập các nhà đăng ký, giúp giảm độ phụ thuộc giữa các module. - **Giao tiếp có thể tái sử dụng**: Một tín hiệu có thể dẫn đến nhiều phản ứng độc lập. - **Rất hữu ích cho**: các tín hiệu xác thực, các thông báo, phân tích, và phối hợp giữa các tính năng. > Lưu ý: Nên sử dụng bus một cách **tiết kiệm**. Đối với các ứng dụng lớn, hãy ưu tiên sử dụng một trình quản lý trạng thái có cấu trúc như Redux, Zustand, hoặc Vuex cho trạng thái chính. ## Triển khai JavaScript tối giản và nhanh chóng Dưới đây là một triển khai đơn giản cho Event Bus: ```javascript // eventBus.js export class EventBus { constructor() { this.map = Object.create(null) } on(event, cb) { (this.map[event] ||= new Set()).add(cb) return () => this.off(event, cb) // hàm trợ giúp hủy đăng ký } once(event, cb) { const off = this.on(event, (p) => { off(); cb(p) }) return off } off(event, cb) { const set = this.map[event]; if (!set) return set.delete(cb); if (set.size === 0) delete this.map[event] } emit(event, payload) { const call = (set) => set && set.forEach(fn => fn(payload)) call(this.map[event]) const star = event.split(':')[0] + ':*' call(this.map[star]) } } // Sử dụng export const bus = new EventBus() const off = bus.on('user:login', (u) => console.log('Xin chào', u.name)) bus.once('user:login', () => console.log('Thông báo chỉ hiển thị một lần')) bus.emit('user:login', { name: 'Alice' }) // sau đó off() ``` **Tại sao phiên bản này?** - `Set` tránh việc trùng lặp, `once` tự động dọn dẹp, kênh wildcard `"domain:*"` nhẹ nhàng. ## Event Bus với TypeScript (hợp đồng an toàn) Dưới đây là cách triển khai Event Bus với TypeScript: ```typescript // typedBus.ts type Events = { 'user:login': { name: string } 'user:logout': void 'chat:message': { text: string; from: string } 'user:*': unknown // kênh wildcard (tùy chọn) } export class TypedBus> { private map: { [K in keyof E]?: Set<(p: E[K]) => void> } = {}; on(event: K, cb: (payload: E[K]) => void) { (this.map[event] ||= new Set()).add(cb) return () => this.off(event, cb) } once(event: K, cb: (payload: E[K]) => void) { const off = this.on(event, (p) => { off(); cb(p) }) return off } off(event: K, cb: (payload: E[K]) => void) { const set = this.map[event]; if (!set) return set.delete(cb); if (set.size === 0) delete this.map[event] } emit(event: K, payload: E[K]) { const call = (set?: Set<(p: any) => void>) => set?.forEach(fn => fn(payload)) call(this.map[event]) const star = (String(event).split(':')[0] + ':*') as keyof E call(this.map[star]) } } export const bus = new TypedBus() ``` **Lợi ích của hợp đồng**: Tự động hoàn thành cho tên sự kiện & hình dạng payload; an toàn tại thời điểm biên dịch. ## Mẫu sử dụng trong React ### A. Instance bus toàn cầu (ứng dụng đơn giản) ```javascript // bus.ts export const bus = new EventBus() // Navbar.tsx useEffect(() => bus.on('user:login', () => setOpen(true)), []) // LoginForm.tsx const submit = () => bus.emit('user:login', { name: 'Alice' }) ``` ### B. Context + bus có phạm vi (tách biệt tính năng / khả năng thử nghiệm) ```javascript const BusContext = createContext<{ bus: EventBus } | null>(null) export function BusProvider({ children }) { const [bus] = useState(() => new EventBus()) return {children} } export function useBus() { const ctx = useContext(BusContext); if (!ctx) throw new Error('Không có BusProvider') return ctx.bus } ``` ### C. Dọn dẹp các đăng ký ```javascript useEffect(() => { const off = bus.on('toast:show', setToast) return off // tự động hủy đăng ký khi unmount }, []) ``` ## Node.js: Bạn đã có một Event Bus ```javascript import { EventEmitter } from 'node:events' const bus = new EventEmitter() bus.on('ping', () => console.log('pong')) bus.emit('ping') ``` Sử dụng `EventEmitter` của Node cho mã máy chủ; đối với trình duyệt và thư viện chia sẻ, một bus tùy chỉnh nhỏ là đủ. ## Mẹo và cạm bẫy - **Đặt tên sự kiện với namespace**: `user:login`, `cart:itemAdded`. - Cung cấp một **tài liệu đăng ký** (sự kiện & payload) để tránh sự không khớp. - **Tránh toàn cầu hóa**: xem xét **bus có phạm vi** theo từng tính năng. - **Rò rỉ bộ nhớ**: luôn hủy đăng ký khi unmount; `once` giúp giảm thiểu vấn đề này. - Ưu tiên **trình quản lý trạng thái** cho trạng thái chia sẻ; sử dụng bus cho **tín hiệu**. ## Tóm tắt nhanh | Nhu cầu | Đề xuất | | --- | --- | | Tín hiệu toàn cục một lần (toast/auth) | Event bus | | Trạng thái chia sẻ phức tạp | Redux/Zustand/Context | | Payload kiểu và tự động hoàn thành | TypeScript `TypedBus` | | Chỉ cho phép một phản ứng | `once` | | Phát tín hiệu đến nhiều người nghe | `emit` thông thường hoặc wildcard | Bài viết này nhằm mục đích giúp bạn hiểu rõ hơn về Event Bus trong JavaScript và TypeScript, từ đó áp dụng vào các dự án thực tế của mình. Hãy thử nghiệm và chia sẻ kinh nghiệm của bạn nhé!

Bài viết về chủ đề#eventbus

Tổng hợp các bài viết về #eventbus

Sử Dụng Event Bus Trong JavaScript và TypeScript#javascript#typescript#pubsub#eventbus

Chủ đề phổ biến

Sử Dụng Event Bus Trong JavaScript và TypeScript