前言
在前端开发的过程中，我们常常需要通过浏览器的地址栏来改变当前的页面状态，这就需要使用到浏览器的 history API。然而，原生的 history API 使用起来不够方便，而且还存在一些兼容性问题。针对这个问题，我们可以使用 @cycle/history 这个 npm 包来简化我们使用 history API 的过程。
安装
使用 npm 命令来安装 @cycle/history：
npm install @cycle/history
使用
创建一个基本的应用
首先，我们来创建一个基本的应用，使用 @cycle/dom 来实现简单的 DOM 操作：
-- -------------------- ---- -------
------ - --- - ---- ------------
------ - ---- ------- ------------- - ---- ------------
-------- ------ -
------ -
---- -----
-------------------- -------------
-------------------- -------------
--------------- ----
--
-
-
--------- -
---- ---------------------
--这个应用中有两个按钮和一个计数器，我们需要通过 @cycle/history 来为按钮添加点击事件，使得点击按钮时可以改变当前的页面状态。
创建一个 history 驱动器
创建 @cycle/history 的驱动器，把 historyDriver 作为 Cycle.js 项目的一个驱动器：
import { makeHistoryDriver } from '@cycle/history'
run(main, {
DOM: makeDOMDriver('#app'),
history: makeHistoryDriver()
})添加页面状态的改变
为按钮添加点击事件：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------
-------- ------------- -
----- ---------- - ------------------------------------------------
----- ---------- - ------------------------------------------------
------ -
---- -----
-------------------- -------------
-------------------- -------------
--------------- ----
---
-------- ----------------- -- -- ----- ----------- ----
----------------- -- -- ----- ----------- ----
-
-
--------- -
---- ----------------------
-------- -------------------
--此时点击按钮时，控制台会输出一个页面状态对象：
{ type: 'increment' }处理不同的页面状态
我们现在需要根据点击事件的不同，来改变页面上某个元素的值。使用 @cycle/xstream-run 和 xstream 库，将 main 函数转化为可观测序列，就可以方便地在 update 函数中处理不同的页面状态：
-- -------------------- ---- -------
------ -- ---- ---------
------ - --- - ---- ------------
------ - ---- ------ - ---- ------------
------ - ----------------- - ---- ----------------
------ - ----- - ---- ----------------------
-------- ------------- -
----- ---------- - ------------------------------------------------
----- ---------- - ------------------------------------------------
----- ----------------- - ------------------ ----- ----------- --
----- ----------------- - ------------------ ----- ----------- --
----- -------- - --------------------------- ------------------
----- ------------ - - ------ - -
----- ------ - --------------------- ------- -- -
------ ------------- -
---- ------------
-------------
-----
---- ------------
-------------
-----
-
------ -----
-- ---------------------
----- ----- - ---------------- --
-----
-------------------- -------------
-------------------- -------------
--------------- --------------------
--
-
------ -
---- -------------
-------- --------
-
-
--------- -
---- ----------------------
-------- -------------------
--使用页面状态对象
现在我们可以在处理页面状态时添加更多的成员，例如 page：
-- -------------------- ---- -------
----- ------------ - -
------ --
----- ------
-
----- ------------ - ---------------------------- -- -
----- ---- - --------------------------- ---
------ - ----- -------------- ----- ---- -- ------ -
--
----- -------- - --------------------------- ------------------ -------------
----- ------ - --------------------- ------- -- -
------ ------------- -
---- ------------
-------------
-----
---- ------------
-------------
-----
---- --------------
---------- - -----------
-----
-
------ -----
-- ---------------------
----- ----- - ---------------- --
-----
-------------------- -------------
-------------------- -------------
--------------- ---------------------
------------ -----------
--
-将页面状态写入 history
最后，我们将状态写入 history，这样可以使得页面状态可通过浏览器的后退和前进按钮来控制：
-- -------------------- ---- -------
----- ------------ - ---------------------------- -- -
----- ---- - --------------------------- ---
------ - ----- -------------- ----- ---- -- ------ -
--
----- -------- - --------------------------- ------------------ -------------
----- ------ - --------------------- ------- -- -
------ ------------- -
---- ------------
-------------
-----
---- ------------
-------------
-----
---- --------------
---------- - -----------
--------------------------------
-----
-
------ -----
-- ---------------------
----- ----- - ---------------- --
-----
-------------------- -------------
-------------------- -------------
--------------- ---------------------
------------ -----------
--
-
------ -
---- -------------
-------- --------
-总结
@cycle/history 包提供了一种简便的方式来使用 history API，并且可以很方便地跟 Cycle.js 项目集成使用。上面的示例展示了如何使用 @cycle/history 来添加页面状态的改变、处理不同的页面状态、使用页面状态对象以及将页面状态写入 history，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6f4b5cbfe1ea06116a3