mitt tiny-emitter发布订阅应用场景源码

共计 3168 个字符，预计需要花费 8 分钟才能阅读完成。

本次课程的学习目标：

资源：

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) => {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 同样是一个小型的事件发射器库，可以用于在 JavaScript 中进行事件发布和订阅。

使用 tiny-emitter 的示例代码如下：

// 创建一个 tiny-emitter 实例
const emitter = new TinyEmitter();
// 订阅 'myEvent' 事件
emitter.on('myEvent', (data) => {console.log('myEvent triggered with data:', data);
});
// 发布 'myEvent' 事件
emitter.emit('myEvent', { foo: 'bar'});  
// 输出: myEvent triggered with data: {foo: 'bar'}

Mitt 和 tiny-emitter 都是 JavaScript 事件发射器库，可以用于在 JavaScript 中进行事件发布和订阅。但是，它们有一些明显的区别：

尽管它们有一些区别，Mitt 和 tiny-emitter 都是功能强大且易于使用的事件发射器库。选择哪个库取决于你的应用程序的特定需求和偏好。

发布 - 订阅模式（也称为观察者模式）是一种软件设计模式，允许对象（称为发布者）向多个对象（称为订阅者）发布信息，并允许订阅者获取这些信息。这种模式通常用于在不同组件之间进行通信，并且不需要组件之间直接交互。

在发布 - 订阅模式中，发布者通常是一个对象，负责维护订阅者的列表并发布信息。订阅者通常是另一个对象，负责订阅特定的信息并执行相应的操作。订阅者通常会实现一个回调函数，在收到发布者发布的信息时调用。

发布 - 订阅模式的优点在于它允许组件之间松散耦合，并且易于扩展。发布者无需知道哪些订阅者订阅了信息，订阅者也无需知道哪些发布者发布了信息。这使得发布者和订阅者可以独立变化和扩展。

示例：

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 类维护了一个订阅者列表，可以注册和取消订阅者，并且可以向所有订阅者发送消息。Subscriber 类实现了一个 update 方法，用于接收来自发布者的消息。

在示例中，我们创建了一个发布者实例和两个订阅者实例，并将订阅者注册到发布者中。然后，我们使用发布者的 notify 方法向所有订阅者发送消息，并使用 unregister 方法取消一个订阅者的注册。

发布 - 订阅模式是一种有用的设计模式，可以解决许多对象或组件之间的协作问题。它使得对象或组件之间能够更加灵活地协作，同时也能解除耦合，使得系统更加稳定和可扩展。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券