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