教你從寫(xiě)一個(gè)迷你koa-router到閱讀koa-router源碼

yzzz 發(fā)布于2019-08-23 16:13 / 1376人閱讀

摘要：本打算教一步步實(shí)現(xiàn)，因?yàn)橐忉尩奶嗔?，所以先?jiǎn)化成版本，從實(shí)現(xiàn)部分功能到閱讀源碼，希望能讓你好理解一些。

本打算教一步步實(shí)現(xiàn)koa-router，因?yàn)橐忉尩奶嗔?，所以先?jiǎn)化成mini版本，從實(shí)現(xiàn)部分功能到閱讀源碼，希望能讓你好理解一些。
希望你之前有讀過(guò)koa源碼，沒(méi)有的話，給你鏈接

最核心需求-路由匹配

router最重要的就是路由匹配，我們就從最核心的入手

router.get("/string",async (ctx, next) => {
  ctx.body = "koa2 string"
})

router.get("/json",async (ctx, next) => {
  ctx.body = "koa2 json"
})

我們希望

路徑訪問(wèn) /string 頁(yè)面顯示 "koa2 string"

路徑訪問(wèn) /json 頁(yè)面顯示 "koa2 json"

先分析

收集開(kāi)發(fā)者輸入的信息配置

1.我們需要一個(gè)數(shù)組，數(shù)組里每個(gè)都是一個(gè)對(duì)象，每個(gè)對(duì)象包含路徑，方法，函數(shù)，傳參等信息
這個(gè)數(shù)組我們起個(gè)名字叫stack

const stack = []

2.對(duì)于每一個(gè)對(duì)象，我們起名叫l(wèi)ayer
我們把它定義成一個(gè)函數(shù)

function Layer() {
    
}

我們把頁(yè)面比喻成一個(gè)箱子，箱子是對(duì)外的，箱子需要有入口，需要容納。把每一個(gè)router比作放在箱子里的物件，物件是內(nèi)部的

定義兩個(gè)js頁(yè)面，router.js做為入口，對(duì)于當(dāng)前頁(yè)面的訪問(wèn)的處理，layer.js包含開(kāi)發(fā)者已經(jīng)約定好的規(guī)則

router.js

module.exports = Router;

function Router(opts) {
  // 容納layer層
  this.stack = [];
};

layer.js

module.exports = Layer;

function Layer() {

};

我們?cè)赗outer要放上許多方法，我們可以在Router內(nèi)部掛載方法，也可以在原型上掛載函數(shù)

但是要考慮多可能Router要被多次實(shí)例化，這樣里面都要開(kāi)辟一份新的空間，掛載在原型就是同一份空間。
最終決定掛載在原型上

方法有很多，我們先實(shí)現(xiàn)約定幾個(gè)常用的吧

const methods = [
  "get",
  "post",
  "put",
  "head",
  "delete",
  "options",
];

methods.forEach(function(method) {
  Router.prototype[method] = function(path,middleware){
    // 對(duì)于path,middleware，我們需要把它交給layer，拿到layer返回的結(jié)果
    // 這里交給另一個(gè)函數(shù)來(lái)是實(shí)現(xiàn)，我們叫它register就是暫存的意思
    this.register(path, [method], middleware);
    // 因?yàn)間et還可以繼續(xù)get，我們返回this
    return this
  };
});

實(shí)現(xiàn)layer的溝通

Router.prototype.register = function (path, methods, middleware) {
  let stack = this.stack;
  let route = new Layer(path, methods, middleware);
  stack.push(route);
  
  return route
};

這里我們先去寫(xiě)layer

const pathToRegExp = require("path-to-regexp");

function Layer(path, methods, middleware) {
  // 把方法名稱放到methods數(shù)組里
  this.methods = [];
  // stack盛放中間件函數(shù)
  this.stack = Array.isArray(middleware) ? middleware : [middleware];
  // 路徑
  this.path = path;
  // 對(duì)于這個(gè)路徑生成匹配規(guī)則，這里借助第三方
  this.regexp = pathToRegExp(path);
  // methods
  methods.forEach(function(method) {
    this.methods.push(method.toUpperCase());
    // 綁定layer的this，不然匿名函數(shù)的this指向window
  }, this);

};
// 給一個(gè)原型方法match匹配返回true
Layer.prototype.match = function (path) {
  return this.regexp.test(path);
};

回到router層

定義match方法,根據(jù)Developer傳入的path, method返回一個(gè)對(duì)象(包括是否匹配，匹配成功layer，和匹配成功的方法)

