mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析

更新時間：2022年12月25日 11:42:10 作者：codeniu

這篇文章主要為大家介紹了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) =&gt; {
  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) =&gt; {
  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 =&gt; s !== subscriber);
  }
  notify(message) {
    this.subscribers.forEach(subscriber =&gt; 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 方法取消一個訂閱者的注冊。