mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析
前言
本次課程的學(xué)習(xí)目標:
- 了解 mitt、tiny-emitter 作用和使用場景、應(yīng)用場景
- 學(xué)習(xí) 發(fā)布訂閱 設(shè)計模式
資源:
- mitt:https://github.com/developit/mitt
- tiny-mitt:https://github.com/scottcorgan/tiny-emitter
- clipboard.js:clipboard.js 源碼的第26行使用了 tiny-emitter
mitt
Mitt 是一個功能性 事件發(fā)射器,用于在 JavaScript 中進行事件發(fā)布和訂閱。它體積小巧,壓縮后只有 200 字節(jié),且無需依賴其他庫。它具有類似于 Node.js 中的 EventEmitter 的功能,并支持使用通配符“*”來監(jiān)聽所有事件。Mitt 可以在瀏覽器和其他 JavaScript 運行時中使用,并支持 IE9+。
下面是使用 Mitt 進行事件發(fā)布和訂閱的示例代碼:
// 創(chuàng)建一個 mitt 實例 const emitter = mitt(); // 訂閱 'myEvent' 事件 emitter.on('myEvent', (data) => { console.log('myEvent triggered with data:', data); }); // 發(fā)布 'myEvent' 事件 emitter.emit('myEvent', { foo: 'bar' }); // 輸出: myEvent triggered with data: { foo: 'bar' }
你還可以使用通配符 *
來監(jiān)聽所有事件:
emitter.on('*', (event, data) => { console.log(`event "${event}" triggered with data:`, data); }); emitter.emit('myEvent', { foo: 'bar' }); // 輸出: event "myEvent" triggered with data: { foo: 'bar' } emitter.emit('anotherEvent', { baz: 'qux' }); // 輸出: event "anotherEvent" triggered with data: { baz: 'qux' }
你還可以使用 emitter.off
方法取消訂閱特定事件:
const handler = (data) => { console.log('myEvent triggered with data:', data); }; emitter.on('myEvent', handler); emitter.emit('myEvent', { foo: 'bar' }); // 輸出: myEvent triggered with data: { foo: 'bar' } emitter.off('myEvent', handler); emitter.emit('myEvent', { foo: 'bar' }); // 不會輸出任何內(nèi)容
tiny-emitter
tiny-emitter 同樣是一個小型的事件發(fā)射器庫,可以用于在 JavaScript 中進行事件發(fā)布和訂閱。
使用 tiny-emitter 的示例代碼如下:
// 創(chuàng)建一個 tiny-emitter 實例 const emitter = new TinyEmitter(); // 訂閱 'myEvent' 事件 emitter.on('myEvent', (data) => { console.log('myEvent triggered with data:', data); }); // 發(fā)布 'myEvent' 事件 emitter.emit('myEvent', { foo: 'bar' }); // 輸出: myEvent triggered with data: { foo: 'bar' }
Mitt 與 tiny-emitter的異同
Mitt 和 tiny-emitter 都是 JavaScript 事件發(fā)射器庫,可以用于在 JavaScript 中進行事件發(fā)布和訂閱。但是,它們有一些明顯的區(qū)別:
- 體積:Mitt 比 tiny-emitter 更小,壓縮后僅有 200 字節(jié)。tiny-emitter 的體積略大,壓縮后約為 2.2 KB。
- 支持的瀏覽器版本:Mitt 支持 IE9+,而 tiny-emitter 支持 IE6+。
盡管它們有一些區(qū)別,Mitt 和 tiny-emitter 都是功能強大且易于使用的事件發(fā)射器庫。選擇哪個庫取決于你的應(yīng)用程序的特定需求和偏好。
發(fā)布訂閱模式
發(fā)布-訂閱模式(也稱為觀察者模式)是一種軟件設(shè)計模式,允許對象(稱為發(fā)布者)向多個對象(稱為訂閱者)發(fā)布信息,并允許訂閱者獲取這些信息。這種模式通常用于在不同組件之間進行通信,并且不需要組件之間直接交互。
在發(fā)布-訂閱模式中,發(fā)布者通常是一個對象,負責維護訂閱者的列表并發(fā)布信息。訂閱者通常是另一個對象,負責訂閱特定的信息并執(zhí)行相應(yīng)的操作。訂閱者通常會實現(xiàn)一個回調(diào)函數(shù),在收到發(fā)布者發(fā)布的信息時調(diào)用。
發(fā)布-訂閱模式的優(yōu)點在于它允許組件之間松散耦合,并且易于擴展。發(fā)布者無需知道哪些訂閱者訂閱了信息,訂閱者也無需知道哪些發(fā)布者發(fā)布了信息。這使得發(fā)布者和訂閱者可以獨立變化和擴展。
示例:
class Publisher { constructor() { this.subscribers = []; } register(subscriber) { this.subscribers.push(subscriber); } unregister(subscriber) { this.subscribers = this.subscribers.filter(s => s !== subscriber); } notify(message) { this.subscribers.forEach(subscriber => subscriber.update(message)); } } class Subscriber { update(message) { console.log('Received message:', message); } } const publisher = new Publisher(); const subscriber1 = new Subscriber(); const subscriber2 = new Subscriber(); publisher.register(subscriber1); publisher.register(subscriber2); publisher.notify('Hello, world!'); // Output: "Received message: Hello, world!" publisher.unregister(subscriber1); publisher.notify('Hello, again!'); // Output: "Received message: Hello, again!"
在這個示例中,我們定義了一個 Publisher
類和一個 Subscriber
類。Publisher
類維護了一個訂閱者列表,可以注冊和取消訂閱者,并且可以向所有訂閱者發(fā)送消息。Subscriber
類實現(xiàn)了一個 update
方法,用于接收來自發(fā)布者的消息。
在示例中,我們創(chuàng)建了一個發(fā)布者實例和兩個訂閱者實例,并將訂閱者注冊到發(fā)布者中。然后,我們使用發(fā)布者的 notify
方法向所有訂閱者發(fā)送消息,并使用 unregister
方法取消一個訂閱者的注冊。
總結(jié)
發(fā)布-訂閱模式是一種有用的設(shè)計模式,可以解決許多對象或組件之間的協(xié)作問題。它使得對象或組件之間能夠更加靈活地協(xié)作,同時也能解除耦合,使得系統(tǒng)更加穩(wěn)定和可擴展。
以上就是mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析的詳細內(nèi)容,更多關(guān)于mitt tiny-emitter發(fā)布訂閱的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript?API?ResizeObserver使用示例
這篇文章主要為大家介紹了JavaScript?API?ResizeObserver的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07微信小程序 后臺https域名綁定和免費的https證書申請詳解
這篇文章主要介紹了微信小程序 后臺https域名綁定和免費的https證書申請詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11