成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

快速 TypeScript 化 lodash 中的 throttle & debounce

lewinlee / 3527人閱讀

摘要：背景需要包寫起來爽，然而如果遇到?jīng)]有現(xiàn)成的化的工具函數(shù)，就需要自己想辦法弄出一份類型聲明文件了。最為重要的是，這種遷移方面我們可以隨意自定義化中所需要的工具函數(shù)，遷移粒度都可以由自己控制。

1、背景 1.1、需要 TS 包

TypeScript 寫起來爽，然而如果遇到?jīng)]有現(xiàn)成的 TS 化的工具函數(shù)，就需要自己想辦法弄出一份類型聲明文件了。

前兩天要寫的小工具庫（Typescript 語言寫的），因其用到 debounce 和 throttle，雖說 lodash 中帶了這兩個(gè)庫，可我又不想將整個(gè) lodash 引入，畢竟我僅僅是寫一個(gè)小工具，將整個(gè) lodash 打包進(jìn)去不太合適。

首先想到的就是到社區(qū)中有沒有現(xiàn)成的 TS 包，當(dāng)然是有，但并不完美；社區(qū)中有 ts-debounce、throttle-typescript 等 TS 包可以直接拿來使用，只不過它們沒有同時(shí)提供這兩個(gè)函數(shù)，而且其提供的 API 和 lodash 的有出入，使用起來不太順手。（也可能是我自己沒找到正確的 TS 包）

1.2、兩種方案

既然如此，只能自己動(dòng)手解決，有兩種解決方式：

【方案一】使用 webpack 4 的 code split 能力，先整體引入 lodash ，而在打包的時(shí)候只將所需要的 debounce 和 throttle 部分打包進(jìn)入;

【方案二】自己動(dòng)手將 lodash 中的 debounce 和 throttle 這兩部分代碼 copy 出來形成多帶帶的一個(gè) TS 包

這兩種方案都可行，視具體的情況而定，比如大工程項(xiàng)目中使用【方案一】比較合適；而我這邊因?yàn)槎鄠€(gè)小工具庫都使用到這兩個(gè)函數(shù)，所以采用【方案二】比較合適；

剩下的問題，就是如何完全快速遷移 lodash 中的 debounce 和 throttle，而且需要保證遷移過來的功能是和 lodash 官方的 API 保持一致 —— 最為保險(xiǎn)的操作就是去官方源碼中獲取這兩個(gè)函數(shù)的源碼，然后將 JS 寫法用 TS 改寫一遍。

2. 動(dòng)手遷移

接下來用簡(jiǎn)單的文字記錄下這個(gè)遷移過程

2.1、獲取官方源碼

lodash 作為廣泛使用的基礎(chǔ)工具庫，它很貼心地提供了自助打包服務(wù)，可以定制自己所需要的函數(shù)集合，而不用整個(gè)引入。

按照官方教程 custom-builds 中的步驟，先安裝 lodash-cli 工具

npm i -g npm
npm i -g lodash-cli
lodash -h

接著我們只選擇打出 debounce 和 throttle 的功能，直接以 ES 方式打包出結(jié)果

lodash modularize exports=es include=debounce,throttle

使用 ES 方式導(dǎo)出必須使用 modularize 模式，獲取的源碼效果如下：所有的 ES 模塊放在 modularize 文件夾下：

2.2、改寫成 TS 成源碼

由于打包獲取的都是 JS 源碼，接下來這一步就是將這些代碼改寫成 TS 格式的。

我主要是為了使用 TS 格式，并非那么注重聲明文件的嚴(yán)謹(jǐn)性，所以使用了較為寬松的 TS 語法約束，可以參考我的 tsconfig.json 文件。

將源碼經(jīng)過簡(jiǎn)單的改寫整理，盡可能不更改其源碼實(shí)現(xiàn)，頂多是調(diào)節(jié)文件夾結(jié)構(gòu)，最終將源碼結(jié)構(gòu)參考 github 倉庫中的 src 文件夾

2.3、添加單元測(cè)試用例

為了證明這次遷移和官方原有的功能保持一致，特意找到官方的 test 文件夾 lodash/test 中有關(guān) throttle 和 debounce 的測(cè)試用例，將其遷移過來，自檢這兩個(gè)函數(shù)是否遷移正確

改寫后的單元測(cè)試用例放在 倉庫的 test 文件夾中，單元測(cè)試覆蓋率如下

這些單元測(cè)試用例都是從官方遷移來的，針對(duì) debounce 和 throttle 的覆蓋率都超過 90% 以上；

2.4、最終成果

