本文將帶大家實(shí)現(xiàn)輕量級 web 框架 connect[1] 的主要功能，只要 82 行代碼就能搞定。vYE28資訊網(wǎng)——每日最新資訊28at.com

我并沒有標(biāo)題黨，因?yàn)?Express 在 v3 版本之前就是基于 connect 進(jìn)行封裝的，不過在 v4 版本就將 connect 依賴移除了[2]，代碼被搬到 Express 倉庫里，并做了一些細(xì)微調(diào)整。因此某種程度上，學(xué)習(xí) connect 就是在學(xué)習(xí) Express。vYE28資訊網(wǎng)——每日最新資訊28at.com

connect 的 repo 描述是：“Connect is a middleware layer for Node.js”，也就是一個(gè) Node.js 的中間件層。中間件層是一個(gè)非常有用的機(jī)制，它類似一個(gè)插件系統(tǒng)，讓我們可以通過插拔的方式組合不同功能來處理請求。vYE28資訊網(wǎng)——每日最新資訊28at.com

基本使用

先來看看 connect 的使用。vYE28資訊網(wǎng)——每日最新資訊28at.com

const connect = require('connect')const app = connect()// respond to all requestsapp.use(function(req, res){  res.end('Hello from Connect!/n')})// create node.js http server and listen on porthttp.createServer(app).listen(3000)

跟 Express 一樣。vYE28資訊網(wǎng)——每日最新資訊28at.com

另外，app 上還提供了 .listen() 方法，用于替代 http.createServer(app).listen(3000) 的冗長寫法。vYE28資訊網(wǎng)——每日最新資訊28at.com

app.listen(3000) // 等價(jià)于 http.createServer(app).listen(3000)

再看看中間件的使用。vYE28資訊網(wǎng)——每日最新資訊28at.com

