要說起express的中間件，就先得說起app.use,app.get,app.post的用法開始。
app為express產(chǎn)生的實例。

var express = require('express');
var app = express();

主要的實現(xiàn)原理就是先生成一個實例，然后將use，get，post等方法存到一個數(shù)組當中，判斷第一個參數(shù)是不是字符串類型，是的話就是路由，不是的話就以'/'結(jié)束。然后將其歸類，全部的方法存放到get，use，post等數(shù)組里面。再根據(jù)訪問的地址逐一執(zhí)行，而最核心的點就是next()方法了。因為只有在next()之后，才會真正的執(zhí)行下一步，沒有的話就直接跳出了。

// 在任何位置都執(zhí)行
app.use(cookieParser());
// 只作用在users的路徑上
app.use('/users', usersRouter);

1.創(chuàng)建并導(dǎo)出

主體框架就是導(dǎo)出一個函數(shù)，當執(zhí)行函數(shù)的時候返回一個實例，正好和app = express()相對應(yīng)。

class LikeExpress {
}

module.exports = () => {
  return new LikeExpress()
}

2.編寫use,get,post等方法

主要都是要先處理各個參數(shù)，所以將公共的部分放入register中，主要就是檢測是否有路徑，有則直接放入info.path中作為后面的篩選使用，沒有則直接以'/'放入path.info當中。并將剩下的參數(shù)轉(zhuǎn)換成數(shù)組放入info.stack當中。其他方法類似。

// class內(nèi)部
register(path) {
    const info = {}
    const slice = Array.prototype.slice
    if (typeof path === 'string') {
      info.path = path
      // 第一個參數(shù)是路徑，就需要從第二個參數(shù)開始將方法放入數(shù)組中
      info.stack = slice.call(arguments, 1) // 數(shù)組
    } else {
      info.path = '/'
      info.stack = slice.call(arguments, 0)
    }
    return info
}

use() {
    const info = this.register.apply(this, marguments)
    this.routes.all.push(info)
  }
get() {
    const info = this.register.apply(this, marguments)
    this.routes.get.push(info)
 }

3.監(jiān)聽程序

express中能通過app.listen()就直接啟動程序，并進行監(jiān)聽。主要就是將http.createServer()放入到了程序中。

  const http = require('http')
  listen(...args) {
    const server = http.createServer(this.callback)
    server.listen(...args)
  }

而在回調(diào)函數(shù)中，主要就是篩選出哪些是該路徑下需要執(zhí)行的方法，放入一個數(shù)組中，然后再逐一執(zhí)行

callback() {
    return (req, res) => {
      res.json = data => {
        res.setHeader('Content-type', 'application/json')
        res.end(JSON.stringify(data))
      }
      const method = req.method
      const url = req.url
      const routeList = this.match(method, url)
      this.handle(req, res, routeList)
    }
  }
// 主要是為了篩選出哪些是符合該訪問路徑下的方法，然后放入一個數(shù)組中
match(method, url) {
    const stack = []
    // 瀏覽器發(fā)送的圖標請求，需要忽略
    if (url === '/favicon.ico') {
      return stack
    }
    let routes = [].concat(this.routes.all)
    routes = routes.concat(thsi.routes[method])
    routes.forEach(routeInfo => {
      if (url.indexOf(routeInfo.path) === 0) {
        stack = stack.concat(routeInfo.stack)
      }
    })
    return stack
  }

4.核心方法和next機制

在express中，next()的執(zhí)行，會直接到下一個中間件，而如果不寫，則不會執(zhí)行下一個中間件。
主要就是將篩選出來的方法，放入next函數(shù)中，每次取出一個方法來執(zhí)行，在方法內(nèi)部只有調(diào)用了next()才會再往下執(zhí)行，而如果沒有next則不會往下執(zhí)行。

 handle(req, res, stack) {
    const next = () => {
      let middleware = stack.shift()
      if (middleware) {
        middleware(req, res, stack)
      }
    }
    next()
 }

5.總結(jié)

middleware的代碼原理80行左右就寫得差不多了，說難不是很難，但不難又感覺有點繞。
主要就是收集所有的方法和路徑放在里面，然后根據(jù)路徑來判斷哪些方法是需要執(zhí)行的，最后執(zhí)行篩選出來的方法，有next的就繼續(xù)往下，沒有就返回給瀏覽器。