摘要：閱讀好的框架的源碼有很多好處，從大神的視角去理解整個框架的設(shè)計思想。使用其實某個框架閱讀源碼的時候，首先我們要會去用這個框架，因為用了我們才知道，某個是怎么用，哪里有坑，哪里設(shè)計的精妙。

閱讀好的框架的源碼有很多好處，從大神的視角去理解整個框架的設(shè)計思想。大到架構(gòu)設(shè)計，小到可取的命名風(fēng)格，還有設(shè)計模式、實現(xiàn)某類功能使用到的數(shù)據(jù)結(jié)構(gòu)和算法等等。

其實某個框架閱讀源碼的時候，首先我們要會去用這個框架，因為用了我們才知道，某個API是怎么用，哪里有坑，哪里設(shè)計的精妙。

下面我們就簡單用一下koa這個框架，如下代碼

const Koa = require("koa")
const app = new Koa()
app.use(async (ctx, next) => {
  ctx.body = "Hello World"
})
app.listen(4002)

運行結(jié)果

瓦特？？這個服務(wù)會涉及到從請求到響應(yīng)返回數(shù)據(jù)，就這幾行代碼？？ 是的，你沒有看錯，就是單單這幾行代碼就可以搭建了一個服務(wù)器。

下面我們看看一探究竟。

去到node_modules文件夾下找到koa模塊，先喵幾眼README.md文件，里面介紹了koa的一些安裝、用法、插件等等，這里我們跳過，然后轉(zhuǎn)到package.json如下圖

看到package.json里面的"main": "lib/application.js"沒錯，這就是我們的入口，在lib文件夾下面，我們看到里面有application.js、context.js、requrest.js和response.js。下面經(jīng)過我修改簡化去掉注釋application.js就只有68行代碼。閱讀起來可以說是非常簡單了。如下圖：

第一步是我們引入各種主要依賴

// 引入有很多 我只挑我閱讀主要框架的代碼模塊

const response = require("./response"); // 處理response對象
const compose = require("koa-compose"); // 合并處理中間件函數(shù)
const context = require("./context"); // 整合處理context對象
const request = require("./request"); // 整合處理request對象
const http = require("http"); // node的 http原生模塊

以上就是我們的主要依賴

在Application的對象中，有constructor函數(shù)，這個主要是初始化Application對象，生成context對象、request對象、response對象，

module.exports = class Application extends Emitter {
  // 初始化 Application
  constructor() {
    super(); // 繼承Emitter
    this.middleware = []; // 初始化middleware為空數(shù)組
    this.context = Object.create(context); // 生成context對象
    this.request = Object.create(request); // 生成request對象
    this.response = Object.create(response); // 生成response對象
  }
}

閱讀源碼，我們先不要去扣細節(jié)，比如說Object.create(context)生產(chǎn)的對象是什么？this.request對象下面又有什么東西？？？，我們現(xiàn)在主要知道的是、this.context是能獲取或者設(shè)置請求和響應(yīng)的信息的一個對象，。this.request是請求的對象、里面可以設(shè)置或者獲取請求信息的一個對象、this.response是響應(yīng)請求對象、里面可以設(shè)置或者獲取響應(yīng)參數(shù)和值的一個對象。大概先了解就可以了。繼續(xù)往下看。

在上面運用的時候，用到了app.use(fn)和app.listen(4002) 我們看看，源碼里面試這樣子的

module.exports = class Application extends Emitter {
  // 初始化 Application
  constructor() {
    ...
  }
  listen(...args) {
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }
  use(fn) {
    this.middleware.push(fn);
    return this;
  }

上面的代碼很簡單 use函數(shù)就是把傳入的fn 推入到this.middleware的數(shù)組中，然后返回this，方便鏈式調(diào)用。

然后在listen里面用node原生的http模塊創(chuàng)建一個server，在這里順便說一下，原生 http創(chuàng)建一個服務(wù)是這樣子滴

const http = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("okay");
});
http.listen(8000)