Router.prototype.match = function (path, method) {
  const layers = this.stack;
  let layer;
  const matched = {
    path: [],
    pathAndMethod: [],
    route: false
  };
   //循環(huán)寄存好的stack層的每一個(gè)layer
  for (var len = layers.length, i = 0; i < len; i++) {
    layer = layers[i];

    //layer是提前存好的路徑， path是過(guò)來(lái)的path
    if (layer.match(path)) {
      // layer放入path，為什么不把path傳入，一是path已經(jīng)沒(méi)用了，匹配了就夠了，layer含有更多信息需要用
      matched.path.push(layer);
      //如果methods什么也沒(méi)寫(xiě)，或者如果方法里含有你的過(guò)來(lái)的方法，那么把layer放入pathAndMethod
      if (layer.methods.length === 0 || ~layer.methods.indexOf(method)) {
        matched.pathAndMethod.push(layer);
        // 路徑匹配，并且有方法
        if (layer.methods.length) matched.route = true;
      }
    }
  }

  return matched;
};

給Developer一個(gè)方法

app.use(index.routes())

這里不考慮傳多個(gè)id，和多次匹配情況，拿到匹配的函數(shù)

Router.prototype.routes = function(){
  var router = this;

  const dispatch = function dispatch(ctx, next) {
    const path = ctx.path
    const method = ctx.method
    const matched = router.match(path, ctx.method);

    if (!matched.route) return next();
    const matchedLayers = matched.pathAndMethod
    // 先不考慮多matchedLayers多stack情況
    return matchedLayers[0].stack[0](ctx, next);
  }

  return dispatch
}

此時(shí)一個(gè)迷你koa-router已經(jīng)實(shí)現(xiàn)了

讀源碼 需求實(shí)現(xiàn) 實(shí)現(xiàn)匹配

方法名匹配，路徑匹配，還要滿足動(dòng)態(tài)參數(shù)的傳遞

并且還要給很懶的開(kāi)發(fā)者一個(gè)router.all()
也就是說(shuō)不用區(qū)分方法了

云服務(wù)器 GPU云服務(wù)器 koa-router 一個(gè)教你開(kāi)發(fā)小程序的小程序源碼閱讀 webrtc源碼閱讀

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102805.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yzzz

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2個(gè)在線圖片字體識(shí)別工具快速核實(shí)圖片中的字體

閱讀 2962·2021-10-18 13:33
CSS札記（一）：CSS選擇器

閱讀 846·2019-08-30 14:20
前端代碼風(fēng)格

閱讀 2633·2019-08-30 13:14
固定列和表頭的表格實(shí)現(xiàn)

閱讀 2524·2019-08-29 18:38
Slog62_項(xiàng)目上線之ArthurSlog個(gè)人網(wǎng)站上線1

閱讀 2892·2019-08-29 16:44
JS基礎(chǔ)入門篇（六）— 數(shù)據(jù)類型

閱讀 1216·2019-08-29 15:23
去除 position:fixed 抖動(dòng)的方法

閱讀 3491·2019-08-29 13:28
CSS學(xué)習(xí)筆記

閱讀 1918·2019-08-28 18:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

教你從寫(xiě)一個(gè)迷你koa-router到閱讀koa-router源碼

收集開(kāi)發(fā)者輸入的信息配置

相關(guān)文章

Koa-router 優(yōu)先級(jí)問(wèn)題

koa源碼閱讀[2]-koa-router

koa-router 源碼淺析

**玩轉(zhuǎn)Koa -- koa-router原理解析**

iKcamp團(tuán)隊(duì)制作｜基于Koa2搭建Node.js實(shí)戰(zhàn)（含視頻）? 路由koa-router

發(fā)表評(píng)論

0條評(píng)論

yzzz

男|高級(jí)講師

TA的文章

2個(gè)在線圖片字體識(shí)別工具快速核實(shí)圖片中的字體

CSS札記（一）：CSS選擇器

前端代碼風(fēng)格

固定列和表頭的表格實(shí)現(xiàn)

Slog62_項(xiàng)目上線之ArthurSlog個(gè)人網(wǎng)站上線1

JS基礎(chǔ)入門篇（六）— 數(shù)據(jù)類型

去除 position:fixed 抖動(dòng)的方法

CSS學(xué)習(xí)筆記

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

教你從寫(xiě)一個(gè)迷你koa-router到閱讀koa-router源碼

收集開(kāi)發(fā)者輸入的信息配置

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！