app.use(function middleware1(req, res, next) {  // middleware 1  next()});app.use(function middleware2(req, res, next) {  // middleware 2  next()});

我們通過 app.use() 方法收集并使用中間件。vYE28資訊網(wǎng)——每日最新資訊28at.com

中間件就是一個(gè)函數(shù)，包含 3 個(gè)參數(shù)：req、res 還有 next()。在一個(gè)中間件內(nèi)調(diào)用 next()，就進(jìn)入到下一個(gè)中間件的執(zhí)行。vYE28資訊網(wǎng)——每日最新資訊28at.com

同時(shí)，我們還可以為中間件指定路由，這樣中間件只在特定路徑下起作用。vYE28資訊網(wǎng)——每日最新資訊28at.com

app.use('/foo', function fooMiddleware(req, res, next) {  // req.url starts with "/foo"  next()})app.use('/bar', function barMiddleware(req, res, next) {  // req.url starts with "/bar"  next()})

本質(zhì)上，純中間件的寫法就是在設(shè)置根路由（'/'），所以會對所有請求有效。vYE28資訊網(wǎng)——每日最新資訊28at.com

app.use(function middleware1(req, res, next) {  // middleware 1  next()})// 等同于app.use('/', function middleware1(req, res, next) {  // middleware 1  next()})

不過還有一類特殊中間件——異常中間件，專門用于處理前面流程里的異常錯(cuò)誤。vYE28資訊網(wǎng)——每日最新資訊28at.com

// regular middlewareapp.use(function (req, res, next) {  // i had an error  next(new Error('boom!'));});// error middleware for errors that occurred in middleware// declared before thisapp.use(function onerror(err, req, res, next) {  // an error occurred!});

異常中間件必須是 4 個(gè)參數(shù)，第一個(gè)參數(shù)就是 error，對應(yīng)前面流程中傳遞給 next() 的 Error 對象。vYE28資訊網(wǎng)——每日最新資訊28at.com

以上，我們就講完了 connect 庫的基本使用。接下來，就著手實(shí)現(xiàn)。vYE28資訊網(wǎng)——每日最新資訊28at.com

代碼實(shí)現(xiàn)

基于 connect v3.7.0 版本[3]。vYE28資訊網(wǎng)——每日最新資訊28at.com

剛學(xué) Node.js 的時(shí)候，我們學(xué)到第一個(gè)例子，可能就是啟動一個(gè)會說“Hello World”的服務(wù)器了。vYE28資訊網(wǎng)——每日最新資訊28at.com

const http = require('node:http')const hostname = '127.0.0.1'const port = 3000const server = http.createServer((req, res) => {  res.statusCode = 200  res.setHeader('Content-Type', 'text/plain')  res.end('Hello World/n')})server.listen(port, hostname, () => {  console.log(`Server running at http://${hostname}:${port}/`)})

回顧 connect 的使用。vYE28資訊網(wǎng)——每日最新資訊28at.com

const connect = require('connect')const app = connect()// respond to all requestsapp.use(function(req, res){  res.end('Hello from Connect!/n')})// create node.js http server and listen on portapp.listen(3000)

實(shí)現(xiàn) app.listen()

我們已經(jīng)知道 app.listen(3000) 內(nèi)部實(shí)現(xiàn)就是 http.createServer(app).listen(3000)。vYE28資訊網(wǎng)——每日最新資訊28at.com

因此，我們先實(shí)現(xiàn) .listen() 方法。vYE28資訊網(wǎng)——每日最新資訊28at.com

module.exports = function createApplication() {  const app = {}  app.listen = function listen(...args) {    const server = require('node:http').createServer(/* ? */)    return server.listen(...args);  }  return app}

假設(shè) app 是一個(gè)對象。不過，http.createServer(/* ? */) 中的 ? 內(nèi)容該如何實(shí)現(xiàn)呢？vYE28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn) app.use()

前一步，我們做了 app.use() 的調(diào)用。vYE28資訊網(wǎng)——每日最新資訊28at.com

// respond to all requestsapp.use(function(req, res){  res.end('Hello from Connect!/n')})

所以，當(dāng)服務(wù)啟動后，訪問 localhost:3000 時(shí)，應(yīng)該返回 "Hello from Connect!" 的文本。vYE28資訊網(wǎng)——每日最新資訊28at.com

同時(shí)，app.use() 又支持重復(fù)調(diào)用。vYE28資訊網(wǎng)——每日最新資訊28at.com

// respond to all requestsapp.use(function(req, res, next) {  console.log('log req.url', req.url)  next()})// respond to all requestsapp.use(function(req, res) {  res.end('Hello from Connect!/n')})

那我們就考慮先用個(gè)數(shù)組，把通過 app.use() 調(diào)用傳入進(jìn)來的回調(diào)函數(shù)存起來。vYE28資訊網(wǎng)——每日最新資訊28at.com

module.exports = function createApplication() {  const app = {} app.stack = []    app.use = function use(route, fn) {   let path = route   let handle = fn        // default route to '/'   if (typeof route !== 'string') {      path = '/'      handle = route    }        this.stack.push({ route: path, handle })    return this  }    app.listen = function listen(...args) {    const server = require('node:http').createServer(/* ? */)    return server.listen(...args)  }  return app}

我們把調(diào)用 app.use() 傳入的中間件都存到了 app.stack 里。vYE28資訊網(wǎng)——每日最新資訊28at.com

根據(jù)定義可知，http.createServer(/* ? */) 中的 ? 內(nèi)容應(yīng)該是一個(gè)函數(shù)。針對當(dāng)前場景，它是用來處理 stack 中的這些中間件的。vYE28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn) app.handle()

我們把這些邏輯寫在 app.handle() 內(nèi)。vYE28資訊網(wǎng)——每日最新資訊28at.com

module.exports = function createApplication() {  const app = {}  app.stack = []  // ...  app.listen = function listen(...args) {    const server = require('node:http').createServer(app.handle.bind(app))    return server.listen(...args)  }  app.handle = function handle(res, res) {    // TODO  }  return app}

每當(dāng)請求來臨，都由 app.handle 負(fù)責(zé)處理。vYE28資訊網(wǎng)——每日最新資訊28at.com

app.handle 的主要邏輯主要是處理 3 件事情。vYE28資訊網(wǎng)——每日最新資訊28at.com

1. 獲取當(dāng)前要處理的路由，沒有的話就交由最終處理函數(shù) done
2. 路由不匹配就跳過
3. 路由匹配就執(zhí)行當(dāng)前中間件

app.handle = function handle(req, res) {  let index = 0  const done = function (err) { /* ... */ }  function next(err) {    // next callback    const layer = app.stack[index++]    // 1) all done    if (!layer) {      setImmdiate(done, err)      return    }    // route data    const path = require('node:url').parse(req.url).pathname    const route = layer.route    // 2) skip this layer if the route doesn't match    if (!path.toLowerCase().startsWith(route.toLowerCase())) {      return next(err)    }    // 3) call the layer handle    const arity = handle.length    const hasError = !!err    let error = err    try {      if (hasError && arity === 4) {        // error-handling middleware        layer.handle(err, req, res, next)        return      } else if (!hasError && arity < 4) {        // request-handling middleware        layer.handle(req, res, next)        return      }    } catch (e) {      error = e    }    next(error)  }  next()}

以上的關(guān)鍵處理就封裝在 next() 函數(shù)中。而 next() 函數(shù)就是傳遞給 connect 中間件的 next 參數(shù)。vYE28資訊網(wǎng)——每日最新資訊28at.com

這樣，每次請求進(jìn)來，我們都會從 app.stack 的第一個(gè)中間件（stack[0]）開始處理，就實(shí)現(xiàn)了以 next 參數(shù)為連接橋梁的中間件機(jī)制。vYE28資訊網(wǎng)——每日最新資訊28at.com

值得注意的是調(diào)用當(dāng)前中間件的邏輯，當(dāng)我們調(diào)用 layer.handle(err, req, res, next)/layer.handle(req, res, next) 時(shí)，處理流程會流入中間件內(nèi)部，當(dāng)內(nèi)部調(diào)用 next() 函數(shù)后，控制權(quán)會重新回到 app.handle，繼續(xù)處理隊(duì)列中的下一個(gè)中間件。vYE28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)請求最終沒有任何中間件可以處理時(shí)，就會流入到 done，這是最終處理器。處理器內(nèi)部，會根據(jù)是否存在錯(cuò)誤，分別返回 404 或 5xx 響應(yīng)。vYE28資訊網(wǎng)——每日最新資訊28at.com

const done = function (err) {  if (err) {    res.statusCode = err.status ?? err.statusCode ?? 500    res.statusMessage = require('node:http').STATUS_CODES[404]  } else {    res.statusCode = 404    res.statusMessage = `Cannot ${req.method} ${require('node:url').parse(req.url).pathname}`  }  res.end(`${res.statusCode} ${res.statusMessage}`)}

至此，我們基本寫完了所有的邏輯。vYE28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然，有一個(gè)地方，可以做一個(gè)小小的優(yōu)化。將 http.createServer(app.handle.bind(app)) 簡化成 http.createServer(this)，不過此時(shí) app 就不能是對象，而是函數(shù)了。vYE28資訊網(wǎng)——每日最新資訊28at.com

module.exports = function createApplication() { function app(req, res) { app.handle(req, res) }  // ...    app.listen = function listen(...args) {    const server = require('node:http').createServer(app)    return server.listen(...args)  }  // ...   return app}

最后，我們整體來回顧一下。vYE28資訊網(wǎng)——每日最新資訊28at.com

module.exports = function createApplication() {  function app(req, res) { app.handle(req, res) }  app.stack = []  app.use = function use(route, fn) {    let path = route    let handle = fn        // default route to '/'    if (typeof route !== 'string') {      path = '/'      handle = route    }    this.stack.push({ route: path, handle })    return this  }  app.listen = function listen(...args) {    const server = require('node:http').createServer(app)    return server.listen(...args)  }  app.handle = function handle(req, res) {    let index = 0    const done = function (err) {      if (err) {        res.statusCode = err.status ?? err.statusCode ?? 500        res.statusMessage = require('node:http').STATUS_CODES[404]      } else {        res.statusCode = 404        res.statusMessage = `Cannot ${req.method} ${require('node:url').parse(req.url).pathname}`      }      res.end(`${res.statusCode} ${res.statusMessage}`)    }    function next(err) {      // next callback      const layer = app.stack[index++]      // 1) all done      if (!layer) {        setImmediate(done, err)        return      }      const path = require('node:url').parse(req.url).pathname      const route = layer.route            // 2) skip this layer if the route doesn't match      if (!path.toLowerCase().startsWith(route.toLowerCase())) {        return next(err)      }      // 3) call the layer handle      const arity = handle.length      const hasError = !!err      let error = err      try {        // error-handling middleware        if (hasError && arity === 4) {          layer.handle(err, req, res, next)          return        // request-handling middleware        } else if (!hasError && arity < 4) {           layer.handle(req, res, next)          return        }      } catch (e) {        error = e      }      next(error)    }    next()  }    return app}

連上注釋，我們只用了 82 行代碼，就實(shí)現(xiàn)了 connect 的主要功能。vYE28資訊網(wǎng)——每日最新資訊28at.com

vYE28資訊網(wǎng)——每日最新資訊28at.com

總結(jié)

本文帶大家實(shí)現(xiàn)了輕量級 Web 框架 connect 的主要功能，同樣這也是一個(gè)簡易版本  Express！vYE28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn)核心是 2 個(gè)函數(shù)。vYE28資訊網(wǎng)——每日最新資訊28at.com

• app.use(route, fn)：用于收集中間件
• app.handle(res, req)：用于消費(fèi)中間件。主要邏輯位于 next() 函數(shù)，這是傳遞給中間件的 next 參數(shù)。每一次接收請求來臨時(shí)，都由 app.handle 負(fù)責(zé)處理

而這兩個(gè)函數(shù)之間的橋梁就是 app.stack。vYE28資訊網(wǎng)——每日最新資訊28at.com

行文最后，給大家留一個(gè)思考題。vYE28資訊網(wǎng)——每日最新資訊28at.com

connect() 實(shí)例的真實(shí)實(shí)現(xiàn)，是支持作為子應(yīng)用，掛載到父應(yīng)用之上的，也就是下面的用法。vYE28資訊網(wǎng)——每日最新資訊28at.com

const connect = require('connect')const app = connect()const blogApp = connect()app.use('/blog', blogApp)app.listen(3000)

甚至 http.Server 實(shí)例也支持掛載。vYE28資訊網(wǎng)——每日最新資訊28at.com

const connect = require('connect')const app = connect()const blog = http.createServer(function(req, res){  res.end('blog')})app.use('/blog', blog)

那是如何實(shí)現(xiàn)呢？vYE28資訊網(wǎng)——每日最新資訊28at.com

大家可以參照 app.use()[4] 函數(shù)的源碼進(jìn)行學(xué)習(xí)。vYE28資訊網(wǎng)——每日最新資訊28at.com

感謝的你的閱讀，再見~vYE28資訊網(wǎng)——每日最新資訊28at.com

參考資料

[1]connect: https://github.com/senchalabs/connectvYE28資訊網(wǎng)——每日最新資訊28at.com

[2]在 v4 版本就將 connect 依賴移除了: https://github.com/expressjs/express/compare/3.21.2...4.0.0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519vYE28資訊網(wǎng)——每日最新資訊28at.com

[3]connect v3.7.0 版本: https://github.com/senchalabs/connect/blob/3.7.0/index.jsvYE28資訊網(wǎng)——每日最新資訊28at.com

[4]app.use(): https://github.com/senchalabs/connect/blob/3.7.0/index.js#L76vYE28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-74660-0.html手把手帶你用 82 行代碼實(shí)現(xiàn)一個(gè)簡易版 Express 框架

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 「鵝來運(yùn)轉(zhuǎn) 新春添囍」！小天鵝為爾濱投送龍年新囍福利！

下一篇： 從 0 開始用 PyTorch 構(gòu)建完整的 NeRF