快速 TypeScript 化 lodash 中的 throttle & debounce

lewinlee 发布于2019-08-26 10:18 / 3330人阅读

摘要：背景需要包写起来爽，然而如果遇到没有现成的化的工具函数，就需要自己想办法弄出一份类型声明文件了。最为重要的是，这种迁移方面我们可以随意自定义化中所需要的工具函数，迁移粒度都可以由自己控制。

1、背景 1.1、需要 TS 包

TypeScript 写起来爽，然而如果遇到没有现成的 TS 化的工具函数，就需要自己想办法弄出一份类型声明文件了。

前两天要写的小工具库（Typescript 语言写的），因其用到 debounce 和 throttle，虽说 lodash 中带了这两个库，可我又不想将整个 lodash 引入，毕竟我仅仅是写一个小工具，将整个 lodash 打包进去不太合适。

首先想到的就是到社区中有没有现成的 TS 包，当然是有，但并不完美；社区中有 ts-debounce、throttle-typescript 等 TS 包可以直接拿来使用，只不过它们没有同时提供这两个函数，而且其提供的 API 和 lodash 的有出入，使用起来不太顺手。（也可能是我自己没找到正确的 TS 包）

1.2、两种方案

既然如此，只能自己动手解决，有两种解决方式：

【方案一】使用 webpack 4 的 code split 能力，先整体引入 lodash ，而在打包的时候只将所需要的 debounce 和 throttle 部分打包进入;

【方案二】自己动手将 lodash 中的 debounce 和 throttle 这两部分代码 copy 出来形成多带带的一个 TS 包

这两种方案都可行，视具体的情况而定，比如大工程项目中使用【方案一】比较合适；而我这边因为多个小工具库都使用到这两个函数，所以采用【方案二】比较合适；

剩下的问题，就是如何完全快速迁移 lodash 中的 debounce 和 throttle，而且需要保证迁移过来的功能是和 lodash 官方的 API 保持一致 —— 最为保险的操作就是去官方源码中获取这两个函数的源码，然后将 JS 写法用 TS 改写一遍。

2. 动手迁移

接下来用简单的文字记录下这个迁移过程

2.1、获取官方源码

lodash 作为广泛使用的基础工具库，它很贴心地提供了自助打包服务，可以定制自己所需要的函数集合，而不用整个引入。

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

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

接着我们只选择打出 debounce 和 throttle 的功能，直接以 ES 方式打包出结果

lodash modularize exports=es include=debounce,throttle

使用 ES 方式导出必须使用 modularize 模式，获取的源码效果如下：所有的 ES 模块放在 modularize 文件夹下：

2.2、改写成 TS 成源码

由于打包获取的都是 JS 源码，接下来这一步就是将这些代码改写成 TS 格式的。

我主要是为了使用 TS 格式，并非那么注重声明文件的严谨性，所以使用了较为宽松的 TS 语法约束，可以参考我的 tsconfig.json 文件。

将源码经过简单的改写整理，尽可能不更改其源码实现，顶多是调节文件夹结构，最终将源码结构参考 github 仓库中的 src 文件夹

2.3、添加单元测试用例

为了证明这次迁移和官方原有的功能保持一致，特意找到官方的 test 文件夹 lodash/test 中有关 throttle 和 debounce 的测试用例，将其迁移过来，自检这两个函数是否迁移正确

改写后的单元测试用例放在仓库的 test 文件夹中，单元测试覆盖率如下

这些单元测试用例都是从官方迁移来的，针对 debounce 和 throttle 的覆盖率都超过 90% 以上；

2.4、最终成果

按上面的步骤最终获取的 TS 化版本，源码放在 github 上的 github 仓库，同时为方便后续使用也发了 npm 包包。

通过 npm install ts-debounce-throttle 就能在项目中直接引用使用，亲测可正常使用该 TS 包；

3、总结

从上面过程来看，这种迁移没有难度，顶多属于体力活；

只迁移 debounce 和 throttle 这两个函数工作量并没有想象中那么大，不到 1 个小时就搞定了上述整个迁移过程。

最为重要的是，这种迁移方面我们可以随意自定义 TS 化 lodash 中所需要的工具函数，迁移粒度都可以由自己控制。

如果你也有这方面的需求，不妨按本文的过程亲自实践一番。

在迁移过程中，我顺带阅读这两个函数源码，详细源码解读请参考文章《源码分析 - lodash 中的 debounce & throttle》

下面的是我的公众号二维码图片，欢迎关注交流。

GPU云服务器云服务器 python中的&amp java中的&amplt java中的占位符&039 Debouncing

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105948.html

【源码分析】给你几个闹钟，或许用 10 分钟就能写出 lodash 中的 debounce &amp

摘要：最简单的案例以最简单的情景为例在某一时刻点只调用一次函数，那么将在时间后才会真正触发函数。后续我们会逐渐增加黑色闹钟出现的复杂度，不断去分析红色闹钟的位置。序相比网上教程中的 debounce 函数，lodash 中的 debounce 功能更为强大，相应的理解起来更为复杂；解读源码一般都是直接拿官方源码来解读，不过这次我们采用另外的方式：从最简单的场景开始写代码，然后慢慢往源码...

余学文 2019-08-26 10:19 评论0 收藏0
JavaScript Debounce&amp;Throttle

摘要：如果我们的回调函数较为复杂，页面的性能就会变差。而可以保证稳定的时间间隔执行一次回调函数。但需要弄清楚的是，无论是还是，控制的都是回调函数的执行，而不是事件的监听。前言假设现在有个需求：监听滑动事件，并执行回调。当你用触摸板或者鼠标滑动页面时，每秒钟大概会触发几十次scroll事件，而当你在手机等移动终端上滑动页面时，每秒就会触发一百次scroll事件。如果我们的回调函数较为复杂，...

The question 2019-08-22 11:06 评论0 收藏0
【译】通过例子解释 Debounce 和 Throttle

摘要：举例举例通过拖拽浏览器窗口，可以触发很多次事件。不支持，所以不能在服务端用于文件系统事件。总结将一系列迅速触发的事件例如敲击键盘合并成一个单独的事件。确保一个持续的操作流以每毫秒执行一次的速度执行。 Debounce 和 Throttle 是两个很相似但是又不同的技术，都可以控制一个函数在一段时间内执行的次数。当我们在操作 DOM 事件的时候，为函数添加 debounce 或者 th...

LeoHsiun 2019-08-23 11:34 评论0 收藏0
throttle与debounce的区别

摘要：自己尝试一下年在的文章中第一次看到的实现方法。这三种实现方法内部不同，但是接口几乎一致。如你所见，我们使用了参数，因为我们只对用户停止改变浏览器大小时最后一次事件感兴趣。前几天看到一篇文章，我的公众号里也分享了《一次发现underscore源码bug的经历以及对学术界拿来主义的思考》具体文章详见，微信公众号：showImg(https://segmentfault.com/img/b...

Pluser 2019-08-19 18:04 评论0 收藏0
探究防抖(debounce)和节流(throttle)

摘要：如果使用的是防抖，那么得等我们停止滚动之后一段时间才会加载新的内容，没有那种无限滚动的流畅感。这时候，我们就可以使用节流，将事件有效触发的频率降低的同时给用户流畅的浏览体验。调用，浏览器会在下次刷新的时候执行指定回调函数。本文来自我的博客，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimationFrame...

keke 2019-08-23 15:19 评论0 收藏0