简介
Observ-Hash 是一个基于 JavaScript 的小型库，它可以让你监视当前页面 URL 中 hash 的变化，并在变化时触发回调函数。它的作用是便于前端开发中实现路由导航功能，同时又不需要依赖框架以及其他库。
安装
你可以使用 npm 来安装 Observ-Hash。
npm install observ-hash
使用
用 Observ-Hash 实现路由导航功能十分简单。首先，在项目中引入 Observ-Hash：
const ObservHash = require("observ-hash");
然后创建一个新的 Observ-Hash 实例：
const observHash = new ObservHash();
现在，你可以设置你想要观察的 hash 值，和响应变化的回调函数了：
observHash.observe("route", function (newValue, oldValue) { console.log(`Route has been changed from ${oldValue} to ${newValue}`); });
这个回调函数会在 hash 发生变化时被调用，而且它会接收新旧两个 hash 值作为参数。
你也可以使用 Observ-Hash 监视 URL 中的其他值：
observHash.observe("search", function (newValue) { console.log(`Search query has been changed to ${newValue}`); }); observHash.observe("pathname", function (newValue) { console.log(`Page is now at ${newValue}`); });
除了 observe 方法之外，还有一些其他的方法可供使用。例如，你可以使用 get 方法获取当前 hash 的值：
const routeValue = observHash.get("route");
你也可以使用 set 方法手动设置一个新的 hash 值：
observHash.set("route", "/dashboard");
示例
现在让我们看一个完整的使用 Observ-Hash 实现路由导航功能的示例。在这个示例中，我们要根据 URL 中的 hash 值来显示不同的页面内容：
-- -------------------- ---- ------- ------ ------ ------------------ ------------ ------- ------ ----- -- ------------------ -- ------------------------ -- ---------------------------- ------ ---- ------------------- ------- ------- ----------------------------------------------------------------- -------- ----- ---------- - --- ------------- --------------------------- -------- ---------- - -- --------- --- --------- - -------------------------------------------- - ---------- ------------ --- - ----- ---- -- ----------------- - ---- -- --------- --- ----------- - -------------------------------------------- - ------------ ------------- --- ----- -- -- -------------------------- - ---- - -------------------------------------------- - ------------------------ -- --- ---- ----------- - --- --------- -------展开代码
你可以将这个示例保存为 index.html 文件并在浏览器中打开它。当你点击导航链接时，它会相应地更新页面内容。
总结
Observ-Hash 是一个小巧但强大的库，它可以方便地监视当前 URL 中 hash 的变化并触发回调函数。使用它可以帮助你实现前端开发中的路由导航功能，同时又不需要依赖框架或其他库。希望本篇文章对你理解并使用 Observ-Hash 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef0bbbaefcef77a054b760e
