前言
在现代的前端开发过程中，路由是一个很重要的概念。在单页应用中使用路由可以让页面展示更加美观，用户交互体验更加友好。同时，使用路由也可以让前端开发更加模块化，方便维护和扩展。
在 JavaScript 中，有很多优秀的路由库可供选择，比如 React-Router 和 Vue-Router。但是这些库通常需要配合相应的框架使用，如果我们只是想使用一个简单的、独立的路由库，该怎么办呢？这时候，npm 包 spark-router 就能派上用场了。
spark-router 是一个轻量级的路由库，具有以下特点：
- 单文件，只有 57 行代码
- 简单易用，没有复杂的配置和 API
- 可扩展性强，可以自由添加中间件
- 支持浏览器和 Node.js 环境
本文将介绍如何使用 spark-router 实现一个简单的路由功能，并演示如何添加中间件。
安装
首先，我们需要安装 spark-router。打开终端，执行以下命令：
npm install spark-router
使用
我们先来看一个简单的例子。创建一个名为 app.js 的文件，写入以下代码：
const Router = require('spark-router');
const router = new Router();
router.on('/', () => {
console.log('Hello world!');
});
router.navigate('/');这段代码首先导入了 spark-router，然后创建了一个路由实例。调用 router.on 方法为根路由 / 添加一个处理函数。最后，调用 router.navigate 方法手动触发路由匹配和处理函数的执行。
在终端中运行 node app.js，我们会看到 Hello world! 的输出。
路由匹配
router.on 方法用于为指定的路由添加处理函数。该方法接收两个参数：路由路径和处理函数。路由路径支持路径参数和通配符，例如：
for (const path of ['/post', '/post/:id', '/post/*']) {
router.on(path, () => console.log(path));
}
router.navigate('/post'); // /post
router.navigate('/post/1'); // /post/:id
router.navigate('/post/a/b');// /post/*上面的代码展示了三种不同类型的路由。第一种是普通路由，只匹配对应路径。第二种是路径参数，用冒号标记，可以匹配任意非空字符串。第三种是通配符，用星号标记，可以匹配任意路径。
路由处理
添加处理函数可以为路由指定具体的操作。例如，我们可以根据路由路径加载不同的模板或组件，或者向服务器发送不同的请求。
处理函数接收两个参数：请求对象和响应对象。这里的请求对象包含了当前请求的一些信息，例如路由路径和查询参数。响应对象可以用于向客户端发送数据，例如页面内容或者 API 响应。
-- -------------------- ---- ------- ----- -------------- - ---------------- ----- ------ - ------------------ ---- -- - ------------------ ----- --- -------------- ----- ---- -- - ------------------ ---------------- --------------- -------------- --------- --- ------------------ ----- ---- -- - ------------------ ---------------- --------------- ---------------- ----- ----- ------------------------ --- ------------------- -- -- ------------------- ------- -- --------------------------
这段代码创建了一个 HTTP 服务器，将请求交给 spark-router 处理。我们为根路由和 /time 路由分别添加了处理函数，分别返回了字符串的响应结果。
在终端中运行 node app.js，然后访问 http://localhost:8080 和 http://localhost:8080/time，我们将看到不同的响应结果。
路由变量
路由变量是指类似于 /post/:id 中的 :id，用于表示路径的一部分是变量。使用路由变量可以让路由更加灵活，可以匹配多种不同的请求，同时让路由处理更加简洁。
在 spark-router 中，我们可以在请求对象的 params 属性中访问路由变量的值。例如：
router.on('/post/:id', (req, res) => {
console.log(req.params.id);
});
router.navigate('/post/1'); // 输出 '1'
router.navigate('/post/2'); // 输出 '2'
router.navigate('/post/foo'); // 输出 'foo'在这个例子中，我们为 /post/:id 路由添加了处理函数，通过 req.params.id 获取了 :id 的值。
中间件
中间件是指在路由处理函数执行之前或之后，可以对请求进行一些预处理或后处理的函数。例如，我们可以使用中间件实现权限验证、数据格式化等功能。中间件可以是一个函数，也可以是一个数组。
在 spark-router 中使用中间件非常简单。首先，我们可以为整个路由实例添加一个中间件：
router.use((req, res, next) => {
console.log(`Incoming request: ${req.method} ${req.url}`);
next();
});这个中间件会在路由处理函数执行之前打印请求地址和请求方法。
我们也可以为单个路由添加中间件：
router.on('/post/:id', (req, res) => {
console.log(`Post id: ${req.params.id}`);
}).use((req, res, next) => {
console.log(`Fetching post ${req.params.id}...`);
next();
});这段代码为 /post/:id 路由添加了一个处理函数和一个中间件。中间件会在处理函数执行之前打印输出，然后调用 next 方法，让处理函数继续执行。
需要注意的是，中间件只会在路由匹配成功后执行，如果没有路由匹配则不会执行。
结语
本文介绍了如何使用 npm 包 spark-router 实现一个简单的路由功能，并演示了如何添加中间件。spark-router 的使用非常简单，同时也具有很高的可扩展性。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e981e8991b448d792d