解读并实现一个简单的koa-router

时间  2019-11-17 标签 解读 实现 一个 简单 koa router

Koa 应用程序是一个包含一组中间件函数的对象，它是按照相似堆栈的方式组织和执行的。git

这是 koa 对本身的介绍，其余 koa 依赖的库其实均可以算是中间件，koa-router 也不例外。github

ps: 本文代码中的中文解释是对代码的讲解，省略号(...)表明省略部分代码 文章最后有简版router的项目地址正则表达式

对 koa-router 的猜测

经过 koa 最简单的 hellow world 例子能够看出原生对请求的处理方式:api

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);
复制代码

要是咱们想简单的实现路由的话，能够添加一些判断条件数组

app.use(async ctx => {
  if (ctx.path === '/one' && ctx.method === 'get') {
    ctx.body = 'Hello World';
  } else {
    ctx.status = 404;
    ctx.body = '';
  }
});
复制代码

这样的话能实现简单对路由的实现，不过路由越多的话消耗的性能也就越大，并且不容易对特殊路由添加中间件。而更好的方法是使用面向对象的方式，根据请求的 path 和 method 返回相应的中间件处理函数和执行函数。bash

解读思路

这里要介绍下我解读 koa-router 源码的方法，我会先把 koa-router 的源码下载到本地，而后通读一遍（由于源码算是比较少的），从大致上知道 koa-router 执行流程，而后经过单元测试去 debug 分析。restful

Router 执行流程图

koa-router 流程.png

我认为 koa-router 最基本且核心的API有四个:app

  1. router.match 能够根据请求的 path 和 method 筛选出匹配的 route
  2. router.register 注册 route
  3. router.routes 返回用于 koa 加载的中间件，经过 koa-compose 将middlewares 压缩成一个函数
  4. router.method(get、post等) 能够根据path、method 定义 router，而且能够将middleware绑定在路由上

解读

咱们能够结合代码和单元测试对源码进行理解，由最简单的测试开始debug：koa

it('router can be accecced with ctx', function (done) {
      var app = new Koa();
      var router = new Router();
      router.get('home', '/', function (ctx) {
          ctx.body = {
            url: ctx.router.url('home')
          };
      });

      console.log(router.routes()); // 这是我加的，查看最后加载的routes
      app.use(router.routes());
      request(http.createServer(app.callback()))
          .get('/')
          .expect(200)
          .end(function (err, res) {
              if (err) return done(err);
              expect(res.body.url).to.eql("/");
              done();
          });
  });
复制代码

router.routes() 返回:async

function dispatch(ctx, next) {
    debug('%s %s', ctx.method, ctx.path);
    var path = router.opts.routerPath || ctx.routerPath || ctx.path;
    var matched = router.match(path, ctx.method);
    var layerChain, layer, i;
    ...
    ctx.router = router;
    if (!matched.route) return next();
    // 获取已匹配的 routes (实例化 Layer 对象)
    var matchedLayers = matched.pathAndMethod
    ...
    // 若匹配了多个 route，则将多个执行函数 push 进一个数组
    layerChain = matchedLayers.reduce(function(memo, layer) {
      ...
      return memo.concat(layer.stack);
    }, []);

    return compose(layerChain)(ctx, next);
  }
复制代码

router.routes() 返回一个 dispatch 函数，从中能够看出请求进来会通过 router.match(后面有分析)，而后将匹配到的 route 的执行函数 push 进数组，并经过 compose(koa-compose) 函数合并返回。

而后在打印出 compose(layerChain) 方法，能够看到其实最后请求执行的函数是对ctx.body = {url: ctx.router.url('home')}; 的 compose 封装函数，在效果上至关于

app.use(ctx => {
  ctx.body = {
    url: ctx.router.url('home')
  };
});
复制代码
  • Router 构造函数
