微型庫(kù)解讀之200byte的EventEmitter - Mitt

fredshare 發(fā)布于2019-08-22 14:02 / 1727人閱讀

摘要：微型庫(kù)解讀之的前端起源關(guān)于我想應(yīng)該很多同學(xué)都很熟悉了。小而美的整個(gè)庫(kù)非常的小，但是卻功能齊全，為了縮減代碼，也是有一些小技巧在里面。這幾天也在瘋狂的看寫(xiě)的一些庫(kù)，他的庫(kù)都有小而美的特點(diǎn)，無(wú)論是著名的還是簡(jiǎn)單的這種庫(kù)。

title: 微型庫(kù)解讀之200byte的EventEmitter - Mitt
tags: 前端

date: 2018-01-26 00:55:08 起源

關(guān)于 EventEmitter 我想應(yīng)該很多同學(xué)都很熟悉了。簡(jiǎn)而言之是一個(gè)事件的發(fā)布與訂閱器。
這兩天讀到了一些非常有意思的小庫(kù)，雖然小但是功能完備，比如說(shuō)這次我們要講解的 Mitt.

Github地址

小

Mitt是一個(gè)微型的 EventEmitter 庫(kù)，實(shí)現(xiàn)了基本的 on, off, emit 三個(gè)Api，對(duì)于使用 EventEmitter 其他功能不多的同學(xué)來(lái)說(shuō)，200byte 的體積可以說(shuō)是非常劃算了。

當(dāng)然小也有其付出的代價(jià)，那就是只支持這三個(gè)功能。
至于怎么取舍，見(jiàn)仁見(jiàn)智吧，我建議是先使用 mitt，就算后期要更換別的庫(kù)，因?yàn)?Api 統(tǒng)一，所以更換起來(lái)基本不費(fèi)事。

Mitt 在 Github的 demo 中，也顯示出了代碼雖小，五臟俱全的特點(diǎn)。

Demo:

import mitt from "mitt"

let emitter = mitt()

// listen to an event
emitter.on("foo", e => console.log("foo", e) )

// listen to all events
emitter.on("*", (type, e) => console.log(type, e) )

// fire an event
emitter.emit("foo", { a: "b" })

// working with handler references:
function onFoo() {}
emitter.on("foo", onFoo)   // listen
emitter.off("foo", onFoo)  // unlisten

代碼解讀

在研究 Mitt 能完成的功能后，也在想為什么能做到這么小。
在這兒對(duì)一些閃光點(diǎn)做一些解讀。

節(jié)約內(nèi)存且避免沖突的 EventMap

export default function mitt(all: EventHandlerMap) {
    all = all || Object.create(null);
    return {
      // ...Api
    }
}

在初始化 mitt 時(shí)，會(huì)有一個(gè)可選的參數(shù) all，用于存放要監(jiān)聽(tīng)的事件。
如果初始化不傳參時(shí)，會(huì)使用 Object.create(null) 來(lái)實(shí)現(xiàn)。
這樣的好處在于，生成的對(duì)象是一個(gè)原型為空的對(duì)象。

優(yōu)點(diǎn)如下：

節(jié)約內(nèi)存

避免沖突

節(jié)約內(nèi)存是因?yàn)闆](méi)有了原型，可以節(jié)省部分開(kāi)銷。
避免沖突則是因?yàn)樵谄胀▽?duì)象中，當(dāng)要觸發(fā)的事件與對(duì)象原型上的屬性或方法重名時(shí)，會(huì)出現(xiàn)事件不存在卻被錯(cuò)誤觸發(fā)導(dǎo)致不必要的問(wèn)題。

var obj = {};
console.log("toString" in obj);

var noPrototypeObj = Object.create(null);
console.log("toString" in noPrototypeObj);

輸出結(jié)果如下：

簡(jiǎn)潔的隊(duì)列初始化

經(jīng)常我們會(huì)做這樣一個(gè)操作，當(dāng)對(duì)象中某個(gè)屬性不存在時(shí)，就初始化，存在則直接返回值。用代碼表示就是：

var obj = {};

var getQueue = (key) => {
  if (!obj[key]) {
    obj[key] = []
  }

  return obj[key]
}

這是一個(gè)很常見(jiàn)的操作，但是在 mitt 的卻簡(jiǎn)潔了很多。

export default function mitt(all: EventHandlerMap) {
    all = all || Object.create(null);

    return {
        /**
         * Register an event handler for the given type.
         *
         * @param  {String} type    Type of event to listen for, or `"*"` for all events
         * @param  {Function} handler Function to call in response to given event
         * @memberOf mitt
         */
        on(type: string, handler: EventHandler) {
            (all[type] || (all[type] = [])).push(handler);
        }
    };
}

在 on 函數(shù)之中，有這么一句：(all[type] || (all[type] = []))
這個(gè)表達(dá)式的意思很簡(jiǎn)單，有值取值，無(wú)值初始化。

但是總的代碼量比起之前的代碼小了很多，實(shí)現(xiàn)了簡(jiǎn)化代碼的目的。

PS：這個(gè)操作我之前在讀 React setState 源代碼時(shí)，也碰到過(guò)。

其中 queue 的獲取便是使用了這種方式。

無(wú)符號(hào)右移（>>>）

在 off 的Api中，有使用到無(wú)符號(hào)右移（>>>）的操作，具體操作如下：