按上面的步驟最終獲取的 TS 化版本，源碼放在 github 上的 github 倉庫 ，同時(shí)為方便后續(xù)使用也發(fā)了 npm 包 包。

通過 npm install ts-debounce-throttle 就能在項(xiàng)目中直接引用使用，親測(cè)可正常使用該 TS 包；

3、總結(jié)

從上面過程來看，這種遷移沒有難度，頂多屬于體力活；

只遷移 debounce 和 throttle 這兩個(gè)函數(shù)工作量并沒有想象中那么大，不到 1 個(gè)小時(shí)就搞定了上述整個(gè)遷移過程。

最為重要的是，這種遷移方面我們可以隨意自定義 TS 化 lodash 中所需要的工具函數(shù)，遷移粒度都可以由自己控制。

如果你也有這方面的需求，不妨按本文的過程親自實(shí)踐一番。

在遷移過程中，我順帶閱讀這兩個(gè)函數(shù)源碼，詳細(xì)源碼解讀請(qǐng)參考文章《源碼分析 - lodash 中的 debounce & throttle》

下面的是我的公眾號(hào)二維碼圖片，歡迎關(guān)注交流。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105948.html

相關(guān)文章

  • 【源碼分析】給你幾個(gè)鬧鐘，或許用 10 分鐘就能寫出 lodash 中的 debounce &amp

    摘要：最簡(jiǎn)單的案例以最簡(jiǎn)單的情景為例在某一時(shí)刻點(diǎn)只調(diào)用一次函數(shù)，那么將在時(shí)間后才會(huì)真正觸發(fā)函數(shù)。后續(xù)我們會(huì)逐漸增加黑色鬧鐘出現(xiàn)的復(fù)雜度，不斷去分析紅色鬧鐘的位置。 序 相比網(wǎng)上教程中的 debounce 函數(shù)，lodash 中的 debounce 功能更為強(qiáng)大，相應(yīng)的理解起來更為復(fù)雜； 解讀源碼一般都是直接拿官方源碼來解讀，不過這次我們采用另外的方式：從最簡(jiǎn)單的場(chǎng)景開始寫代碼，然后慢慢往源碼...

    余學(xué)文 評(píng)論0 收藏0

  • JavaScript Debounce&Throttle

    摘要：如果我們的回調(diào)函數(shù)較為復(fù)雜，頁面的性能就會(huì)變差。而可以保證穩(wěn)定的時(shí)間間隔執(zhí)行一次回調(diào)函數(shù)。但需要弄清楚的是，無論是還是，控制的都是回調(diào)函數(shù)的執(zhí)行，而不是事件的監(jiān)聽。 前言 假設(shè)現(xiàn)在有個(gè)需求：監(jiān)聽滑動(dòng)事件，并執(zhí)行回調(diào)。當(dāng)你用觸摸板或者鼠標(biāo)滑動(dòng)頁面時(shí)，每秒鐘大概會(huì)觸發(fā)幾十次scroll事件，而當(dāng)你在手機(jī)等移動(dòng)終端上滑動(dòng)頁面時(shí)，每秒就會(huì)觸發(fā)一百次scroll事件。如果我們的回調(diào)函數(shù)較為復(fù)雜，...

    The question 評(píng)論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個(gè)單獨(dú)的事件。確保一個(gè)持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個(gè)很相似但是又不同的技術(shù)，都可以控制一個(gè)函數(shù)在一段時(shí)間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們?cè)诓僮?DOM 事件的時(shí)候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評(píng)論0 收藏0

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實(shí)現(xiàn)方法。這三種實(shí)現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因?yàn)槲覀冎粚?duì)用戶停止改變?yōu)g覽器大小時(shí)最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號(hào)里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來主義的思考》具體文章詳見，微信公眾號(hào)：showImg(https://segmentfault.com/img/b...

    Pluser 評(píng)論0 收藏0

  • 探究防抖(debounce)和節(jié)流(throttle)

    摘要：如果使用的是防抖，那么得等我們停止?jié)L動(dòng)之后一段時(shí)間才會(huì)加載新的內(nèi)容，沒有那種無限滾動(dòng)的流暢感。這時(shí)候，我們就可以使用節(jié)流，將事件有效觸發(fā)的頻率降低的同時(shí)給用戶流暢的瀏覽體驗(yàn)。調(diào)用，瀏覽器會(huì)在下次刷新的時(shí)候執(zhí)行指定回調(diào)函數(shù)。 本文來自我的博客，歡迎大家去GitHub上star我的博客 本文從防抖和節(jié)流出發(fā)，分析它們的特性，并拓展一種特殊的節(jié)流方式requestAnimationFrame...

    keke 評(píng)論0 收藏0

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

0條評(píng)論

lewinlee

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<