摘要：如果驗(yàn)證沒出現(xiàn)問題，就注冊這個(gè)中間件并放到中間件數(shù)組中。但如果不執(zhí)行，中間件的處理也會(huì)終止。整理下流程默認(rèn)會(huì)執(zhí)行中間件數(shù)組中的第一個(gè)，也就是代碼中的，第一個(gè)中間件通過返回的是第二個(gè)中間件的執(zhí)行。

如果你使用過redux或者nodejs，那么你對“中間件”這個(gè)詞一定不會(huì)感到陌生，如果沒用過這些也沒關(guān)系，也可以通過這個(gè)來了解javascript中的事件流程。

有一類人，非常的懶（比如說我），只有三種行為動(dòng)作，sleep,eat,sleepFirst，偽代碼就是：

var wang = new LazyMan("王大錘");
wang.eat("蘋果").eat("香蕉").sleep(5).eat("葡糖").eat("橘子").sleepFirst(2);
//等同于以下的代碼
const wang = new LazyMan("王大錘");
wang.eat("蘋果");
wang.eat("香蕉");
wang.sleep(5);
wang.eat("葡糖");
wang.eat("橘子");
wang.sleepFirst(2);

執(zhí)行結(jié)果如下圖：

不管什么，先睡2S

然后做個(gè)介紹，吃東西，睡5S

醒來，吃

但是javascript只有一個(gè)線程，也并沒有像php的sleep的那種方法。實(shí)現(xiàn)的思路就是eat、sleep、sleepFirst這些事件放在任務(wù)列中，通過next去依次執(zhí)行方法。我還是希望在看源碼前先手動(dòng)實(shí)現(xiàn)一下試試看，其實(shí)這就是個(gè)lazyMan的實(shí)現(xiàn)。

下面是我的實(shí)現(xiàn)方式：

class lazyMan{
    constructor(name) {
        this.tasks = [];
        const first = () => {
            console.log(`my name is ${name}`);
            this.next();
        }
        this.tasks.push(first);
        setTimeout(()=>this.next(), 0);
    }
    next() {
        const task = this.tasks.shift();
        task && task();
    }
    eat(food) {
        const eat = () => {
            console.log(`eat ${food}`);
            this.next();
        };
        this.tasks.push(eat);
        return this;
    }
    sleep(time) {
        const newTime = time * 1000;
        const sleep = () => {
            console.log(`sleep ${time}s!`);
            setTimeout(() => {
                this.next();
            }, newTime);
        };
        this.tasks.push(sleep);
        return this;
    }
    sleepFirst(time) {
        const newTime = time * 1000;
        const sleepzFirst = () => {
            console.log(`sleep ${time}s first!`);
            setTimeout(() => {
                this.next();
            }, newTime);
        };
        this.tasks.unshift(sleepzFirst);
        return this;
    }
}
const aLazy = new lazyMan("王大錘");
aLazy.eat("蘋果").eat("香蕉").sleep(5).eat("葡萄").eat("橘子").sleepFirst(2)

我們上面說過

wang.eat("蘋果").eat("香蕉").sleep(5).eat("葡糖").eat("橘子").sleepFirst(2);
//等同于以下的代碼
wang.eat("蘋果");
wang.eat("香蕉");
wang.sleep(5);
wang.eat("葡糖");
wang.eat("橘子");
wang.sleepFirst(2);

如果你使用過過node，你會(huì)發(fā)現(xiàn)，這種寫法似乎有點(diǎn)熟悉的感覺，我們來看一下一個(gè)koa2（一個(gè)node的框架）項(xiàng)目的主文件：

const Koa = require("koa");
const bodyParser = require("koa-bodyparser");
const cors = require("koa-cors2");

const routers = require("./src/routers/index")

const app = new Koa();

app.use(cors());
app.use(bodyParser());
app.use(routers.routes()).use(routers.allowedMethods())

app.listen(3000);

有沒有發(fā)現(xiàn)結(jié)構(gòu)有一點(diǎn)像？

廢話不多說，直接看源碼...
app.use就是用來注冊中間件的，我們先看use的實(shí)現(xiàn)：

 use(fn) {
    if (typeof fn !== "function") throw new TypeError("middleware must be a function!");
    if (isGeneratorFunction(fn)) {
      deprecate("Support for generators will be removed in v3. " +
                "See the documentation for examples of how to convert old middleware " +
                "https://github.com/koajs/koa/blob/master/docs/migration.md");
      fn = convert(fn);
    }
    debug("use %s", fn._name || fn.name || "-");
    this.middleware.push(fn);
    return this;
  }