function Router(opts) {
  if (!(this instanceof Router)) {
    return new Router(opts);
  }

  this.opts = opts || {};
  // 定义各方法
  this.methods = this.opts.methods || [
    'HEAD',
    'OPTIONS',
    'GET',
    'PUT',
    'PATCH',
    'POST',
    'DELETE'
  ];

  this.params = {};
  // 初始化定义 route 栈
  this.stack = [];
};
复制代码
  • 分析 router.method 方法
// methods ['get', 'post', 'delete', 'put', 'patch', ...]
methods.forEach(function (method) {
  Router.prototype[method] = function (name, path, middleware) {
    var middleware;

    if (typeof path === 'string' || path instanceof RegExp) {
      // 若第二个参数是 string 或 正则表达式，则将后面的参数归为 middleware
      middleware = Array.prototype.slice.call(arguments, 2);
    } else {
      // 不然说明没有传 name 参数，将第一个参数置为path，以后的参数归为 middleware
      middleware = Array.prototype.slice.call(arguments, 1);
      path = name;
      name = null;
    }

    // 注册 route（下面会讲到 register 方法）
    this.register(path, [method], middleware, {
      name: name
    });
    
    // 返回 Router 对象，能够链式调用
    return this;
  };
});
复制代码
  • 分析 router.register 方法
Router.prototype.register = function (path, methods, middleware, opts) {
  opts = opts || {};

  var stack = this.stack;
  ...
  // create route
  // 实例化一个 Layer 对象，Layer 对象将 path 转为 regexp，并增长了匹配 path 的可选 ops 参数
  var route = new Layer(path, methods, middleware, {
    end: opts.end === false ? opts.end : true,
    name: opts.name,
    sensitive: opts.sensitive || this.opts.sensitive || false,
    strict: opts.strict || this.opts.strict || false,
    prefix: opts.prefix || this.opts.prefix || "",
    ignoreCaptures: opts.ignoreCaptures
  });

  console.log(route);
  /**
   * Layer {
   * ...省略部分属性
   * methods: [ 'HEAD', 'GET' ],
   * stack: [ [Function] ],
   * path: '/',
   * regexp: { /^(?:\/(?=$))?$/i keys: [] } } // 用于匹配 path
   */
  ...
  // 将注册的 route 存放在 stack 队列中
  stack.push(route);

  return route;
};
复制代码

register 方法主要用于实例化 Layer 对象，并支持多各 path 同时注册、添加路由前缀等功能（展现代码忽略）。

  • 分析 router.match
Router.prototype.match = function (path, method) {
  // 获取已经注册的 routes （实例化Layer对象）
  var layers = this.stack;
  var layer;
  var matched = {
    path: [],
    pathAndMethod: [],
    route: false
  };

  // 循环查找可以匹配的route
  for (var len = layers.length, i = 0; i < len; i++) {
    layer = layers[i];

    debug('test %s %s', layer.path, layer.regexp);

    // 根据layer.regexp.test(path) 匹配
    if (layer.match(path)) {
      matched.path.push(layer);

      // todo ~操做符暂时没懂
      if (layer.methods.length === 0 || ~layer.methods.indexOf(method)) {
        matched.pathAndMethod.push(layer);
        // 将匹配标志 route 设为 true，这里我以为改成 hitRoute 更容易理解
        if (layer.methods.length) matched.route = true;
      }
    }
  }

  return matched;
};
复制代码

实现简版Router

经过上面的分析，其实已经讲解了 koa-router 核心的部分：构造 Router 对象 => 定义 router 入口 => 匹配路由 => 合并中间件和执行函数输出；这4个API能够处理简单的 restful 请求，额外的API例如重定向、router.use、路由前缀等在了解核心代码后阅读起来就简单不少了；简版其实就是上面api的精简版，原理一致，能够到个人项目看下
simple-koa-router：github.com/masongzhi/s…

总结

koa-router 帮咱们定义并选择相应的路由，对路由添加中间件和一些兼容和验证的工做；在 koa 中间件应用的基础上，比较容易理解中间件的实现，koa-router 为咱们作了更好的路由层管理，在设计上能够参考实现，同时研究优美源码也是对本身的一种提高。

联系我们 沪ICP备13005482号-10