繼續(xù)看代碼 ，在創(chuàng)建服務(wù)的時候，參數(shù)里面調(diào)用了一個this.callback()函數(shù)，下面我們看看這個函數(shù)究竟是怎么樣子的。

module.exports = class Application extends Emitter {
  // 初始化 Application
  constructor() {
    ...
  }
  listen(...args) {
    ...
  }
  use(fn) {
    ...
  }

  callback() {
    const fn = compose(this.middleware); // 集中處理中間件數(shù)組
    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res); // 整合req、res、context、request、response
      return this.handleRequest(ctx, fn); // 返回handleRequest
    };
    return handleRequest;
  }
    
  handleRequest(ctx, fnMiddleware) {
    const handleResponse = () => respond(ctx); // 最終響應(yīng)函數(shù)
    return fnMiddleware(ctx).then(handleResponse) // 處理完中間件，然后傳到下一響應(yīng)函數(shù)
  }
  // 創(chuàng)建整合新的 context.
  createContext(req, res) {
    const context = Object.create(this.context);
    const request = context.request = Object.create(this.request);
    const response = context.response = Object.create(this.response);
    context.app = request.app = response.app = this;
    context.req = request.req = response.req = req;
    context.res = request.res = response.res = res;
    request.ctx = response.ctx = context;
    request.response = response;
    response.request = request;
    context.originalUrl = request.originalUrl = req.url;
    context.cookies = new Cookies(req, res, {
      keys: this.keys,
      secure: request.secure
    });
    request.ip = request.ips[0] || req.socket.remoteAddress || "";
    context.accept = request.accept = accepts(req);
    context.state = {};
    return context;
  }
};

上面我們可以看出在callback函數(shù)里面有一個const fn = compose(this.middleware); 這個函數(shù)就是把this.middleware數(shù)組傳進去，然后集中處理中間件，然后會返回處理完中間件的fn。

繼續(xù)下一行

const handleRequest = (req, res) => {
  const ctx = this.createContext(req, res);
  return this.handleRequest(ctx, fn);
};

繼續(xù)進入到handleRequest函數(shù)里面的const ctx = this.createContext(req, res);這個把原生的http的請求對象req和響應(yīng)對象res作為參數(shù)傳進去，然后在createContext函數(shù)（看上面最大那坨代碼）在里面，把this.request、this.response、this.context、請求對象req、響應(yīng)對象res都整，做各種整合、處理得到新的context對象返回出去。

也就是強大的ctx，得到ctx之后，下一行返回return this.handleRequest(ctx, fn);

this.handleRequest(ctx, fn)代碼如下

handleRequest(ctx, fnMiddleware) {
    const handleResponse = () => respond(ctx);
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

這個函數(shù) 就是處理完中間件處理之后的返回的函數(shù)把ctx傳下去，最后流通到respond(ctx);這個函數(shù)，

那么我們看看這個函數(shù)被我簡化后是怎么樣子的，如下

// 一些容錯判斷或者提示我全部刪了
function respond(ctx) {
  const res = ctx.res;
  let body = ctx.body;
  res.end(body);
}

通過ctx拿到響應(yīng)對象，和響應(yīng)值、通過end方法會通知服務(wù)器，所有響應(yīng)頭和響應(yīng)主體都已被發(fā)送，即服務(wù)器將其視為已完成?？瓷厦嬖膆ttp的服務(wù)方法。

最后附上一個流程圖

這個只是介紹application整個流程，還有很多細節(jié)都沒有一一介紹到，比如、創(chuàng)建context、request、response對象是怎么樣子的呀？中間件是如何集中層層深入處理然后返回的呀？等等這些細節(jié)都會在下一篇會講到（最近公司業(yè)務(wù)非常忙，不知道到猴年馬月）。

寫的不好的地方，讓大家賤笑了。

然后最后安利一波博客，喜歡的小哥哥小姐姐可以star 喲

websit: https://github.com/naihe138/naice-blog