发布订阅mitt和tiny-emiiter

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

本篇文章介绍的是mitt和tiny-emitter,轻量级的事件发布订阅的库。

mitt

安装

npm install --save mitt

使用

支持TypeScript

// ES6 modules
import mitt from 'mitt'

// CommonJS modules
var mitt = require('mitt')

// UMD
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>```
const emitter = mitt()

// 监听指定事件
emitter.on('foo', e => console.log('foo', e) )

// 监听所有事件
emitter.on('*', (type, e) => console.log(type, e) )

// 触发
emitter.emit('foo', { a: 'b' })

// 取消所有监听
emitter.all.clear()

// 处理函数
function onFoo() {}
emitter.on('foo', onFoo)   // 监听
emitter.off('foo', onFoo)  // 取消监听

源码

主函数在源码的39行mitt函数。

• 默认参数all是Map类型，key对应的事件名称，value对应的事件执行的回调函数。
• 返回值是一个对象：
  • on: 参数是事件名称和回调函数。一个事件有可能对应多个回调函数，根据事件名称取到回调函数，直接push,否则直接根据事件名称设置回调函数。
  • off: 参数是事件名称和回调函数。根据事件名称取到回调函数的数组，如果传入了回调函数，则删除传入的回调函数，否则清空所有回调函数。
  • emit:参数是事件名称和额外的参数。根据事件名称取到回调函数数组，如果数组存在则先浅复制，然后依次执行回调。如果事件名称是*，逻辑和前面的一样。不过回调函数执行的时候多传入了一个事件名称。

tiny-emiiter

安装

npm install tiny-emitter --save

使用

它的API和mitt的区别是多了一个once方法，on,once第三个参数可以传入上下文

once:参数是事件名称和回调函数上下文

源码

tiny-emitter使用的方式是面向对象的方式实现的，使用对象将事件和对应的回调进行存储。

once: function (name, callback, ctx) {
    var self = this;
    function listener () {
      self.off(name, listener);
      callback.apply(ctx, arguments);
    };

    listener._ = callback
    return this.on(name, listener, ctx);
  },

once: 当监听函数执行了一遍之后，同时会取消其监听。

结束语

发布订阅的介绍到此就结束了，在使用的过程中，大家有知道其中的逻辑是怎么实现的吗？可以参照以上两个库的实现方式，集合它们的优点，实现自己的一个发布订阅库吧！