先解釋一下里面做了什么處理，fn就是傳入的函數(shù),首先肯定要判斷是否是個(gè)函數(shù)，如果不是，拋出錯(cuò)誤，其次是判斷fn是否是一個(gè)GeneratorFunction，我用的是koa2，koa2中用async、await來替代koa1中的generator，如果判斷是生成器函數(shù)，證明使用或者書寫的中間件為koa1的，koa2中提供了庫koa-convert來幫你把koa1中的中間件轉(zhuǎn)換為koa2中的中間件，這里如果判斷出是koa1的中間件會(huì)給你提醒，這里會(huì)主動(dòng)幫你轉(zhuǎn)換，就是代碼中的convert方法。如果驗(yàn)證沒出現(xiàn)問題，就注冊這個(gè)中間件并放到中間件數(shù)組中。
這里我們只看到了把中間件加到數(shù)組中，然后就沒有做其他處理了。
我們再看koa2中listen

  listen(...args) {
    debug("listen");
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }

這里只是啟動(dòng)了個(gè)server，然后傳進(jìn)了一個(gè)回調(diào)函數(shù)的結(jié)果，我們看原生啟動(dòng)一個(gè)server大概是什么樣的：

https.createServer(options, function (req, res) {
  res.writeHead(200);
  res.end("hello world
");
}).listen(3000);

原生的回調(diào)函數(shù)接受兩個(gè)參數(shù)，一個(gè)是request一個(gè)是response，我們再去看koa2中這個(gè)回調(diào)函數(shù)的代碼：

callback() {
    const fn = compose(this.middleware);

    if (!this.listeners("error").length) this.on("error", this.onerror);

    const handleRequest = (req, res) => {
      res.statusCode = 404;
      const ctx = this.createContext(req, res);
      const onerror = err => ctx.onerror(err);
      const handleResponse = () => respond(ctx);
      onFinished(res, onerror);
      return fn(ctx).then(handleResponse).catch(onerror);
    };

    return handleRequest;
  }

這里有一個(gè)const fn = compose(this.middleware);，compose這種不知道大家用的多不多，compose是函數(shù)式編程中使用比較多的東西，這里將多個(gè)中間件組合起來。
我們?nèi)タ碿ompose的實(shí)現(xiàn)：

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError("Middleware stack must be an array!")
  for (const fn of middleware) {
    if (typeof fn !== "function") throw new TypeError("Middleware must be composed of functions!")
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error("next() called multiple times"))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, function next () {
          return dispatch(i + 1)
        }))
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

首先判斷是否是中間件數(shù)組，這個(gè)不用多說，for...of是ES6中的新特性，這里不做說明,需要注意的是，數(shù)組和Set集合默認(rèn)的迭代器是values()方法，Map默認(rèn)的是entries()方法。

這里的dispatch和next一樣是所有的中間件的核心，dispatch的參數(shù)i其實(shí)也就是對應(yīng)中間件的下標(biāo)，，在第一次調(diào)用的時(shí)候傳入了參數(shù)0，如果中間件存在返回Promise：

return Promise.resolve(fn(context, function next () {
  return dispatch(i + 1)
}))

我們lazyMan鏈?zhǔn)秸{(diào)用時(shí)不斷的shift()取出下一個(gè)要執(zhí)行的事件函數(shù)，koa2里采用的是通過數(shù)組下標(biāo)的方式找到下一個(gè)中間件，這里是用Promise.resolve包起來就達(dá)到了每一個(gè)中間件await next()返回的結(jié)果都剛好是下一個(gè)中間件的執(zhí)行。不難看出此處dispatch是個(gè)遞歸調(diào)用，多個(gè)中間件會(huì)形成一個(gè)棧結(jié)構(gòu)。其中i的值總是比上一次傳進(jìn)來的大，正常執(zhí)行index的值永遠(yuǎn)小于i，但只要在同一個(gè)中間件中next執(zhí)行兩次以上，index的值就會(huì)等于i，同時(shí)會(huì)拋出錯(cuò)誤。但如果不執(zhí)行next，中間件的處理也會(huì)終止。

整理下流程：

compose(this.middleware)(ctx)默認(rèn)會(huì)執(zhí)行中間件數(shù)組中的第一個(gè)，也就是代碼中的dispatch(0)，第一個(gè)中間件通過await next()返回的是第二個(gè)中間件的執(zhí)行。

然后第二個(gè)中間件中執(zhí)行await next(),然后返回第三個(gè)...以此類推

中間件全部處理結(jié)束以后,剩下的就是通過中間件中不斷傳遞的context來對請求作處理了。