摘要：最近讀了的源碼，理清楚了架構(gòu)設(shè)計與用到的第三方庫。本系列將分為篇，分別介紹的架構(gòu)設(shè)計和個核心庫，最終會手動實(shí)現(xiàn)一個簡易的。本文來自心譚博客深入源碼核心庫原理所有系列文章都放在了。這一段邏輯封裝在了核心庫里面。

最近讀了 koa2 的源碼，理清楚了架構(gòu)設(shè)計與用到的第三方庫。本系列將分為 3 篇，分別介紹 koa 的架構(gòu)設(shè)計和 3 個核心庫，最終會手動實(shí)現(xiàn)一個簡易的 koa。這是系列第 2 篇，關(guān)于 3 個核心庫的原理。

本文來自《心譚博客·深入koa源碼：核心庫原理》
所有系列文章都放在了Github。歡迎交流和Star ?? ヽ(°▽°)ノ ?

koa2 種推薦使用 async 函數(shù)，koa1 推薦的是 generator。koa2 為了兼容，在調(diào)用use添加中間件的時候，會判斷是否是 generator。如果是，則用covert庫轉(zhuǎn)化為 async 函數(shù)。

判斷是不是 generator 的邏輯寫在了 is-generator-function 庫中，邏輯非常簡單，通過判斷Object.prototype.toString.call 的返回結(jié)果即可：

function* say() {}
Object.prototype.toString.call(say); // 輸出: [object GeneratorFunction]

delegates和 koa 一樣，這個庫都是出自大佬 TJ 之手。它的作用就是屬性代理。這個代理庫常用的方法有getter，setter，method 和 access。

假設(shè)準(zhǔn)備了一個對象target，為了方便訪問其上request屬性的內(nèi)容，對request進(jìn)行代理：

const delegates = require("delegates");
const target = {
  request: {
    name: "xintan",
    say: function() {
      console.log("Hello");
    }
  }
};

delegates(target, "request")
  .getter("name")
  .setter("name")
  .method("say");

代理后，訪問request將會更加方便：

console.log(target.name); // xintan
target.name = "xintan!!!";
console.log(target.name); // xintan!!!
target.say(); // Hello

對于 setter 和 getter方法，是通過調(diào)用對象上的 __defineSetter__ 和 __defineGetter__ 來實(shí)現(xiàn)的。下面是多帶帶拿出來的邏輯：

/**
 * @param {Object} proto 被代理對象
 * @param {String} property 被代理對象上的被代理屬性
 * @param {String} name
 */
function myDelegates(proto, property, name) {
  proto.__defineGetter__(name, function() {
    return proto[property][name];
  });
  proto.__defineSetter__(name, function(val) {
    return (proto[property][name] = val);
  });
}

myDelegates(target, "request", "name");
console.log(target.name); // xintan
target.name = "xintan!!!";
console.log(target.name); // xintan!!!

剛開始我的想法是更簡單一些，就是直接讓 proto[name] = proto[property][name]。但這樣做有個缺點(diǎn)無法彌補(bǔ)，就是之后如果proto[property][name]改變，proto[name]獲取不了最新的值。

對于method方法，實(shí)現(xiàn)上是在對象上創(chuàng)建了新屬性，屬性值是一個函數(shù)。這個函數(shù)調(diào)用的就是代理目標(biāo)的函數(shù)。下面是多帶帶拿出來的邏輯：

/**
 *
 * @param {Object} proto 被代理對象
 * @param {String} property 被代理對象上的被代理屬性
 * @param {String} method 函數(shù)名
 */
function myDelegates(proto, property, method) {
  proto[method] = function() {
    return proto[property][method].apply(proto[property], arguments);
  };
}

myDelegates(target, "request", "say");
target.say(); // Hello

因?yàn)槭恰按怼保赃@里不能修改上下文環(huán)境。proto[property][method]的上下文環(huán)境是 proto[property] ，需要apply重新指定。

koa 中也有對屬性的access方法代理，這個方法就是getter和setter寫在一起的語法糖。

koa 最讓人驚艷的就是大名鼎鼎的“洋蔥模型”。以至于之前我在開發(fā) koa 中間件的時候，一直有種 magic 的方法。經(jīng)常疑惑，這里await next()，執(zhí)行完之后的中間件又會重新回來繼續(xù)執(zhí)行未執(zhí)行的邏輯。

這一段邏輯封裝在了核心庫koa-compose 里面。源碼也很簡單，算上各種注釋只有不到 50 行。為了方便說明和理解，我把其中一些意外情況檢查的代碼去掉：

function compose(middleware) {
  return function(context) {
    return dispatch(0);

    function dispatch(i) {
      let fn = middleware[i];
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err);
      }
    }
  };
}

middleware 里面保存的就是開發(fā)者自定義的中間件處理邏輯。為了方便說明，我準(zhǔn)備了 2 個中間件函數(shù)：

const middleware = [
  async (ctx, next) => {
    console.log("a");
    await next();
    console.log("c");
  },

  async (ctx, next) => {
    console.log("b");
  }
];

現(xiàn)在，模擬在 koa 中對 compose 函數(shù)的調(diào)用，我們希望程序的輸出是：a b c（正如使用 koa 那樣）。運(yùn)行以下代碼即可：

const fns = compose(middleware);
fns();

ok，目前已經(jīng)模擬出來了一個不考慮異常情況的洋蔥模型了。

為什么會有洋蔥穿透的的效果呢？回到上述的compose函數(shù)，閉包寫法返回了一個新的函數(shù)，其實(shí)就是返回內(nèi)部定義的dispatch函數(shù)。其中，參數(shù)的含義分別是：

i: 當(dāng)前執(zhí)行到的中間件在所有中間件中的下標(biāo)

context: 上下文環(huán)境。所以我們在每個中間件中都可以訪問到當(dāng)前請求的信息。

在上面的測試用例中，fns 其實(shí)就是 dispatch(0)。在dispatch函數(shù)中，通過參數(shù) i 拿到了當(dāng)前要運(yùn)行的中間件fn。

然后，將當(dāng)前請求的上下文環(huán)境(context)和 dispatch 處理的下一個中間件(next)，都傳遞給當(dāng)前中間件。對應(yīng)的代碼段是：

return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));

那么，在中間件中執(zhí)行 await next()，其實(shí)就是執(zhí)行：await dispatch.bind(null, i + 1)。因此看起來，當(dāng)前中間件會停止自己的邏輯，先處理下一個中間件的邏輯。

因?yàn)槊總€dispatch，都返回新的 Promsise。所以async會等到 Promise 狀態(tài)改變后再回來繼續(xù)執(zhí)行自己的邏輯。

最后，在不考慮 koa 的上下文環(huán)境的情況下，用 async/await 的提煉出了 compose 函數(shù)：

function compose(middleware) {
  return dispatch(0);

  async function dispatch(i) {
    let fn = middleware[i];
    try {
      await fn(dispatch.bind(null, i + 1));
    } catch (err) {
      return err;
    }
  }
}

下面是它的使用方法：

const middleware = [
  async next => {
    console.log("a");
    await next();
    console.log("c");
  },

  async next => {
    console.log("b");
  }
];

compose(middleware); // 輸出a b c

希望最后這段代碼能幫助理解！