九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
一個(gè)學(xué)習(xí) Koa 源碼的例子

作者： MarkLin

學(xué)習(xí)目標(biāo)：

  1. 原生 node 封裝
  2. 中間件
  3. 路由

Koa 原理

一個(gè) nodejs 的入門(mén)級(jí) http 服務(wù)代碼如下，

// index.js
const http = require('http')
const server = http.createServer((req, res) => {
  res.writeHead(200)
  res.end('hello nodejs')
})

server.listen(3000, () => {
  console.log('server started at port 3000')
})

koa 的目標(biāo)是更簡(jiǎn)單化、流程化、模塊化的方式實(shí)現(xiàn)回調(diào)，我們希望可以參照 koa 用如下方式來(lái)實(shí)現(xiàn)代碼：

// index.js
const Moa = require('./moa')
const app = new Moa()

app.use((req, res) => {
  res.writeHeader(200)
  res.end('hello, Moa')
})

app.listen(3000, () => {
  console.log('server started at port 3000')
})

所以我們需要?jiǎng)?chuàng)建一個(gè) moa.js 文件，該文件主要內(nèi)容是創(chuàng)建一個(gè)類(lèi) Moa， 主要包含 use() 和 listen() 兩個(gè)方法

// 創(chuàng)建 moa.js
const http = require('http')

class Moa {

  use(callback) {
    this.callback = callback
  }

  listen(...args) {
    const server = http.createServer((req, res) => {
      this.callback(req, res)
    })

    server.listen(...args)
  }
}

module.exports = Moa

Context

koa 為了能夠簡(jiǎn)化 API，引入了上下文 context 的概念，將原始的請(qǐng)求對(duì)象 req 和響應(yīng)對(duì)象 res 封裝并掛載到了 context 上，并且設(shè)置了 getter 和 setter ，從而簡(jiǎn)化操作

// index.js
// ...

// app.use((req, res) => {
//   res.writeHeader(200)
//   res.end('hello, Moa')
// })

app.use(ctx => {
  ctx.body = 'cool moa'
})

// ...

為了達(dá)到上面代碼的效果，我們需要分裝 3 個(gè)類(lèi)，分別是 context, request, response , 同時(shí)分別創(chuàng)建上述 3 個(gè) js 文件，

// request.js
module.exports = {
  get url() {
    return this.req.url
  }
  get method() {
    return this.req.method.toLowerCase()
  }
}

// response.js
module.exports = {
  get body() {
    return this._body
  }

  set body(val) = {
    this._body = val
  }
}

// context.js
module.exports = {
  get url() {
    return this.request.url
  }
  get body() = {
    return this.response.body
  }
  set body(val) {
    this.response.body = val
  }
  get method() {
    return this.request.method
  }
}

接著我們需要給 Moa 這個(gè)類(lèi)添加一個(gè) createContext(req, res) 的方法, 并在 listen() 方法中適當(dāng)?shù)牡胤綊燧d上：

// moa.js
const http = require('http')

const context = require('./context')
const request = require('./request')
const response = require('./response')

class Moa {
  // ...
  listen(...args) {
    const server = http.createServer((req, res) => {
      // 創(chuàng)建上下文
      const ctx = this.createContext(req, res)

      this.callback(ctx)

      // 響應(yīng)
      res.end(ctx.body)
    })
    server.listen(...args)
  }

  createContext(req, res) {
    const ctx = Object.create(context)
    ctx.request = Object.create(request)
    ctx.response = Object.create(response)

    ctx.req = ctx.request.req = req
    ctx.res = ctx.response.res = res
  }
}

中間件

Koa 中間鍵機(jī)制：Koa 中間件機(jī)制就是函數(shù)組合的概念，將一組需要順序執(zhí)行的函數(shù)復(fù)合為一個(gè)函數(shù)，外層函數(shù)的參數(shù)實(shí)際是內(nèi)層函數(shù)的返回值。洋蔥圈模型可以形象表示這種機(jī)制，是 Koa 源碼中的精髓和難點(diǎn)。

