在前面章节中介绍的静态资源服务器在渲染目录页的时候使用了部分动态特性——模板渲染，而路由功能是动态服务器的基础

路由简单来讲就是根据客户端的请求路径和方法（get、post 等）调用不同的功能

最简单的路由

使用中间件可以轻松实现一个极简的路由

为了方便 response 内容输出，先写一个最简单的处理 response 的中间件 src/middleware/body.js

  1. module.exports = async function (ctx, next) {
  2.   await next();
  4.   const { body } = ctx;
  6.   if (body !== null && body !== undefined) {
  7.     if (typeof ctx.body === 'string') {
  8.       ctx.res.end(ctx.body);
  9.     } else {
  10.       ctx.body.pipe(ctx.res);
  11.     }
  12.   }
  13. };

然后是最简单的路由实现，对响应的请求处理有限

  1. 只能响应 GET 方法
  2. 路径以 file/ 或者 /data/ 开头

src/middleware/router.js

  1. async function router(ctx, next) {
  2.   await next();
  3.   const { path, method } = ctx;
  4.   if (/^\/file\/.+/.test(path) && method === 'GET') {
  5.     ctx.body = `get file: ${path}`;
  6.   } else if (/^\/data\/.+/.test(path) && method === 'GET') {
  7.     ctx.body = `get data: ${path}`;
  8.   } else {
  9.     ctx.body = 'error!';
  10.   }
  11. }
  13. module.exports = router;

在 start() 方法中注册两个中间件 src/index.js

  1. this.server = http.createServer((req, res) => {
  2.   const { url, method } = req;
  4.   // 准备中间件的执行环境
  5.   const ctx = {
  6.     req,
  7.     res,
  8.     config: this.config,
  9.     path: url,
  10.     method,
  11.   };
  13.   // 按顺序调用中间件
  14.   compose([body, router])(ctx);
  15. }).listen(port, () => {
  16.   console.log(`Dynamic server started at port ${port}`);
  17. });

完整代码：https://github.com/Samaritan89/dynamic-server/tree/v1

koa-router

这样的实现问题很明显，当路由多起来后代码中充斥大量的 if-else 不方便管理，koa-router 通过简洁的 api 让路由管理非常简单

  1. const Koa = require('koa');
  2. const KoaRouter = require('koa-router');
  4. const app = new Koa();
  5. // 创建 router 实例对象
  6. const router = new KoaRouter();
  8. //注册路由
  9. router.get('/', async (ctx, next) => {
  10.   console.log('index');
  11.   ctx.body = 'index';
  12. });
  14. app.use(router.routes());  // 添加路由中间件
  16. app.listen(3000);

通过 router.get(path, middleware) 就可以注册一个路径对应的处理函数，而且支持链式调用，最后通过 router.routes() 获取所有路径处理函数，转成一个中间件注册到 koa

实现

koa-router 功能很多，支持携带 param 参数的路由，了解其原理可以实现一个最基础的 router
src/util/router.js

  1. class Router {
  2.   constructor() {
  3.     const methods = ['get', 'post'];
  4.     this.stack = {};
  6.     methods.forEach(method => {
  7.       // router.get(path, middleware), router.post(path, middleware)
  8.       // router.register(path, method, middleware) 快捷方式
  9.       Router.prototype[method] = function (path, middleware) {
  10.         this.register(path, method, middleware);
  11.         // 支持链式调用
  12.         return this;
  13.       };
  15.       // 每种方法单独维护一个数组，提升路由匹配性能
  16.       this.stack[method] = [];
  17.     });
  18.   }
  20.   register(path, method, middleware) {
  21.     // 注册一个处理函数导 this.stack
  22.     this.stack[method].push({
  23.       path,
  24.       middleware,
  25.     });
  26.   }
  28.   routes() {
  29.     // 导出 koa 中间件
  30.   }
  31. }
  33. module.exports = Router;

register(path, method, middleware) 用来代替之前 if(path === xxx && method === xxxx)，为了方便使用在构造函数处理成了

  1. router.get(path, middleware)
  2. router.post(path, middleware)

routes() 方法用于最终请求来了匹配路径和method，选择合适的中间件执行

  1. routes() {
  2.   const stack = this.stack;
  3.   return async function (ctx, next) {
  4.     const middlewareList = stack[ctx.method.toLowerCase()];
  6.     let targetMiddleware;
  8.     for (let i = 0; i < middlewareList.length; i++) {
  9.       const { path, middleware } = middlewareList[i];
  10.       // 忽略了 url 参数等影响
  11.       const isPathMatch = path instanceof RegExp ? path.test(ctx.path) : path === ctx.path;
  13.       if (isPathMatch) {
  14.         targetMiddleware = middleware;
  15.         // 使用匹配到的第一个路由，不再继续尝试
  16.         break;
  17.       }
  18.     }
  20.     if (targetMiddleware) {
  21.       await targetMiddleware(ctx, next);
  22.     } else {
  23.       await next();
  24.     }
  25.   }
  26. }

这样就可以和 koa-router 一样写路径处理函数了
src/route.js

  1. const Router = require('./util/router');
  3. const router = new Router();
  5. router
  6.   .get(/^\/file\/.+/, async (ctx, next) => {
  7.     await next();
  8.     const { path } = ctx;
  9.     ctx.body = `get file: ${path}`;
  10.   })
  11.   .get(/^\/data\/.+/, async (ctx, next) => {
  12.     await next();
  13.     const { path } = ctx;
  14.     ctx.body = `get data: ${path}`;
  15.   })
  16.   .get(/.*/, async (ctx, next) => {
  17.     await next();
  18.     const { path } = ctx;
  19.     ctx.body = `error: ${path}`;
  20.   });
  22. module.exports = router.routes();

完整代码：https://github.com/Samaritan89/dynamic-server/tree/v2