介绍
@humblesoftware/taxi 是一个基于 JavaScript 实现的前端路由库，它可以帮助开发者快速地搭建单页应用程序。该库提供了对路由的管理、参数获取、回调事件等多个方面的支持。使用 @humblesoftware/taxi 可以有效地降低前端开发的工作量，提高开发效率。
安装
安装 @humblesoftware/taxi 无需繁琐的步骤，只需要在命令行中输入以下代码即可：
npm install @humblesoftware/taxi --save
基本使用
使用 @humblesoftware/taxi 首先需要在页面中引入它：
<script src="path/to/humblesoftware/taxi.js"></script>
然后，在 JavaScript 代码中使用以下代码来创建路由：
-- -------------------- ---- ------- --- ------ - --- ------- ------------------ -------- -- - --------------------- --- ----------------------------- -------- ---------- - --------------- - - -------- - - -------- --- ---------------- -------- -- - ---------------- --- -------- --- ---------------
在上面的代码中，通过 new Taxi() 创建了一个实例对象，然后使用 add 方法添加了三个路由：
- 当访问网址为
/时，输出默认欢迎页； - 当访问网址为
/user/xxx时（xxx 可以是任何字符串），输出该用户的个人主页； - 当访问网址为其他任何格式时，输出 404 Not Found。
最后，使用 start 方法启动路由即可。
高级使用
除了基本使用外，@humblesoftware/taxi 还提供了许多丰富的功能。下面我们分别介绍这些功能的使用方法。
带参数的路由
在基本使用中，我们已经看到了如何使用 add 方法创建简单的路由。现在，我们可以使用与之类似的语法，创建带参数的路由。
router.add('/user/:id', function (params) {
console.log('访问用户 ' + params.id + ' 的个人主页');
});可见，在路由字符串中使用冒号 : 后跟参数名，这样路由就能正确匹配与该参数对应的值。
嵌套路由
在实际开发过程中，我们通常需要在页面中创建嵌套的路由结构。这时，我们可以使用 @humblesoftware/taxi 提供的 group 方法来创建。
-- -------------------- ---- ------- --- ----------- - --- ------- ----------------------- -------- -- - --------------------- --- ---------------------------- -------- --------- - --------------- - - ------- - - -------- --- ---------------------- -------------
在上面的代码中，我们创建了一个名为 goodsRouter 的子路由，然后使用 group 方法将其与 router 绑定在了一起。这样，在访问 /goods 和 /goods/xxx 时，将会分别匹配到 goodsRouter 中的第一个和第二个路由。
中间件
除了路由的匹配之外，@humblesoftware/taxi 还允许我们在路由执行之前或之后，通过指定的中间件对请求进行处理。这些中间件可以是一个或多个函数，它们按照指定的顺序依次执行，并且可以在路由执行之前或之后拦截请求，做一些额外的处理。
-- -------------------- ---- ------- ------------------- ------ - ---------------- - ------- ------- ---------------- - ------- --- ------------------- ------ - ---------------- - ------- ------- ---------------- - ------- --- ------------------------ -------- -------- - ----------------- - - ----------- --- ---------------
在上面的代码中，我们使用 use 方法添加了两个中间件，并将路由与其绑定。可见，在路由执行之前或之后，这两个中间件都会被执行，且按照指定的顺序执行。
路由参数的获取
在之前的示例中，我们讲到了如何在路由字符串中定义参数名，并在回调函数中通过 params 来获取这些参数的值。不过，这种方式还有不足之处，即无法获取查询参数和 hash 参数。为了解决这个问题，@humblesoftware/taxi 提供了 query 和 hash 属性来获取这些参数。
router.add('/search', function () {
var keyword = router.query.keyword;
console.log('搜索关键字：' + keyword);
});在上面的代码中，我们使用了 query 属性来获取查询参数中的关键字。同理，我们还可以使用 hash 属性来获取 hash 参数。
总结
@humblesoftware/taxi 是一个功能丰富且易于使用的前端路由库。在本文中，我们详细介绍了该库的基本使用和高级功能，包括路由参数的获取、中间件、嵌套路由等。希望这篇文章对大家有所帮助，能够在实际项目中更好地使用 @humblesoftware/taxi。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bbf967216659e244150