导读 这篇文章主要为大家介绍了mitt tiny-emitter发布订阅应用场景源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前言

本次课程的学习目标:

  • 了解 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) => {
      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) => {
      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 => 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 方法取消一个订阅者的注册。

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

    原文来自:https://www.jb51.net/article/270917.htm

    本文地址:https://www.linuxprobe.com/mitt-tiny-emitter.html编辑:向云艳,审核员:逄增宝

    Linux命令大全:https://www.linuxcool.com/

    Linux系统大全:https://www.linuxdown.com/

    红帽认证RHCE考试心得:https://www.rhce.net/