简介
随着现代 Web 应用中页面数量的增加，管理路由逻辑和链接变得越来越复杂。而 npm 包 named-routes 就可以帮助我们轻松地管理复杂的路由逻辑和链接。它提供了一种简洁而方便的方式来定义具有名称的路由，并使用这些名称来生成链接。
本文将介绍 Named-Routes 的安装和基本用法，以及一些高级使用技巧。此外，本文将深入研究 Named-Routes 的内部实现方式，以帮助读者更好地理解其原理和使用。
安装
Named-Routes 可以通过 npm 安装。在命令行中执行以下命令即可安装：
npm install named-routes --save
基本用法
一旦安装了 Named-Routes ，我们就可以在项目中开始使用它。首先，我们需要创建一个路由映射表。该映射表将指定任何给定路由的名称和 URL。例如：
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ----------- - --- -------------- --------------------------- -- - -------------------- ----- --------------------- ---------- -------------------- ------------- ---
以上代码创建了三条路由规则：
'home'将匹配/'about'将匹配/about'blog'将匹配类似/blog/123的 URL。其中:id表示一个参数，可以被任意值替换。例如，/blog/123中的123就是参数值。
现在，我们可以使用这些规则来生成链接。例如：
const homeLink = namedRoutes.path('home'); // '/'
const aboutLink = namedRoutes.path('about'); // '/about'
const blogLink = namedRoutes.path('blog', { id: 123 }); // '/blog/123'在以上代码中，namedRoutes.path(routeName, params) 方法将使用所提供的 routeName 和 params 生成链接，我们可以将生成的链接用在任何需要的地方，比如 HTML 模板中。例如：
<a href="{homeLink}">Home</a>
<a href="{aboutLink}">About</a>
<a href="{blogLink}">Blog</a>此时，我们就可以在不同的网页中完美使用这些链接。如果我们需要在 URL 中传递参数，例如：
const blogLink = namedRoutes.path('blog', { id: 123 });则会生成 /blog/123 的 URL。
高级用法
带有前缀的路由
在某些情况下，我们需要在生成的 URL 中添加前缀。例如，我们可能有多个模块，每个模块都有自己的路由规则和前缀：
-- -------------------- ---- ------- --------------------------- -- - ------------------------- ------------------ --- -------------------- ------- ------- -- -------- -- - -------------------- ----- ----------------------- ------------ -------------------- ------------- ---
在以上代码中，我们首先添加了一个路由规则，他的名称为 'dashboard'。紧接着，在一个匿名对象中，我们通过定义 prefix 属性指定了一个前缀，所有属于该前缀的路由都将使用该前缀。
现在，我们可以像下面这样使用新的前缀路由：
const dashboardLink = namedRoutes.path('dashboard', { id: 123 }); // '/dashboard/123'
const userHomeLink = namedRoutes.path('home'); // '/user'
const userProfileLink = namedRoutes.path('profile'); // '/user/profile'
const userBlogLink = namedRoutes.path('blog', { id: 123 }); // '/user/blog/123'定义命名空间
有时，我们需要在不同的路由规则中使用相同的名称。例如，我们可能有两个不同的模块，每个模块都有一个名为 home 的路由规则。为了避免冲突，我们可以使用命名空间将其分开。
在 Named-Routes 中，我们可以使用 namespace 属性为某个路由规则指定一个命名空间。例如：
namedRoutes.extend({ namespace: 'admin' }, (router) => {
router.route('home', '/');
});
namedRoutes.extend({ namespace: 'blog' }, (router) => {
router.route('home', '/');
});现在，我们可以通过以下方式来生成不同的链接：
const adminHomeLink = namedRoutes.path('admin.home'); // '/admin'
const blogHomeLink = namedRoutes.path('blog.home'); // '/blog'注意，我们可以通过 . 符号来分隔不同的命名空间和路由规则。
实现细节
在深入 Named-Routes 的实现细节之前，我们先了解一下这个包最重要的两个类：
NamedRoutes类：包含了所有的路由规则和命名空间。Builder类：用于生成路径和查询字符串。
NamedRoutes 类
NamedRoutes 类是 Named-Routes 的核心，它定义了所有的路由规则和命名空间。我们可以使用 extend() 方法来扩展路由配置。
-- -------------------- ---- -------
----- ----------- -
------------------ - --- -
----------- - --- ------
--------------- - --- ------
------------------- - ---
----------- - ------------- -- -------
--------- - ----------- -- ---
-
--------------- -
----- ------- - --------------
-
------- ---
---------- ---
--
----------- --- - - -- - -------------
-------------
--
----- -
-------
----------
-------
- - --------
-- -------- -
---------------------------------
-- -------------- -
---------------------
- ---- -
-------------------------
-
- ---- -- ----------- -
------------------------------------
--------- -- -
----- --------------- - --- ------
--------
---------- ---
------- ----------------
-----------
---
------------------------------------------ -----------------
---
- ---- -
---------
-
--------------------------
-
-- ---
-对于每个路由规则，其名称和 URL 将被添加到 NamedRoutes.routes Map 对象中。例如：
namedRoutes.extend((router) => {
router.route('home', '/');
router.route('about', '/about');
router.route('blog', '/blog/:id');
});
// namedRoutes.routes -> Map(3) { 'home' => '/', 'about' => '/about', 'blog' => '/blog/:id' }Builder 类
Builder 类用于生成路径和查询字符串。我们可以使用 Builder#path() 方法来生成符合路由规则的 URL：
-- -------------------- ---- -------
---
- ------ -------- --------
- ------ -------- ------
- ------ -------- -------
- -------- --------
--
-------------- ------ - --- ------- - --- -
----- --------- - ----------------------------
-- ------------ -
----- --- ------------ ------------- --- --------
-
----- -
----
------- ---------------
- - ----------
----- ------------------ - ----------------- ------------ --------------- --------
----- -------- - ------------------- ------------------- ---------
----- ----------- - ------------------------------------------
------ ----------------------------
-内部实现需要注意的重要细节：
- 前置条件：为
NamedRoutes实例赋予规则或构建查询参数，如namedRoutes.params = { token: '123456' }设置通用参数作为全局参数。 - 在
getRouteInfo()函数中获取路由信息，包含 URL 和参数。 - 将传递给
Builder#path()函数的参数合并到参数列表中。这将与默认参数合并并覆盖默认值。 - 调用
Builder#buildPath()和Builder#buildQueryString()函数，用我们提供的参数和 URL 生成完整的 URL。
buildPath(url, params, options) {
return this.options.host
+ this.options.scheme
+ '://'
+ this.namespaceStack.join('/')
+ this.options.prefix
+ Builder.buildUrl(url || '', params || {}, options || {});
}可以注意到 createRegularExpressForParameter() 函数创建了一个将被滚动重复执行的正则表达式。因此，函数实际上创建了一个“缓存”正则表达式，可以加快匹配速度。
static createRegularExpressForParameter(name, pattern) {
const prefixPattern = `\\:${name}`;
const fullPattern = `(^|\/)${prefixPattern}(?=\/|$)`;
const regexWithPattern = fullPattern.replace(prefixPattern, `(${pattern.source})`);
return new RegExp(regexWithPattern, 'g');
}示例代码
完整代码如下：
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ----------- - --- ------------- ------- ------- ----- ------------ --- --------------------------- -- - -------------------- ----- --------------------- ---------- -------------------- ------------- --- ----- -------- - ------------------------- ----- --------- - -------------------------- ----- -------- - ------------------------ - --- --- --- ---------------------- -- ------------------- ----------------------- -- ------------------------ ---------------------- -- ---------------------------
结论
在本文中，我们深入了解了 npm 包 Named-Routes 的用法和实现原理。随着我们的项目规模不断扩大，使用 Named-Routes 可以轻松解决复杂的路由管理问题。通过掌握本文中的技巧和示例，我们可以立即开始使用 Named-Routes 来管理我们的路由和生成链接，提升项目的可维护性、稳定性和响应能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4f1b5cbfe1ea06113a8