简介
Observ-Hash 是一个基于 JavaScript 的小型库，它可以让你监视当前页面 URL 中 hash 的变化，并在变化时触发回调函数。它的作用是便于前端开发中实现路由导航功能，同时又不需要依赖框架以及其他库。
安装
你可以使用 npm 来安装 Observ-Hash。
--- ------- -----------
使用
用 Observ-Hash 实现路由导航功能十分简单。首先，在项目中引入 Observ-Hash：
----- ---------- - -----------------------
然后创建一个新的 Observ-Hash 实例：
----- ---------- - --- -------------
现在，你可以设置你想要观察的 hash 值，和响应变化的回调函数了：
--------------------------- -------- ---------- --------- - ------------------ --- ---- ------- ---- ----------- -- -------------- ---
这个回调函数会在 hash 发生变化时被调用，而且它会接收新旧两个 hash 值作为参数。
你也可以使用 Observ-Hash 监视 URL 中的其他值：
---------------------------- -------- ---------- - ------------------- ----- --- ---- ------- -- -------------- --- ------------------------------ -------- ---------- - ----------------- -- --- -- -------------- ---
除了 observe 方法之外，还有一些其他的方法可供使用。例如，你可以使用 get 方法获取当前 hash 的值：
----- ---------- - ------------------------
你也可以使用 set 方法手动设置一个新的 hash 值：
----------------------- --------------
示例
现在让我们看一个完整的使用 Observ-Hash 实现路由导航功能的示例。在这个示例中，我们要根据 URL 中的 hash 值来显示不同的页面内容：
------
------
------------------ ------------
-------
------
-----
-- ------------------
-- ------------------------
-- ----------------------------
------
---- -------------------
-------
------- -----------------------------------------------------------------
--------
----- ---------- - --- -------------
--------------------------- -------- ---------- -
-- --------- --- --------- -
-------------------------------------------- - ---------- ------------ --- - ----- ---- -- -----------------
- ---- -- --------- --- ----------- -
-------------------------------------------- - ------------ ------------- --- ----- -- -- --------------------------
- ---- -
-------------------------------------------- - ------------------------ -- --- ---- -----------
-
---
---------
-------你可以将这个示例保存为 index.html 文件并在浏览器中打开它。当你点击导航链接时，它会相应地更新页面内容。
总结
Observ-Hash 是一个小巧但强大的库，它可以方便地监视当前 URL 中 hash 的变化并触发回调函数。使用它可以帮助你实现前端开发中的路由导航功能，同时又不需要依赖框架或其他库。希望本篇文章对你理解并使用 Observ-Hash 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5ef0bbbaefcef77a054b760e