摘要：詳細(xì)代碼如下追蹤賦值里面的是子路由設(shè)計子路由設(shè)計這個比較簡單，每個子路由維護(hù)一個路由監(jiān)聽列表，然后通過調(diào)用的函數(shù)添加到主路由列表上。

鑒于之前使用express和koa的經(jīng)驗(yàn)，這兩天想嘗試構(gòu)建出一個koa精簡版，利用最少的代碼實(shí)現(xiàn)koa和koa-router，同時也梳理一下Node.js網(wǎng)絡(luò)框架開發(fā)的核心內(nèi)容。

實(shí)現(xiàn)后的核心代碼不超過300行，源代碼配有詳細(xì)的注釋。

在mini-koa的API設(shè)計中，參考koa和koa-router的API調(diào)用方式。

Node.js的網(wǎng)絡(luò)框架封裝其實(shí)并不復(fù)雜，其核心點(diǎn)在于http/https的createServer方法上，這個方法是http請求的入口。

首先，我們先回顧一下用Node.js來啟動一個簡單服務(wù)。

// https://github.com/qzcmask/mini-koa/blob/master/examples/simple.js
const http = require("http")
const app = http.createServer((request, response) => {
  response.end("hello Node.js")
})
app.listen(3333, () => {
  console.log("App is listening at port 3333...")
})

既然我們知道Node.js的請求入口在createServer方法上，那么我們可以在這個方法中找出請求的地址，然后根據(jù)地址映射出監(jiān)聽函數(shù)(通過get/post等方法添加的路由函數(shù))即可。

其中，路由列表的格式設(shè)計如下：

// binding的格式
{
"/": [fn1, fn2, ...],
"/user": [fn, ...],
...
}
// fn/fn1/fn2的格式
{
  method: "get/post/use/all",
  fn: "路由處理函數(shù)"
}

我們知道在koa中是可以添加多個url監(jiān)聽函數(shù)的，其中決定是否傳遞到下一個監(jiān)聽函數(shù)的關(guān)鍵在于是否調(diào)用了next()函數(shù)。如果調(diào)用了next()函數(shù)則先把路由權(quán)轉(zhuǎn)移到下一個監(jiān)聽函數(shù)中，處理完畢再返回當(dāng)前路由函數(shù)。

在mini-koa中，我把next()方法設(shè)計成了一個返回Promise fullfilled的函數(shù)(這里簡單設(shè)計，不考慮next()傳參的情況)，用戶如果調(diào)用了該函數(shù)，那么就可以根據(jù)它的值來決定是否轉(zhuǎn)移路由函數(shù)處理權(quán)。

判斷是否轉(zhuǎn)移路由函數(shù)處理權(quán)的代碼如下：

let isNext = false
const next = () => {
  isNext = true
  return Promise.resolve()
}
await router.fn(ctx, next)
if (isNext) {
  continue
} else {
  // 沒有調(diào)用next，直接中止請求處理函數(shù)
  return
}

mini-koa提供use方法，可供擴(kuò)展日志記錄/session/cookie處理等功能。

use方法執(zhí)行的原理是根據(jù)請求地址在執(zhí)行特定路由函數(shù)之前先執(zhí)行mini-koa調(diào)用use監(jiān)聽的函數(shù)。

所以這里的關(guān)鍵點(diǎn)在于怎么找出use監(jiān)聽的函數(shù)列表，假設(shè)現(xiàn)有監(jiān)聽情況如下：

app.use("/", fn1)
app.use("/user", fn2)

如果訪問的url是/user/add，那么fn1和fn2都必須要依次執(zhí)行。

我采取的做法是先根據(jù)/字符來分割請求url，然后循環(huán)拼接，查看路由綁定列表(binding)中有沒有要use的函數(shù)，如果發(fā)現(xiàn)有，添加進(jìn)要use的函數(shù)列表中，沒有則繼續(xù)下一次循環(huán)。

詳細(xì)代碼如下：

// 默認(rèn)use函數(shù)前綴
let prefix = "/"
// 要預(yù)先調(diào)用的use函數(shù)列表
let useFnList = []

