玩转Koa之koa-router原理解析

 function Layer(path, methods, middleware, opts) {  this.opts = opts || {};  // 支持路由别名  this.name = this.opts.name || null;  this.methods = [];  this.paramNames = [];  // 将路由执行函数保存在stack中，支持输入多个处理函数  this.stack = Array.isArray(middleware) ? middleware : [middleware];   methods.forEach(function(method) {   var l = this.methods.push(method.toUpperCase());   // HEAD请求头部信息与GET一致，这里就一起处理了。   if (this.methods[l-1] === 'GET') {    this.methods.unshift('HEAD');   }  }, this);   // 确保类型正确  this.stack.forEach(function(fn) {   var type = (typeof fn);   if (type !== 'function') {    throw new Error(     methods.toString() + " `" + (this.opts.name || path) +"`: `middleware` "     + "must be a function, not `" + type + "`"    );   }  }, this);   this.path = path;  // 1、根据路由路径生成路由正则表达式  // 2、将params参数信息保存在paramNames数组中  this.regexp = pathToRegExp(path, this.paramNames, this.opts); };

 // 验证路由 Layer.prototype.match = function (path) {  return this.regexp.test(path); }  // 捕获params参数 Layer.prototype.captures = function (path) {  // 后续会提到 对于路由级别中间件 无需捕获params  if (this.opts.ignoreCaptures) return [];  return path.match(this.regexp).slice(1); }  

 Layer.prototype.params = function (path, captures, existingParams) {  var params = existingParams || {};  for (var len = captures.length, i=0; i<len; i++) {   if (this.paramNames[i]) {    var c = captures[i];    params[this.paramNames[i].name] = c ? safeDecodeURIComponent(c) : c;   }  }  return params; }; 

 function safeDecodeURIComponent(text) {  try {   return decodeURIComponent(text);  } catch (e) {   // 编码方式不符合要求，返回原字符串   return text;  } } 

 Layer.prototype.param = function (param, fn) {  var stack = this.stack;  var params = this.paramNames;  var middleware = function (ctx, next) {   return fn.call(this, ctx.params[param], ctx, next);  };  middleware.param = param;  var names = params.map(function (p) {   return p.name;  });  var x = names.indexOf(param);  if (x > -1) {   stack.some(function (fn, i) {    if (!fn.param || names.indexOf(fn.param) > x) {     // 将单个param前置处理函数插入正确的位置     stack.splice(i, 0, middleware);     return true; // 跳出循环    }   });  }   return this; };  

 Layer.prototype.setPrefix = function (prefix) {  if (this.path) {   this.path = prefix + this.path; // 拼接新的路由路径   this.paramNames = [];   // 根据新的路由路径字符串生成正则表达式   this.regexp = pathToRegExp(this.path, this.paramNames, this.opts);  }  return this; };

 function Router(opts) {  if (!(this instanceof Router)) {   // 限制必须采用new关键字   return new Router(opts);  }   this.opts = opts || {};  // 服务器支持的请求方法， 后续allowedMethods方法会用到  this.methods = this.opts.methods || [   'HEAD',   'OPTIONS',   'GET',   'PUT',   'PATCH',   'POST',   'DELETE'  ];   this.params = {}; // 保存param前置处理函数  this.stack = []; // 存储layer };

 http.METHODS && http.METHODS.map(function lowerCaseMethod (method) {  return method.toLowerCase() })

 methods.forEach(function (method) {  Router.prototype[method] = function (name, path, middleware) {   var middleware;    // 1、处理是否传入name参数   // 2、middleware参数支持middleware1, middleware2...的形式   if (typeof path === 'string' || path instanceof RegExp) {    middleware = Array.prototype.slice.call(arguments, 2);   } else {    middleware = Array.prototype.slice.call(arguments, 1);    path = name;    name = null;   }      // 路由注册的核心处理逻辑   this.register(path, [method], middleware, {    name: name   });    return this;  }; });  

 Router.prototype[method] = function (options, ...middleware) {  let { name, path } = options  if (typeof options === 'string' || options instanceof RegExp) {   path = options   name = null  }  // ...  return this; }; 

 Router.prototype.register = function (path, methods, middleware, opts) {  opts = opts || {};   var router = this;  var stack = this.stack;   // 注册路由中间件时，允许path为数组  if (Array.isArray(path)) {   path.forEach(function (p) {    router.register.call(router, p, methods, middleware, opts);   });   return this;  }   // 实例化Layer  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  });   // 设置前缀  if (this.opts.prefix) {   route.setPrefix(this.opts.prefix);  }   // 设置param前置处理函数  Object.keys(this.params).forEach(function (param) {   route.param(param, this.params[param]);  }, this);   stack.push(route);   return route; };  

  var router = this;  var middleware = Array.prototype.slice.call(arguments);  var path;   // 支持多路径在于中间件可能作用于多条路由路径  if (Array.isArray(middleware[0]) && typeof middleware[0][0] === 'string') {   middleware[0].forEach(function (p) {    router.use.apply(router, [p].concat(middleware.slice(1)));   });    return this;  }  // 处理路由路径参数  var hasPath = typeof middleware[0] === 'string';  if (hasPath) {   path = middleware.shift();  }   middleware.forEach(function (m) {   // 嵌套路由   if (m.router) {    // 嵌套路由扁平化处理    m.router.stack.forEach(function (nestedLayer) {     // 更新嵌套之后的路由路径     if (path) nestedLayer.setPrefix(path);     // 更新挂载到父路由上的路由路径     if (router.opts.prefix) nestedLayer.setPrefix(router.opts.prefix);      router.stack.push(nestedLayer);    });      // 不要忘记将父路由上的param前置处理操作 更新到新路由上。    if (router.params) {     Object.keys(router.params).forEach(function (key) {      m.router.param(key, router.params[key]);     });    }   } else {    // 路由级别中间件 创建一个没有method的Layer实例    router.register(path || '(.*)', [], m, { end: false, ignoreCaptures: !hasPath });   }  });   return this; };

 Router.prototype.match = function (path, method) {  var layers = this.stack;  var layer;  var matched = {   path: [],   pathAndMethod: [],   route: false  };   for (var len = layers.length, i = 0; i < len; i++) {   layer = layers[i];   if (layer.match(path)) {    // 路由路径满足要求    matched.path.push(layer);     if (layer.methods.length === 0 || ~layer.methods.indexOf(method)) {     // layer.methods.length === 0 该layer为路由级别中间件     // ~layer.methods.indexOf(method) 路由请求方法也被匹配     matched.pathAndMethod.push(layer);     // 仅当路由路径和路由请求方法都被满足才算是路由被匹配     if (layer.methods.length) matched.route = true;    }   }  }  return matched; };  

  if (layer.methods.indexOf(method) > -1) {   ...  }

  if (layer.methods.includes(method)) {   ...  }

 const Koa = require('koa'); const Router = require('koa-router');  const app = new Koa(); const router = new Router();  router.get('/', (ctx, next) => {  // ctx.router available });  app  .use(router.routes())  .use(router.allowedMethods());  

 Router.prototype.allowedMethods = function (options) {  options = options || {};  var implemented = this.methods;   return function allowedMethods(ctx, next) {   return next().then(function() {    var allowed = {};     if (!ctx.status || ctx.status === 404) {     ctx.matched.forEach(function (route) {      route.methods.forEach(function (method) {       allowed[method] = method;      });     });      var allowedArr = Object.keys(allowed);      if (!~implemented.indexOf(ctx.method)) {      // 服务器不支持该方法的情况      if (options.throw) {       var notImplementedThrowable;       if (typeof options.notImplemented === 'function') {        notImplementedThrowable = options.notImplemented();       } else {        notImplementedThrowable = new HttpError.NotImplemented();       }       throw notImplementedThrowable;      } else {       // 响应 501 Not Implemented       ctx.status = 501;       ctx.set('Allow', allowedArr.join(', '));      }     } else if (allowedArr.length) {      if (ctx.method === 'OPTIONS') {       // 获取服务器对该路由路径支持的方法集合       ctx.status = 200;       ctx.body = '';       ctx.set('Allow', allowedArr.join(', '));      } else if (!allowed[ctx.method]) {       if (options.throw) {        var notAllowedThrowable;        if (typeof options.methodNotAllowed === 'function') {         notAllowedThrowable = options.methodNotAllowed();        } else {         notAllowedThrowable = new HttpError.MethodNotAllowed();        }        throw notAllowedThrowable;       } else {        // 响应 405 Method Not Allowed        ctx.status = 405;        ctx.set('Allow', allowedArr.join(', '));       }      }     }    }   });  }; };  

 Router.prototype.routes = Router.prototype.middleware = function () {  var router = this;  // 返回中间件处理函数  var dispatch = function dispatch(ctx, next) {   var path = router.opts.routerPath || ctx.routerPath || ctx.path;   var matched = router.match(path, ctx.method);   var layerChain, layer, i;    // 【1】为后续的allowedMethods中间件准备   if (ctx.matched) {    ctx.matched.push.apply(ctx.matched, matched.path);   } else {    ctx.matched = matched.path;   }    ctx.router = router;    // 未匹配路由 直接跳过   if (!matched.route) return next();    var matchedLayers = matched.pathAndMethod   var mostSpecificLayer = matchedLayers[matchedLayers.length - 1]   ctx._matchedRoute = mostSpecificLayer.path;   if (mostSpecificLayer.name) {    ctx._matchedRouteName = mostSpecificLayer.name;   }   layerChain = matchedLayers.reduce(function(memo, layer) {    // 【3】路由的前置处理中间件 主要负责将params、路由别名以及捕获数组属性挂载在ctx上下文对象中。    memo.push(function(ctx, next) {     ctx.captures = layer.captures(path, ctx.captures);     ctx.params = layer.params(path, ctx.captures, ctx.params);     ctx.routerName = layer.name;     return next();    });    return memo.concat(layer.stack);   }, []);   // 【4】利用koa中间件组织的方式，形成一个‘小洋葱'模型   return compose(layerChain)(ctx, next);  };   // 【2】router属性用来use方法中区别路由级别中间件  dispatch.router = this;  return dispatch; };