cycle-recycle 是一个流畅的、函数式 JavaScript 库,它基于 Cycle.js 平台，使用 xstream 实现循环列表、有限长度的缓存等数据结构,提供了一种全新的数据处理方式。有了 cycle-recycle，你可以更快速、更容易地处理前端中的数据。
本文将带你了解 cycle-recycle 的基本使用方法，包括安装与引用、循环列表、缓存、过滤等。
安装与引用
使用 npm 安装:
npm install cycle-recycle
在 JavaScript 中引用:
const cycleRecycle = require('cycle-recycle');
const { recycle, recycler } = cycleRecycle;如果你的项目使用了 ES6，也可以使用 import 引用:
import cycleRecycle, { recycle, recycler } from 'cycle-recycle';循环列表
循环列表是周期性生成的列表，用于优化性能，进一步节省内存。cycle-recycle 的循环列表可以接受一个计数器和一个生成函数作为参数，生成循环列表。
示例代码：
-- -------------------- ---- -------
------ -- ---- ----------
------ - ------- - ---- ----------------
-------- ---------------- ------- -
------ ------------ ------ -- --- -- -- -
------ -
--- ----- - ------------- - --- - - - --
----- ----- ------- -- ------ - ----
--
---
-
----- ------------- - -
---- --
---------- ---
--------------------- -----
--
----- ------ - -------------------------------
------ -- -
----- ----- - ----------- - -- ---
----- - ---------- -------- - - ---------
----- ------
-----------------
---
------ ---------
--
----------
------------------- ---------------- ---
---------------
--------------------
----- ----- -- --------------------- -------
---在此示例中，我们使用 xs.periodic(5000) 生成循环列表。这意味着每隔 5 秒，就会创建一个新的循环列表。
接下来，我们实现了一个可以生成指定数量的项目的函数 makeItems。在此函数中，我们使用了类似于 lodash 中的 Array.from() 函数实现了创建循环列表所需要的数据结构。
该函数返回的是一个数组，其中的每个元素都包含一个唯一的 ID 和一个项目名称。
在使用 recycle() 函数时，我们将数据和 recycleConfig 传递给它。这里配置了最大长度为 3，总长度为 15.每秒会检测一次数组，以自动释放过时数据。
生成的 iterable 可以像普通数组一样使用，但它有一个特殊的方法，可以用来释放占用的内存，即 recycler() 函数。
最后，在 items$ 中，我们将数据可观察对象使用 flatten() 函数展开。然后，我们可以在监听器中打印 items。这将每隔 5 秒显示一个新的列表。
有限长度的缓存
除了循环列表之外，也可以使用有限长度的缓存。有了缓存，可以减少对服务器或其他数据源的请求次数，提高应用程序性能。
示例代码：
-- -------------------- ---- -------
------ -- ---- ----------
------ - ------- - ---- ----------------
----- -------- - -- --
---------------------------------------------------
--------- -- ------------
----- -------------- - ---------
----- ---
---- ---
------- ------
---
----- ------ - --------------------------
---------- -- -
------ ---------------------------
--
-------------------
-------------------------
------- -- -- -----------
---
---------------
--------------------
----- ----- -- --------------------- -------
---在此示例中，我们声明了一个名为 getUsers() 的函数，该函数从 JSONPlaceHolder API 中获取用户数据。在使用 recycle() 函数时，我们定义了一些配置项，包括最大长度为 10，最大年龄为1分钟。即在过一分中，将不再使用缓存中的数据。
在 users$ 中，我们使用了 xs.fromPromise() 将 getUsers() 函数的返回值转换为数据可观察对象。
然后，我们使用 map() 函数并向其传递了一个回调，以向缓存中添加数据。此方法返回缓存数组。
最后，我们使用 recycler() 函数，她追踪数据流，并将数据流中的数据与缓存数组中的数据比较。如果数据还不够，将使用 create() 方法从服务器中获取额外的用户数据。
恭喜！现在，您掌握了使用 cycle-recycle 的基本原理，并可以在项目中使用这个强大的库了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568e681e8991b448e4a0f