同步函數(shù)組合

假設(shè)有 3 個(gè)同步函數(shù):

// compose_test.js
function fn1() {
  console.log('fn1')
  console.log('fn1 end')
}

function fn2() {
  console.log('fn2')
  console.log('fn2 end')
}

function fn3() {
  console.log('fn3')
  console.log('fn3 end')
}

我們?nèi)绻氚讶齻€(gè)函數(shù)組合成一個(gè)函數(shù)且按照順序來(lái)執(zhí)行，那通常的做法是這樣的：

// compose_test.js
// ...
fn3(fn2(fn1()))

執(zhí)行 node compose_test.js 輸出結(jié)果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

當(dāng)然這不能叫做是函數(shù)組合，我們期望的應(yīng)該是需要一個(gè) compose() 方法來(lái)幫我們進(jìn)行函數(shù)組合，按如下形式來(lái)編寫(xiě)代碼：

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

讓我們來(lái)實(shí)現(xiàn)一下 compose() 函數(shù)，

// compose_test.js
// ...
const compose = (middlewares) => () => {
  [first, ...others] = middlewares
  let ret = first()
  others.forEach(fn => {
    ret = fn(ret)
  })
  return ret
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

可以看到我們最終得到了期望的輸出結(jié)果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

異步函數(shù)組合

了解了同步的函數(shù)組合后，我們?cè)谥虚g件中的實(shí)際場(chǎng)景其實(shí)都是異步的，所以我們接著來(lái)研究下異步函數(shù)組合是如何進(jìn)行的，首先我們改造一下剛才的同步函數(shù)，使他們變成異步函數(shù),

// compose_test.js
async function fn1(next) {
  console.log('fn1')
  next && await next()
  console.log('fn1 end')
}

async function fn2(next) {
  console.log('fn2')
  next && await next()
  console.log('fn2 end')
}

async function fn3(next) {
  console.log('fn3')
  next && await next()
  console.log('fn3 end')
}
//...

現(xiàn)在我們期望的輸出結(jié)果是這樣的:

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

同時(shí)我們希望編寫(xiě)代碼的方式也不要改變,

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

所以我們只需要改造一下 compose() 函數(shù)，使他支持異步函數(shù)就即可:

// compose_test.js
// ...

function compose(middlewares) {
  return function () {
    return dispatch(0)
    function dispatch(i) {
      let fn = middlewares[i]
      if (!fn) {
        return Promise.resolve()
      }
      return Promise.resolve(
        fn(function next() {
          return dispatch(i + 1)
        })
      )
    }
  }
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

運(yùn)行結(jié)果：

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

完美！?。?/p>

完善 Moa

我們直接把剛才的異步合成代碼移植到 moa.js 中, 由于 koa 中還需要用到 ctx 字段，所以我們還要對(duì) compose() 方法進(jìn)行一些改造才能使用：

// moa.js
// ...
class Moa {
  // ...
  compose(middlewares) {
    return function (ctx) {
      return dispatch(0)
      function dispatch(i) {
        let fn = middlewares[i]
        if (!fn) {
          return Promise.resolve()
        }
        return Promise.resolve(
          fn(ctx, function () {
            return dispatch(i + 1)
          })
        )
      }
    }
  }
}

實(shí)現(xiàn)完 compose() 方法之后我們繼續(xù)完善我們的代碼，首先我們需要給類(lèi)在構(gòu)造的時(shí)候，添加一個(gè) middlewares，用來(lái)記錄所有需要進(jìn)行組合的函數(shù)，接著在use() 方法中把我們每一次調(diào)用的回調(diào)都記錄一下，保存到middlewares 中，最后再在合適的地方調(diào)用即可：

// moa.js
// ...
class Moa {
  constructor() {
    this.middlewares = []
  }

  use(middleware) {
    this.middlewares.push(middleware)
  }

  listen(...args) {
    const server = http.createServer(async (req, res) => {
      // 創(chuàng)建上下文
      const ctx = this.createContext(req, res)
      const fn = this.compose(this.middlewares)
      await fn(ctx)
      // 響應(yīng)
      res.end(ctx.body)
    })

    server.listen(...args)
  }
  // ...
}

我們加一小段代碼測(cè)試一下:

// index.js
//...
const delay = () => new Promise(resolve => setTimeout(() => resolve()
  , 2000))
app.use(async (ctx, next) => {
  ctx.body = "1"
  await next()
  ctx.body += "5"
})
app.use(async (ctx, next) => {
  ctx.body += "2"
  await delay()
  await next()
  ctx.body += "4"
})
app.use(async (ctx, next) => {
  ctx.body += "3"
})

運(yùn)行命令 node index.js 啟動(dòng)服務(wù)器后，我們?cè)L問(wèn)頁(yè)面 localhost:3000 查看一下，發(fā)現(xiàn)頁(yè)面顯示 12345 ！

