mitt tiny-emitter釋出訂閱應用場景原始碼解析

2022-12-27 14:01:31

前言

本次課程的學習目標：

瞭解 mitt、tiny-emitter 作用和使用場景、應用場景
學習釋出訂閱設計模式

資源：

mitt：https://github.com/developit/mitt
tiny-mitt：https://github.com/scottcorgan/tiny-emitter
clipboard.js：clipboard.js 原始碼的第26行使用了 tiny-emitter

mitt

Mitt 是一個功能性事件發射器，用於在 JavaScript 中進行事件釋出和訂閱。它體積小巧，壓縮後只有 200 位元組，且無需依賴其他庫。它具有類似於 Node.js 中的 EventEmitter 的功能，並支援使用萬用字元“*”來監聽所有事件。Mitt 可以在瀏覽器和其他 JavaScript 執行時中使用，並支援 IE9+。

下面是使用 Mitt 進行事件釋出和訂閱的範例程式碼：

// 建立一個 mitt 範例
const emitter = mitt();
// 訂閱 'myEvent' 事件
emitter.on('myEvent', (data) => {
  console.log('myEvent triggered with data:', data);
});
// 釋出 'myEvent' 事件
emitter.emit('myEvent', { foo: 'bar' });  // 輸出: myEvent triggered with data: { foo: 'bar' }

你還可以使用萬用字元 * 來監聽所有事件：

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' });  // 不會輸出任何內容

tiny-emitter

tiny-emitter 同樣是一個小型的事件發射器庫，可以用於在 JavaScript 中進行事件釋出和訂閱。

使用 tiny-emitter 的範例程式碼如下：

// 建立一個 tiny-emitter 範例
const emitter = new TinyEmitter();
// 訂閱 'myEvent' 事件
emitter.on('myEvent', (data) =&gt; {
  console.log('myEvent triggered with data:', data);
});
// 釋出 'myEvent' 事件
emitter.emit('myEvent', { foo: 'bar' });  
// 輸出: myEvent triggered with data: { foo: 'bar' }

Mitt 與 tiny-emitter的異同

Mitt 和 tiny-emitter 都是 JavaScript 事件發射器庫，可以用於在 JavaScript 中進行事件釋出和訂閱。但是，它們有一些明顯的區別：

體積：Mitt 比 tiny-emitter 更小，壓縮後僅有 200 位元組。tiny-emitter 的體積略大，壓縮後約為 2.2 KB。
支援的瀏覽器版本：Mitt 支援 IE9+，而 tiny-emitter 支援 IE6+。

儘管它們有一些區別，Mitt 和 tiny-emitter 都是功能強大且易於使用的事件發射器庫。選擇哪個庫取決於你的應用程式的特定需求和偏好。

釋出訂閱模式

釋出-訂閱模式（也稱為觀察者模式）是一種軟體設計模式，允許物件（稱為釋出者）向多個物件（稱為訂閱者）釋出資訊，並允許訂閱者獲取這些資訊。這種模式通常用於在不同元件之間進行通訊，並且不需要元件之間直接互動。

在釋出-訂閱模式中，釋出者通常是一個物件，負責維護訂閱者的列表並行布資訊。訂閱者通常是另一個物件，負責訂閱特定的資訊並執行相應的操作。訂閱者通常會實現一個回撥函數，在收到釋出者釋出的資訊時呼叫。

釋出-訂閱模式的優點在於它允許元件之間鬆散耦合，並且易於擴充套件。釋出者無需知道哪些訂閱者訂閱了資訊，訂閱者也無需知道哪些釋出者釋出了資訊。這使得釋出者和訂閱者可以獨立變化和擴充套件。

範例：

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 類維護了一個訂閱者列表，可以註冊和取消訂閱者，並且可以向所有訂閱者傳送訊息。Subscriber 類實現了一個 update 方法，用於接收來自發布者的訊息。

在範例中，我們建立了一個釋出者範例和兩個訂閱者範例，並將訂閱者註冊到釋出者中。然後，我們使用釋出者的 notify 方法向所有訂閱者傳送訊息，並使用 unregister 方法取消一個訂閱者的註冊。

總結

釋出-訂閱模式是一種有用的設計模式，可以解決許多物件或元件之間的共同作業問題。它使得物件或元件之間能夠更加靈活地共同作業，同時也能解除耦合，使得系統更加穩定和可延伸。

以上就是mitt tiny-emitter釋出訂閱應用場景原始碼解析的詳細內容，更多關於mitt tiny-emitter釋出訂閱的資料請關注it145.com其它相關文章！

mitt tiny-emitter釋出訂閱應用場景原始碼解析

目錄

前言

mitt

tiny-emitter

Mitt 與 tiny-emitter的異同

釋出訂閱模式

總結

熱門文章