/**
 * Remove an event handler for the given type.
 *
 * @param  {String} type    Type of event to unregister `handler` from, or `"*"`
 * @param  {Function} handler Handler function to remove
 * @memberOf mitt
 */
off(type: string, handler: EventHandler) {
    if (all[type]) {
        all[type].splice(all[type].indexOf(handler) >>> 0, 1);
    }
}

其中 all[type].splice(all[type].indexOf(handler) >>> 0, 1); 這一句的作用可謂亮眼。
移除某個(gè)指定的事件監(jiān)聽(tīng)是很正常的事，但可能會(huì)有一個(gè)問(wèn)題，就是傳入的要移除的監(jiān)聽(tīng)器并不存在。
換做以往的代碼，可能你會(huì)先搜索，再?zèng)Q定是否執(zhí)行移除操作，但是這樣一來(lái)代碼量就又增加了。

而無(wú)符號(hào)右移（>>>），恰恰符合我們的需要。

具體的作用如 demo，在搜索的事件監(jiān)聽(tīng)函數(shù)不存在時(shí)，會(huì)返回一個(gè)極大的正數(shù)，傳入 splice 后，并不會(huì)刪除已有的函數(shù)監(jiān)聽(tīng)器，從而實(shí)現(xiàn)了想要的功能。

監(jiān)聽(tīng)所有事件的監(jiān)聽(tīng)器

在日常開(kāi)發(fā)中，經(jīng)常可能想監(jiān)聽(tīng)所有的事件，來(lái)輔助開(kāi)發(fā)。
而 mitt 就實(shí)現(xiàn)了這個(gè)功能。

Demo:

import mitt from "mitt"
let emitter = mitt()
// listen to all events
emitter.on("*", (type, e) => console.log(type, e) )

而在源代碼里，這個(gè)的實(shí)現(xiàn)很簡(jiǎn)潔：

/**
 * Invoke all handlers for the given type.
 * If present, `"*"` handlers are invoked after type-matched handlers.
 *
 * @param {String} type  The event type to invoke
 * @param {Any} [evt]  Any value (object is recommended and powerful), passed to each handler
 * @memberOf mitt
 */
emit(type: string, evt: any) {
    (all[type] || []).slice().map((handler) => { handler(evt); });
    (all["*"] || []).slice().map((handler) => { handler(type, evt); });
}

就是在使用 emit 函數(shù)時(shí)，找出事件類型為 * 的監(jiān)聽(tīng)器，并觸發(fā)它。

小而美

Mitt的整個(gè)庫(kù)非常的小，但是卻功能齊全，為了縮減代碼，也是有一些小技巧在里面。
但是 Mitt的庫(kù)小也有缺點(diǎn)，比如參數(shù)的類型如果傳錯(cuò)了，它并不會(huì)預(yù)先提示你，這也算是一個(gè)要取舍的點(diǎn)吧。

這幾天也在瘋狂的看 developit 寫(xiě)的一些庫(kù)，他的庫(kù)都有小而美的特點(diǎn)，無(wú)論是著名的 Preact 還是簡(jiǎn)單的 mitt 這種庫(kù)。他寫(xiě)的代碼，還是挺值得一讀的。

計(jì)劃

之后的計(jì)劃，可能也準(zhǔn)備寫(xiě)幾篇這種微型庫(kù)的源碼閱讀文章，這種庫(kù)讀起來(lái)輕松，適合每天讀一兩個(gè)，而能學(xué)到的東西和思路也不少。

GPU云服務(wù)器云服務(wù)器 Mitt EventEmitter byte和bit的區(qū)別 bit和byte的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92794.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fredshare

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

anaconda下安裝tensorflow

閱讀 1868·2023-04-25 23:28
tensorflow詳解

閱讀 579·2023-04-25 22:49
微信小程序使用WeUI入門教程

閱讀 2259·2021-09-27 13:34
主機(jī)域名的一般格式是什么-域名的格式？

閱讀 5229·2021-09-22 15:09
CSS垂直居中和水平居中

閱讀 3623·2019-08-30 12:52
Java 學(xué)習(xí)路線之四個(gè)階段

閱讀 2752·2019-08-29 15:26
js 數(shù)據(jù)類型

閱讀 666·2019-08-29 11:12
河內(nèi)之塔（漢諾塔）

閱讀 2201·2019-08-26 12:24

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微型庫(kù)解讀之200byte的EventEmitter - Mitt

相關(guān)文章

Source Code - JavaScript - 學(xué)習(xí)優(yōu)雅的編碼

回首2017: 你其實(shí)是一個(gè)收集貝殼的孩子

**Node.js - 200 多行代碼實(shí)現(xiàn) Websocket 協(xié)議**

Node 錯(cuò)誤處理之挖坑系列

node.js入門學(xué)習(xí)筆記整理——基礎(chǔ)篇

發(fā)表評(píng)論

0條評(píng)論

fredshare

男|高級(jí)講師

TA的文章

anaconda下安裝tensorflow

tensorflow詳解

微信小程序使用WeUI入門教程

主機(jī)域名的一般格式是什么-域名的格式？

CSS垂直居中和水平居中

Java 學(xué)習(xí)路線之四個(gè)階段

js 數(shù)據(jù)類型

河內(nèi)之塔（漢諾塔）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微型庫(kù)解讀之200byte的EventEmitter - Mitt

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！