到此，我們簡(jiǎn)版的 Koa 就已經(jīng)完成實(shí)現(xiàn)了。讓我們慶祝一下先?。?！

Router

Koa 還有一個(gè)很重要的路由功能，感覺(jué)缺少路由就缺少了他的完整性，所以我們簡(jiǎn)單介紹下如何實(shí)現(xiàn)路由功能。

其實(shí)，路由的原理就是根據(jù)地址和方法，調(diào)用相對(duì)應(yīng)的函數(shù)即可，其核心就是要利用一張表，記錄下注冊(cè)的路由和方法，原理圖如下所示：

使用方式如下：

// index.js
// ...
const Router = require('./router')
const router = new Router()

router.get('/', async ctx => { ctx.body = 'index page' })
router.get('/home', async ctx => { ctx.body = 'home page' })
router.post('/', async ctx => { ctx.body = 'post index' })
app.use(router.routes())

// ...

我們來(lái)實(shí)現(xiàn)下 router 這個(gè)類(lèi)，先在根目錄創(chuàng)建一個(gè) router.js 文件，然后根據(jù)路由的原理，我們實(shí)現(xiàn)下代碼:

// router.js
class Router {
  constructor() {
    this.stacks = []
  }

  register(path, method, middleware) {
    this.stacks.push({
      path, method, middleware
    })
  }

  get(path, middleware) {
    this.register(path, 'get', middleware)
  }

  post(path, middleware) {
    this.register(path, 'post', middleware)
  }

  routes() {
    return async (ctx, next) => {
      let url = ctx.url === '/index' ? '/' : ctx.url
      let method = ctx.method
      let route
      for (let i = 0; i < this.stacks.length; i++) {
        let item = this.stacks[i]
        if (item.path === url && item.method === method) {
          route = item.middleware
          break
        }
      }

      if (typeof route === 'function') {
        await route(ctx, next)
        return
      }

      await next()
    }
  }
}

module.exports = Router

啟動(dòng)服務(wù)器后，測(cè)試下 loacalhost:3000, 返回頁(yè)面上 index page 表示路由實(shí)現(xiàn)成功！

本文源碼地址： https://github.com/marklin2012/moa/

歡迎關(guān)注凹凸實(shí)驗(yàn)室博客：aotu.io

或者關(guān)注凹凸實(shí)驗(yàn)室公眾號(hào)（AOTULabs），不定時(shí)推送文章：

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP，閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
七天學(xué)會(huì)NodeJS（六）
告訴你什么是javascript的回調(diào)函數(shù)
JavaScript：同步、異步和事件循環(huán)
js之中的異步
解決同一頁(yè)面jQuery多個(gè)版本或和其他js庫(kù)沖突方法
深入理解JavaScript函數(shù)及其模式(一)
更多類(lèi)似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服