// 分割url，使用use函數(shù)
// 比如item為/user/a/b映射成[("user", "a", "b")]
const filterUrl = url.split("/").filter(item => item !== "")
// 該reduce的作用是找出本請求要use的函數(shù)列表
filterUrl.reduce((cal, item) => {
  prefix = cal
  if (this.binding[prefix] && this.binding[prefix].length) {
    const filters = this.binding[prefix].filter(router => {
      return router.method === "use"
    })
    useFnList.push(...filters)
  }
  return (
    "/" +
    [cal, item]
      .join("/")
      .split("/")
      .filter(item => item !== "")
      .join("/")
  )
}, prefix)

通過ctx.body = "響應(yīng)內(nèi)容"的方式可以響應(yīng)http請求。它的實(shí)現(xiàn)原理是利用了ES6的Object.defineProperty函數(shù)，通過設(shè)置它的setter/getter函數(shù)來達(dá)到數(shù)據(jù)追蹤的目的。

詳細(xì)代碼如下：

// 追蹤ctx.body賦值
Object.defineProperty(ctx, "body", {
  set(val) {
    // set()里面的this是ctx
    response.end(val)
  },
  get() {
    throw new Error(`ctx.body can"t read, only support assign value.`)
  }
})

子路由mini-koa-router設(shè)計這個比較簡單，每個子路由維護(hù)一個路由監(jiān)聽列表，然后通過調(diào)用mini-koa的addRoutes函數(shù)添加到主路由列表上。

mini-koa的addRoutes實(shí)現(xiàn)如下：

addRoutes(router) {
  if (!this.binding[router.prefix]) {
    this.binding[router.prefix] = []
  }
  // 路由拷貝
  Object.keys(router.binding).forEach(url => {
    if (!this.binding[url]) {
      this.binding[url] = []
    }
    this.binding[url].push(...router.binding[url])
  })
}

使用示例如下，源代碼可以在github上找到：

// examples/server.js
// const { Koa, KoaRouter } = require("mini-koa")
const { Koa, KoaRouter } = require("../index")
const app = new Koa()
// 路由用法
const userRouter = new KoaRouter({
  prefix: "/user"
})

// 中間件函數(shù)
app.use(async (ctx, next) => {
  console.log(`請求url, 請求method: `, ctx.req.url, ctx.req.method)
  await next()
})

// 方法示例
app.get("/get", async ctx => {
  ctx.body = "hello ,app get"
})

app.post("/post", async ctx => {
  ctx.body = "hello ,app post"
})

app.all("/all", async ctx => {
  ctx.body = "hello ,/all 支持所有方法"
})

// 子路由使用示例
userRouter.post("/login", async ctx => {
  ctx.body = "user login success"
})

userRouter.get("/logout", async ctx => {
  ctx.body = "user logout success"
})

userRouter.get("/:id", async ctx => {
  ctx.body = "用戶id： " + ctx.params.id
})

// 添加路由
app.addRoutes(userRouter)

// 監(jiān)聽端口
app.listen(3000, () => {
  console.log("> App is listening at port 3000...")
})

挺久沒有造輪子了，這次突發(fā)奇想造了個精簡版的koa，雖然跟常用的koa框架有很大差別，但是也實(shí)現(xiàn)了最基本的API調(diào)用和原理。

造輪子是一件難能可貴的事，程序員在學(xué)習(xí)過程中不應(yīng)該崇尚拿來主義，學(xué)習(xí)到一定程度后，要秉持能造就造的態(tài)度，去嘗試?yán)斫夂屯诰蜉喿颖澈蟮脑砗退枷搿?/p>

當(dāng)然，通常來說，自己造的輪子本身不具備多大的實(shí)用性，沒有經(jīng)歷過社區(qū)大量的測試和實(shí)際應(yīng)用場景的打磨，但是能加深自己的理解和提高自己的能力也是一件值得堅(jiān)持的事。

人生是一段不斷攀登的高峰，只有堅(jiān)持向前，才能看到新奇的東西。

最后附上項(xiàng)目的Github地址，歡迎Star或Fork支持，謝謝。