介绍
@ngx-extensions/extensions 是一个基于 Angular 的 npm 包，提供一些常用的扩展功能，如 debouncing、throttling、按键监听等，可以帮助前端开发人员更快、更方便地实现一些复杂的功能。
安装
在 Angular 项目中安装 @ngx-extensions/extensions 可以使用以下命令：
npm install --save @ngx-extensions/extensions
使用
在 Angular 项目的 app.module.ts 中导入 @ngx-extensions/extensions，并将其添加到 imports 数组：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------- - ---- -----------------------------
-----------
-------- -
-----------------------------
--
------------- - --- --
--
------ ----- --------- - -然后就可以在组件中使用 @ngx-extensions/extensions 提供的功能了。
Debouncing
debouncing 可以帮助我们避免短时间内触发多次事件导致的性能问题，比如在输入框中输入搜索关键词时，我们希望用户输入完成后再触发搜索动作，而不是用户每输一次都触发搜索动作。
使用 @debounce 装饰器可以将方法转换为 debouncing 版本，以下是示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------------------
------------
--------- -----------------
--------- -
------ ----------- --------------------- ------------------ --
--
--
------ ----- ------------------ -
------- - ---
--------------
-------- -
-------------------- -- --------------
-- --- ------ ------ ------ ----
-
-在以上示例中，@debounce(300) 装饰器表示将 search 方法转换为 300ms 的 debouncing 版本，即 search 方法会在最后一次用户输入完成后 300ms 才会被调用。
Throttling
throttling 可以帮助我们限制某个事件在一定时间间隔内只触发一次，比如在滚动列表时触发加载更多数据的动作，我们希望用户不管怎么滚动，每隔一定时间才触发加载更多数据的动作。
使用 @throttle 装饰器可以将方法转换为 throttling 版本，以下是示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- -----------------------------
------------
--------- ----------------------
--------- -
---- ------------------------ ----------------------
---- ---- ----- ---- ---
------
--
--
------ ----- ----------------------- -
--------------
---------- -
------------------- -- ---------
-- --- ------ ---- ---- ------ ----
-
-在以上示例中，@throttle(500) 装饰器表示将 onScroll 方法转换为 500ms 的 throttling 版本，即 onScroll 方法会在每隔 500ms 内最多触发一次。
按键监听
在 Angular 中，我们可以使用 HostListener 装饰器来监听 DOM 事件，@ngx-extensions/extensions 提供了一些常用的按键监听功能，可以方便地实现一些快捷键功能，比如监听 Escape 键关闭对话框。
以下是示例代码：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------ - --------- - ---- -----------------------------
------------
--------- -------------
--------- ------
--
------ ----- --------------- -
--------------------------------- -----------
---------------- -------------- -
-- ------------------ -
---------------- --- ----------
-- --- ----- ------ ------ ----
-
-
-在以上示例中，我们使用 @HostListener 装饰器监听 document 上的 keydown 事件，并使用 escapeKey 函数判断事件是否为 Esc 键。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66dda