什么是 @bouzuya/cyclejs-history-driver?
@bouzuya/cyclejs-history-driver 是一个基于 Cycle.js 的自定义驱动程序 (custom driver)，用于管理应用程序的历史纪录 (history) 信息。它可以记录用户的页面访问历史，并提供访问历史的回溯支持，方便用户在不同的页面之间切换。
如何使用
安装
使用 npm 安装 @bouzuya/cyclejs-history-driver:
--- ------- ------ -------------------------------
导入
在 Cycle.js 应用程序的驱动程序 (drivers) 中导入 @bouzuya/cyclejs-history-driver:
------ - ----------------- - ---- ----------------------------------
创建 History Driver
在 Cycle.js 应用程序的 drivers 中创建 history driver，如下所示:
----- ------- - - -- -- ------- --- -------- ------------------- --
API
location$
history driver 提供了一个 location$ 流 (stream)，它用于获取当前应用的 location 对象。调用 location$ 会返回一个 RxJS observable 对象，你可以根据 observable 的事件流做出相应的行为。
------ - --- - ---- -------------
------ - -------------- --- - ---- -------------
------ - ----------------- - ---- ----------------------------------
------ -- ---- ----------
-------- ------------- -
----- -------- - --------------------
----- ------- - --------------------------------------------
----- --------- - ---------------
------------
------------ -- --------
-- -- -------------- --- ------------
-----------------------
----- -- -------- -- -- -
---------------- ------- ----------
-
---
----- ----- - ---------------------- --
-----
----------------------------
------------ - ------ - ------- --------- - -- -----
--
--
-- ----- --- ----- ------- - -------
------ -
---- ------
-------- ------------------ --------
--
-
----- ------- - -
---- ----------------------
-------- -------------------
--
--------- ---------API
以下是可用的 API:
------ - ----------------- - ---- ---------------------------------- ----- ------------- - --------------------
location$
history driver 提供了 location$ 流，它用于获取当前应用的 location 对象。它是一个 RxJS observable 对象。调用 location$会返回这个 observable。在订阅location$` 流的过程中，你可以得到当前的浏览器位置信息。
----- --------- - ------------------------------
push()
push() 是一个用于向 history stack 中添加一个新的记录的函数。它接收一个 url string 作为参数。你可以从您的UI组件 push url 到 history stack 应用程序中。可通过 .subscribe 订阅这个 stream。
----- ----- - -----------------------
replace()
replace() 用于在 history stack 中替换当前记录位置。它接收一个 url string 作为参数。与 push() 不同的是，它不会将一个新的记录添加到 history stack 中，它是覆盖了现有的记录。它也是一个 stream，你可以通过 .subscribe 订阅这个 stream。
----- -------- - --------------------------
go()
go() 接收一个参数，它是一个数字，表示应该向前（正）或向后（负）的步数。默认值是 0，这意味着当前页面重新加载。您可以使用此函数向前或向后导航历史记录。
----- --- - ------------- -- ---- ----- ----- - -------------- -- ---- ----- ------- - ------------ -- --------
示例代码
------ - --- - ---- -------------
------ - -------------- --- - ---- -------------
------ - ----------------- - ---- ----------------------------------
------ -- ---- ----------
-------- ------------- -
----- -------- - --------------------
----- ------- - --------------------------------------------
----- --------- - ---------------
------------
------------ -- --------
-- -- -------------- --- ------------
-----------------------
----- -- -------- -- -- -
---------------- ------- ----------
-
---
----- ----- - ---------------------- --
-----
----------------------------
------------ - ------ - ------- --------- - -- -----
--
--
-- ----- --- ----- ------- - -------
------ -
---- ------
-------- ------------------ --------
--
-
----- ------- - -
---- ----------------------
-------- -------------------
--
--------- ---------在浏览器中打开应用，你可以看到当前页面的路径信息被打印到控制台，并且点击“返回”按钮将使应用程序返回到之前的页面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005550681e8991b448d23b0