深刻koa源碼（二）：核心庫原理

最近讀了 koa2 的源碼，理清楚了架構設計與用到的第三方庫。本系列將分爲 3 篇，分別介紹 koa 的架構設計和 3 個核心庫，最終會手動實現一個簡易的 koa。這是系列第 2 篇，關於 3 個核心庫的原理。

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

is-generator-function：判斷 generator

koa2 種推薦使用 async 函數，koa1 推薦的是 generator。koa2 爲了兼容，在調用use添加中間件的時候，會判斷是不是 generator。若是是，則用covert庫轉化爲 async 函數。

判斷是否是 generator 的邏輯寫在了 is-generator-function 庫中，邏輯很是簡單，經過判斷Object.prototype.toString.call 的返回結果便可：

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

delegates：屬性代理

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

用法

假設準備了一個對象target，爲了方便訪問其上request屬性的內容，對request進行代理：

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方法，是經過調用對象上的 __defineSetter__ 和 __defineGetter__ 來實現的。下面是單獨拿出來的邏輯：

/**
 * @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]。但這樣作有個缺點沒法彌補，就是以後若是proto[property][name]改變，proto[name]獲取不了最新的值。

對於method方法，實現上是在對象上建立了新屬性，屬性值是一個函數。這個函數調用的就是代理目標的函數。下面是單獨拿出來的邏輯：

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

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

由於是「代理」，因此這裏不能修改上下文環境。proto[property][method]的上下文環境是 proto[property] ，須要apply從新指定。

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

koa-compose：洋蔥模型

模擬洋蔥模型

koa 最讓人驚豔的就是大名鼎鼎的「洋蔥模型」。以致於以前我在開發 koa 中間件的時候，一直有種 magic 的方法。常常疑惑，這裏await next()，執行完以後的中間件又會從新回來繼續執行未執行的邏輯。

這一段邏輯封裝在了核心庫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 裏面保存的就是開發者自定義的中間件處理邏輯。爲了方便說明，我準備了 2 箇中間件函數：

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

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

如今，模擬在 koa 中對 compose 函數的調用，咱們但願程序的輸出是：a b c（正如使用 koa 那樣）。運行如下代碼便可：

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

ok，目前已經模擬出來了一個不考慮異常狀況的洋蔥模型了。

爲何會這樣？

爲何會有洋蔥穿透的的效果呢？回到上述的compose函數，閉包寫法返回了一個新的函數，其實就是返回內部定義的dispatch函數。其中，參數的含義分別是：

• i: 當前執行到的中間件在全部中間件中的下標
• context: 上下文環境。因此咱們在每一箇中間件中均可以訪問到當前請求的信息。

在上面的測試用例中，fns 其實就是 dispatch(0)。在dispatch函數中，經過參數 i 拿到了當前要運行的中間件fn。

而後，將當前請求的上下文環境(context)和 dispatch 處理的下一個中間件(next)，都傳遞給當前中間件。對應的代碼段是：

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

那麼，在中間件中執行 await next()，其實就是執行：await dispatch.bind(null, i + 1)。所以看起來，當前中間件會中止本身的邏輯，先處理下一個中間件的邏輯。

由於每一個dispatch，都返回新的 Promsise。因此async會等到 Promise 狀態改變後再回來繼續執行本身的邏輯。

async/await 改寫

最後，在不考慮 koa 的上下文環境的狀況下，用 async/await 的提煉出了 compose 函數：

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

但願最後這段代碼能幫助理解！