當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

express 源码阅读（全）

發布時間：2025/4/5 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 express 源码阅读（全）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 簡介

這篇文章主要的目的是分析理解express的源碼，網絡上關于源碼的分析已經數不勝數，這篇文章準備另辟蹊徑，仿制一個express的輪子，通過測試驅動的開發方式不斷迭代，正向理解express的代碼。

文章中的express源碼是參考官網最新版本（v4.15.4），文章的整體思路是參考早期創作的另一篇文章，這篇算是其升級版本。

如果你準備通過本文學習express的基本原理，前提條件最好有一定的express使用經驗，寫過一兩個基于express的應用程序，否則對于其背后的原理理解起來難以產生共鳴，不易掌握。

代碼鏈接：https://github.com/WangZhecha...

2. 框架初始化

在仿制express框架前，首先完成兩件事。

確認需求。
確認結構。

首先確認需求，從express的官方網站入手。網站有一個Hello world 的事例程序，想要仿制express，該程序肯定需要通過測試，將改代碼復制保存到測試目錄test/index.js。

const express = require('express') const app = express()app.get('/', function (req, res) {res.send('Hello World!') })app.listen(3000, function () {console.log('Example app listening on port 3000!') })

接下來，確認框架的名稱以及目錄結構。框架的名稱叫做expross。目錄結構如下：

expross||-- lib| | | |-- expross.js||-- test| || |-- index.js||-- index.js

讓expross/index.js文件加載lib目錄下的expross.js文件。

module.exports = require('./lib/expross');

通過測試程序前兩行可以推斷lib/expross.js導出結果應該是一個函數，所以在expross.js文件中添加如下代碼：

function createApplication() {return {}; }exports = module.exports = createApplication;

測試程序中包含兩個函數，所以暫時將createApplication函數體實現如下：

function createApplication() {return {get: function() {console.log('expross().get function');},listen: function() {console.log('expross().listen function');}} }

雖然無法得到想要的結果，但至少可以將測試程序跑通，函數的核心內容可以在接下來的步驟中不斷完善。

至此，初始框架搭建完畢，修改test/index.js文件的前兩行：

const expross = require('../'); const app = expross();

運行node test/index.js查看結果。

2. 第一次迭代

本節是expross的第一次迭代，主要實現的目標是將當前的測試用例功能完整實現，一共分兩部分：

實現http服務器。
實現get路由請求。

實現http服務器比較簡單，可以參考nodejs官網的實現。

參考該案例，實現expross的listen函數。

listen: function(port, cb) {var server = http.createServer(function(req, res) {console.log('http.createServer...');});return server.listen(port, cb); }

當前listen函數包含了兩個參數，但是http.listen有很多重載函數，為了和http.listen一致，可以將函數設置為http.listen的“代理”，這樣可以保持expross().listen和http.listen的參數統一。

listen: function(port, cb) {var server = http.createServer(function(req, res) {console.log('http.createServer...');});//代理return server.listen.apply(server, arguments); }

在listen函數中，我們攔截了所有http請求，每次http請求都會打印http.createServer ...,之所以攔截http請求，是因為expross需要分析每次http請求，根據http請求的不同來處理不同的業務邏輯。

在底層：

一個http請求主要包括請求行、請求頭和消息體，nodejs將常用的數據封裝為http.IncomingMessage類，在上面的代碼中req就是該類的一個對象。

每個http請求都會對應一個http響應。一個http響應主要包括狀態行、響應頭、消息體，nodejs將常用的數據封裝為http.ServerResponse類，在上面的代碼中res就是該類的一個對象。

不僅僅是nodejs，基本上所有的http服務框架都會包含request和response兩個對象，分別代表著http的請求和響應，負責服務端和瀏覽器的交互。

在上層：

服務器后臺代碼根據http請求的不同，綁定不同的邏輯。在真正的http請求來臨時，匹配這些http請求，執行與之對應的邏輯，這個過程就是web服務器基本的執行流程。

對于這些http請求的管理，有一個專有名詞 —— “路由管理”，每個http請求就默認為一個路由，常見的路由區分策略包括URL、HTTP請求名詞等等，但不僅僅限定這些，所有的http請求頭上的參數其實都可以進行判斷區分，例如使用user-agent字段判斷移動端。

不同的框架對于路由的管理規則略有不同，但不管怎樣，都需要一組管理http請求和業務邏輯映射的函數，測試用例中的get函數就是路由管理中的一個函數，主要負責添加get請求。

既然知道路由管理的重要，這里就創建一個router數組，負責管理所有路由映射。參考express框架，抽象出每個路由的基本屬性：

path 請求路徑，例如：/books、/books/1。
method 請求方法，例如：GET、POST、PUT、DELETE。
handle 處理函數。

var router = [{path: '*',method: '*',handle: function(req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('404');} }];

修改listen函數，將http請求攔截邏輯改為匹配router路由表，如果匹配成功，執行對應的handle函數，否則執行router[0].handle函數。

listen: function(port, cb) {var server = http.createServer(function(req, res) {for(var i=1,len=router.length; i<len; i++) {if((req.url === router[i].path || router[i].path === '*') &&(req.method === router[i].method || router[i].method === '*')) {return router[i].handle && router[i].handle(req, res);}}return router[0].handle && router[0].handle(req, res);});return server.listen.apply(server, arguments); }

實現get路由請求非常簡單，該函數主要是添加get請求路由，只需要將其信息加入到router數組即可。

get: function(path, fn) {router.push({path: path,method: 'GET',handle: fn}); }

執行測試用例，報錯，提示res.send不存在。該函數并不是nodejs原生函數，這里在res上臨時添加函數send，負責發送相應到瀏覽器。

listen: function(port, cb) {var server = http.createServer(function(req, res) {if(!res.send) {res.send = function(body) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end(body);};}......});return server.listen.apply(server, arguments); }

在結束這次迭代之前，拆分整理一下程序目錄：

創建application.js文件，將createApplication函數中的代碼轉移到該文件，expross.js文件只保留引用。

var app = require('./application');function createApplication() {return app; }exports = module.exports = createApplication;

整個目錄結構如下：

expross||-- lib| | | |-- expross.js| |-- application.js||-- test| || |-- index.js||-- index.js

最后，運行node test/index.js，打開瀏覽器訪問http://127.0.0.1:3000/。

3. 第二次迭代

本節是expross的第二次迭代，主要的目標是構建一個初步的路由系統。根據上一節的改動，目前的路由是用一個router數組進行描述管理，對于router的操作有兩個，分別是在application.get函數和application.listen函數，前者用于添加，后者用來處理。

按照面向對象的封裝法則，接下來將路由系統的數據和路由系統的操作封裝到一起定義一個 Router類負責整個路由系統的主要工作。

修改原有的application.js文件的內容。

這樣以后路由方面的操作只和Router本身有關，與application分離，使代碼更加清晰。

這個路由系統正常運行時沒有問題的，但是如果路由不斷的增多，this.stack數組會不斷的增大，匹配的效率會不斷降低，為了解決效率的問題，需要仔細分析路由的組成成分。

目前在expross中，一個路由是由三個部分構成：路徑、方法和處理函數。前兩者的關系并不是一對一的關系，而是一對多的關系，如：

GET books/1 PUT books/1 DELETE books/1

如果將路徑一樣的路由整合成一組，顯然效率會提高很多，于是引入Layer的概念。

這里將Router系統中this.stack數組的每一項，代表一個Layer。每個Layer內部含有三個變量。

path，表示路由的路徑。
handle，代表路由的處理函數。
route，代表真正的路由。

整體結構如下圖所示：

------------------------------------------------ | 0 | 1 | 2 | 3 | ------------------------------------------------ | Layer | Layer | Layer | Layer | | |- path | |- path | |- path | |- path | | |- handle| |- handle| |- handle| |- handle| | |- route | |- route | |- route | |- route | ------------------------------------------------router 內部

這里先創建Layer類。

再次修改Router類。

運行node test/index.js，訪問http://127.0.0.1:3000/一切看起來很正常，但是上面的代碼忽略了路由的屬性method。這樣的結果會導致如果測試用例存在問題：

app.put('/', function(req, res) {res.send('put Hello World!'); });app.get('/', function(req, res) {res.send('get Hello World!'); });

程序無法分清PUT和GET的區別。

所以需要繼續完善路由系統中的Layer類中的route屬性，這個屬性才是真正包含method屬性的路由。

route的結構如下：

------------------------------------------------ | 0 | 1 | 2 | 3 | ------------------------------------------------ | item | item | item | item | | |- method| |- method| |- method| |- method| | |- handle| |- handle| |- handle| |- handle| ------------------------------------------------route 內部

創建Route類。

在上面的代碼中，并沒有定義前面結構圖中的item對象，而是使用了Layer對象進行替代，主要是為了方便快捷，從另一種角度看，其實二者是存在很多共同點的。另外，為了利于理解，代碼中只實現了GET方法，其他方法的代碼實現是類似的。

既然有了Route類，接下來就改修改原有的Router類，將route集成其中。

Router.prototype.handle = function(req, res) {var self = this,method = req.method;for(var i=0,len=self.stack.length; i<len; i++) {if(self.stack[i].match(req.url) && self.stack[i].route && self.stack[i].route._handles_method(method)) {return self.stack[i].handle_request(req, res);}}return self.stack[0].handle_request(req, res); };Router.prototype.route = function route(path) {var route = new Route(path);var layer = new Layer(path, function(req, res) {route.dispatch(req, res);});layer.route = route;this.stack.push(layer);return route; };Router.prototype.get = function(path, fn) {var route = this.route(path);route.get(fn);return this; };

運行node test/index.js，一切看起來和原來一樣。

這節內容主要是創建一個完整的路由系統，并在原始代碼的基礎上引入了Layer和Route兩個概念，并修改了大量的代碼，在結束本節前總結一下目前的信息。

首先，當前程序的目錄結構如下：

expross||-- lib| | | |-- expross.js| |-- application.js| |-- router| || |-- index.js| |-- layer.js| |-- route.js||-- test| || |-- index.js||-- index.js

接著，總結一下當前expross各個部分的工作。

application代表一個應用程序，expross是一個工廠類負責創建application對象。Router代表路由組件，負責應用程序的整個路由系統。組件內部由一個Layer數組構成，每個Layer代表一組路徑相同的路由信息，具體信息存儲在Route內部，每個Route內部也是一個Layer對象，但是Route內部的Layer和Router內部的Layer是存在一定的差異性。

Router內部的Layer，主要包含path、route屬性。
Route內部的Layer，主要包含method、handle屬性。

如果一個請求來臨，會現從頭至尾的掃描router內部的每一層，而處理每層的時候會先對比URI，相同則掃描route的每一項，匹配成功則返回具體的信息，沒有任何匹配則返回未找到。

最后，整個路由系統的結構如下：

-------------- | Application | --------------------------------------------------------- | | | ----- ----------- | 0 | 1 | 2 | 3 | ... | | |-router | ----> | | Layer | ----------------------------------------------------------------------- | 0 | |-path | | Layer | Layer | Layer | Layer | |application | | |-route | ----> | |- method| |- method| |- method| |- method| ... ||-----|-----------| | |- handle| |- handle| |- handle| |- handle| || | Layer | ---------------------------------------------------------| 1 | |-path | route| | |-route | |-----|-----------| | | Layer || 2 | |-path || | |-route ||-----|-----------|| ... | ... |----- ----------- router

3. 第三次迭代

本節是expross的第三次迭代，主要的目標是繼續完善路由系統，主要工作有部分：

豐富接口，目前只支持get接口。
增加路由系統的流程控制。

當前expross框架只支持get接口，具體的接口是由expross提供的，內部調用Router.get接口，而其內部是對Route.get的封裝。

HTTP顯然不僅僅只有GET這一個方法，還包括很多，例如：PUT、POST、DELETE等等，每個方法都單獨寫一個處理函數顯然是冗余的，因為函數的內容除了和函數名相關外，其他都是一成不變的。根據JavaScript腳本語言語言的特性，這里可以通過HTTP的方法列表動態生成函數內容。

想要動態生成函數，首先需要確定函數名稱。函數名就是nodejs中HTTP服務器支持的方法名稱，可以在官方文檔中獲取，具體參數是http.METHODS。這個屬性是在v0.11.8新增的，如果nodejs低于該版本，需要手動建立一個方法列表，具體可以參考nodejs代碼。

express框架HTTP方法名的獲取封裝到另一個包，叫做methods，內部給出了低版本的兼容動詞列表。

function getBasicNodeMethods() {return ['get','post','put','head','delete','options','trace','copy','lock','mkcol','move','purge','propfind','proppatch','unlock','report','mkactivity','checkout','merge','m-search','notify','subscribe','unsubscribe','patch','search','connect']; }

知道所支持的方法名列表數組后，剩下的只需要一個for循環生成所有的函數即可。

所有的動詞處理函數的核心內容都在Route中。

http.METHODS.forEach(function(method) {method = method.toLowerCase();Route.prototype[method] = function(fn) {var layer = new Layer('/', fn);layer.method = method;this.methods[method] = true;this.stack.push(layer);return this;}; });

接著修改Router。

http.METHODS.forEach(function(method) {method = method.toLowerCase();Router.prototype[method] = function(path, fn) {var route = this.route(path);route[method].call(route, fn);return this;}; });

最后修改application.js的內容。這里改動較大，重新定義了一個Application類，而不是使用字面量直接創建。

接著增加HTTP方法函數。

http.METHODS.forEach(function(method) {method = method.toLowerCase();Application.prototype[method] = function(path, fn) {this._router[method].apply(this._router, arguments);return this;}; });

因為導出的是Application類，所以修改expross.js文件。

var Application = require('./application');function createApplication() {var app = new Application();return app; }

運行node test/index.js，走起。

如果你仔細研究路由系統的源碼，會發現route本身的定義并不是像文字描述那樣。例如：

增加兩個同樣路徑的路由：

app.put('/', function(req, res) {res.send('put Hello World!'); });app.get('/', function(req, res) {res.send('get Hello World!'); });

結果并不是想象中類似下面的結構：

-------------------------------------------------------------- ----------- | 0 | 1 | 2 | 3 | ... | | | Layer | --------------------------------------------------------- | 0 | |-path | | Layer | Layer | Layer | Layer | | | | |-route | ----> | |- method| |- method| |- method| |- method| ... | |-----|-----------| | |- handle| |- handle| |- handle| |- handle| | | | Layer | --------------------------------------------------------- | 1 | |-path | route | | |-route | |-----|-----------| | | Layer | | 2 | |-path | | | |-route | |-----|-----------| | ... | ... |----- ----------- router

而是如下的結構：

----- ----------- ------------- | | Layer | ----> | Layer | | 0 | |-path | | |- method| route | | |-route | | |- handle| |-----|-----------| ------------- | | Layer | ------------- | 1 | |-path | ----> | Layer | | | |-route | | |- method| route |-----|-----------| | |- handle| | | Layer | ------------- | 2 | |-path | ------------- | | |-route | ----> | Layer | |-----|-----------| | |- method| route | ... | ... | | |- handle| ----- ----------- -------------router

之所以會這樣是因為路由系統存在這先后順序的關系，如果你前面的描述結構很有可能會丟失路由順序這個屬性。既然這樣，那Route的用處是在哪？

因為在express框架中，Route存儲的是真正的路由信息，可以當做單獨的成員使用，如果想要真正前面的所描述的結果描述，你需要這樣創建你的代碼：

而不是這樣：

var app = expross();app.get('/users/:user_id', function(req, res) {}).put('/users/:user_id', function(req, res) {}).post('/users/:user_id', function(req, res) {}).delete('/users/:user_id', function(req, res) {});

理解了Route的使用方法，接下來就要討論剛剛提到的順序問題。在路由系統中，路由的處理順序非常重要，因為路由是按照數組的方式存儲的，如果遇見兩個同樣的路由，同樣的方法名，不同的處理函數，這時候前后聲明的順序將直接影響結果（這也是express中間件存在順序相關的原因），例如下面的例子：

app.get('/', function(req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('first'); });app.get('/', function(req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('second'); });

上面的代碼如果執行會發現永遠都返回first，但是有的時候會根據前臺傳來的參數動態判斷是否執行接下來的路由，怎樣才能跳過first進入second？這就涉及到路由系統的流程控制問題。

流程控制分為主動和被動兩種模式。

對于expross框架來說，路由綁定的處理邏輯、用戶設置的路徑參數這些都是不可靠的，在運行過程中很有可能會發生異常，被動流程控制就是當這些異常發生的時候，expross框架要擔負起捕獲這些異常的工作，因為如果不明確異常的發生位置，會導致js代碼無法繼續運行，并且無法準確的報出故障。

主動流程控制則是處理函數內部的操作邏輯，以主動調用的方式來跳轉路由內部的執行邏輯。

目前express通過引入next參數的方式來解決流程控制問題。next是處理函數的一個參數，其本身也是一個函數，該函數有幾種使用方式：

執行下一個處理函數。執行next()。
報告異常。執行next(err)。
跳過當前Route，執行Router的下一項。執行next('route')。
跳過整個Router。執行next('router')。

接下來，我們嘗試實現以下這些需求。

首先修改最底層的Layer對象，該對象的handle_request函數是負責調用路由綁定的處理邏輯，這里添加next參數，并且增加異常捕獲功能。

Layer.prototype.handle_request = function (req, res, next) {var fn = this.handle;try {fn(req, res, next);} catch (err) {next(err);} };

接下來修改Route.dispath函數。因為涉及到內部的邏輯跳轉，使用for循環按部就班不太合適，這里使用了類似遞歸的方式。

Route.prototype.dispatch = function(req, res, done) {var self = this,method = req.method.toLowerCase(),idx = 0, stack = self.stack;function next(err) {//跳過routeif(err && err === 'route') {return done();}//跳過整個路由系統if(err && err === 'router') {return done(err);}//越界if(idx >= stack.length) {return done(err);}//不等枚舉下一個var layer = stack[idx++];if(method !== layer.method) {return next(err);}if(err) {//主動報錯return done(err);} else {layer.handle_request(req, res, next);}}next(); };

整個處理過程本質上還是一個for循環，唯一的差別就是在處理函數中用戶主動調用next函數的處理邏輯。

如果用戶通過next函數返回錯誤、route和router這三種情況，目前統一拋給Router處理。

因為修改了dispatch函數，所以調用該函數的Router.route函數也要修改，這回直接改徹底，以后無需根據參數的個數進行調整。

Router.prototype.route = function route(path) {...//使用bind方式var layer = new Layer(path, route.dispatch.bind(route));... };

接著修改Router.handle的代碼，邏輯和Route.dispatch類似。

Router.prototype.handle = function(req, res, done) {var self = this,method = req.method,idx = 0, stack = self.stack;function next(err) {var layerError = (err === 'route' ? null : err);//跳過路由系統if(layerError === 'router') {return done(null);}if(idx >= stack.length || layerError) {return done(layerError);}var layer = stack[idx++];//匹配，執行if(layer.match(req.url) && layer.route &&layer.route._handles_method(method)) {return layer.handle_request(req, res, next);} else {next(layerError);}}next(); };

修改后的函數處理過程和原來的類似，不過有一點需要注意，當發生異常的時候，會將結果返回給上一層，而不是執行原有this.stack第0層的代碼邏輯。

最后增加expross框架異常處理的邏輯。

在之前，可以移除原有this.stack的初始化代碼，將

var Router = function() {this.stack = [new Layer('*', function(req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('404'); })]; };

改為

var Router = function() {this.stack = []; };

然后，修改Application.handle函數。

Application.prototype.handle = function(req, res) {...var done = function finalhandler(err) {res.writeHead(404, {'Content-Type': 'text/plain'});if(err) {res.end('404: ' + err); } else {var msg = 'Cannot ' + req.method + ' ' + req.url;res.end(msg); }};var router = this._router;router.handle(req, res, done); };

這里簡單的將done函數處理為返回404頁面，其實在express框架中，使用的是一個單獨的npm包，叫做finalhandler。

簡單的修改一下測試用例證明一下成果。

運行node test/index.js，訪問http://127.0.0.1:3000/，結果顯示：

404: Error: error

貌似目前一切都很順利，不過還有一個需求目前被忽略了。當前處理函數的異常全部是由框架捕獲，返回的信息只能是固定的404頁面，對于框架使用者顯然很不方便，大多數時候，我們都希望可以捕獲錯誤，并按照一定的信息封裝返回給瀏覽器，所以expross需要一個返回錯誤給上層使用者的接口。

目前和上層對接的處理函數的聲明如下：

function process_fun(req, res, next) {}

如果增加一個錯誤處理函數，按照nodejs的規則，第一個參數是錯誤信息，定義應該如下所示：

function process_err(err, req, res, next) {}

因為兩個聲明的第一個參數信息是不同的，如果區分傳入的處理函數是處理錯誤的函數還是處理正常的函數，這個是expross框架需要搞定的關鍵問題。

javascript中，Function.length屬性可以獲取傳入函數指定的參數個數，這個可以當做區分二者的關鍵信息。

既然確定了原理，接下來直接在Layer類上增加一個專門處理錯誤的函數，和處理正常信息的函數區分開。

//錯誤處理 Layer.prototype.handle_error = function (error, req, res, next) {var fn = this.handle;//如果函數參數不是標準的4個參數，返回錯誤信息if(fn.length !== 4) {return next(error);}try {fn(error, req, res, next);} catch (err) {next(err);} };

接著修改Route.dispatch函數。

Route.prototype.dispatch = function(req, res, done) {var self = this,method = req.method.toLowerCase(),idx = 0, stack = self.stack;function next(err) {...if(err) {//主動報錯layer.handle_error(err, req, res, next);} else {layer.handle_request(req, res, next);}}next(); };

當發生錯誤的時候，Route會一直向后尋找錯誤處理函數，如果找到則返回，否則執行done(err)，將錯誤拋給Router。

對于Router.handle的修改，因為涉及到一些中間件的概念，完整的錯誤處理將推移到下一節完成。

本節的內容基本上完成，包括HTTP相關的動作接口的添加、路由系統的流程跳轉以及Route級別的錯誤響應等等，涉及到路由系統剩下的一點內容暫時放到以后講解。

4. 第四次迭代

本節是expross的第四次迭代，主要的目標是建立中間件機制并繼續完善路由系統的功能。

在express中，中間件其實是一個介于web請求來臨后到調用處理函數前整個流程體系中間調用的組件。其本質是一個函數，內部可以訪問修改請求和響應對象，并調整接下來的處理流程。

express官方給出的解釋如下：

Express 是一個自身功能極簡，完全是由路由和中間件構成一個的 web 開發框架：從本質上來說，一個 Express 應用就是在調用各種中間件。

中間件（Middleware）是一個函數，它可以訪問請求對象（request object (req)）, 響應對象（response object (res)）, 和 web 應用中處于請求-響應循環流程中的中間件，一般被命名為 next 的變量。

中間件的功能包括：

執行任何代碼。
修改請求和響應對象。
終結請求-響應循環。
調用堆棧中的下一個中間件。

如果當前中間件沒有終結請求-響應循環，則必須調用 next() 方法將控制權交給下一個中間件，否則請求就會掛起。

Express 應用可使用如下幾種中間件：

應用級中間件
路由級中間件
錯誤處理中間件
內置中間件
第三方中間件

使用可選則掛載路徑，可在應用級別或路由級別裝載中間件。另外，你還可以同時裝在一系列中間件函數，從而在一個掛載點上創建一個子中間件棧。

官方給出的定義其實已經足夠清晰，一個中間件的樣式其實就是上一節所提到的處理函數，只不過并沒有正式命名。所以對于代碼來說Router類中的this.stack屬性內部的每個handle都是一個中間件，根據使用接口不同區別了應用級中間件和路由級中間件，而四個參數的處理函數就是錯誤處理中間件。

接下來就給expross框架添加中間件的功能。

首先是應用級中間件，其使用方法是Application類上的兩種方式：Application.use 和 Application.METHOD (HTTP的各種請求方法），后者其實在前面的小節里已經實現了，前者則是需要新增的。

在前面的小節里的代碼已經說明Application.METHOD內部其實是Router.METHOD的代理，Application.use同樣如此。

Application.prototype.use = function(fn) {var path = '/',router = this._router;router.use(path, fn);return this; };

因為Application.use支持可選路徑，所以需要增加處理路徑的重載代碼。

Application.prototype.use = function(fn) {var path = '/',router = this._router;//路徑掛載if(typeof fn !== 'function') {path = fn;fn = arguments[1];}router.use(path, fn);return this; };

其實express框架支持的參數不僅僅這兩種，但是為了便于理解剔除了一些旁枝末節，便于框架的理解。

接下來實現Router.use函數。

Router.prototype.use = function(fn) {var path = '/';//路徑掛載if(typeof fn !== 'function') {path = fn;fn = arguments[1];}var layer = new Layer(path, fn);layer.route = undefined;this.stack.push(layer);return this; };

內部代碼和Application.use差不多，只不過最后不再是調用Router.use，而是直接創建一個Layer對象，將其放到this.stack數組中。

在這里段代碼里可以看到普通路由和中間件的區別。普通路由放到Route中，且Router.route屬性指向Route對象，Router.handle屬性指向Route.dispatch函數；中間件的Router.route屬性為undefined，Router.handle指向中間件處理函數，被放到Router.stack數組中。

對于路由級中間件，首先按照要求導出Router類，便于使用。

exports.Router = Router;

上面的代碼添加到expross.js文件中，這樣就可以按照下面的使用方式創建一個單獨的路由系統。

var app = express(); var router = express.Router();router.use(function (req, res, next) {console.log('Time:', Date.now()); });

現在問題來了，如果像上面的代碼一樣創建一個新的路由系統是無法讓路由系統內部的邏輯生效的，因為這個路由系統沒法添加到現有的系統中。

一種辦法是增加一個專門添加新路由系統的接口，是完全是可行的，但是我更欣賞express框架的辦法，這可能是Router叫做路由級中間件的原因。express將Router定義成一個特殊的中間件，而不是一個單獨的類。

這樣將單獨創建的路由系統添加到現有的應用中的代碼非常簡單通用：

var router = express.Router();// 將路由掛載至應用 app.use('/', router);

這確實是一個好方法，現在就來將expross修改成類似的樣子。

首先創建一個原型對象，將現有的Router方法轉移到該對象上。

然后創建一個中間件函數，使用Object.setPrototypeOf函數設置其原型，最后導出一個生成這些過程的函數。

module.exports = function() {function router(req, res, next) {router.handle(req, res, next);}Object.setPrototypeOf(router, proto);router.stack = [];return router; };

修改測試用例，測試一下效果。

app.use(function(req, res, next) {console.log('Time：', Date.now());next(); });app.get('/', function(req, res, next) {res.send('first'); });router.use(function(req, res, next) {console.log('Time: ', Date.now());next(); });router.use('/', function(req, res, next) {res.send('second'); });app.use('/user', router);app.listen(3000, function() {console.log('Example app listening on port 3000!'); });

結果并不理想，原有的應用程序還有兩個地方需要修改。

首先是邏輯處理問題。原有的Router.handle函數中并沒有處理中間件的情況，需要進一步修改。

proto.handle = function(req, res, done) {...function next(err) {...//注意這里，layer.route屬性if(layer.match(req.url) && layer.route &&layer.route._handles_method(method)) {layer.handle_request(req, res, next);} else {layer.handle_error(layerError, req, res, next);}}next(); };

改成：

proto.handle = function(req, res, done) {...function next(err) {...//匹配，執行if(layer.match(path)) {if(!layer.route) {//處理中間件layer.handle_request(req, res, next); } else if(layer.route._handles_method(method)) {//處理路由layer.handle_request(req, res, next);} } else {layer.handle_error(layerError, req, res, next);}}next(); };

其次是路徑匹配的問題。原有的單一路徑被拆分成為不同中間的路徑組合，這里判斷需要多步進行，因為每個中間件只是匹配自己的路徑是否通過，不過相對而言目前涉及的匹配都是全等匹配，還沒有涉及到類似express框架中的正則匹配，算是非常簡單了。

想要實現匹配邏輯就要清楚的知道哪段路徑和哪個處理函數匹配，這里定義三個變量：

req.originalUrl 原始請求路徑。
req.url 當前路徑。
req.baseUrl 父路徑。

主要修改Router.handle函數，該函數主要負責提取當前路徑段，便于和事先傳入的路徑進行匹配。

proto.handle = function(req, res, done) {var self = this,method = req.method,idx = 0, stack = self.stack,removed = '', slashAdded = false;//獲取當前父路徑var parentUrl = req.baseUrl || '';//保存父路徑req.baseUrl = parentUrl;//保存原始路徑req.orginalUrl = req.orginalUrl || req.url;function next(err) {var layerError = (err === 'route' ? null : err);//如果有移除，復原原有路徑if(slashAdded) {req.url = '';slashAdded = false;}//如果有移除，復原原有路徑信息if(removed.length !== 0) {req.baseUrl = parentUrl;req.url = removed + req.url;removed = '';}//跳過路由系統if(layerError === 'router') {return done(null);}if(idx >= stack.length || layerError) {return done(layerError);}//獲取當前路徑var path = require('url').parse(req.url).pathname;var layer = stack[idx++];//匹配，執行if(layer.match(path)) {//處理中間件if(!layer.route) {//要移除的部分路徑removed = layer.path;//設置當前路徑req.url = req.url.substr(removed.length);if(req.url === '') {req.url = '/' + req.url;slashAdded = true;}//設置當前路徑的父路徑req.baseUrl = parentUrl + removed;//調用處理函數layer.handle_request(req, res, next); } else if(layer.route._handles_method(method)) {//處理路由layer.handle_request(req, res, next);} } else {layer.handle_error(layerError, req, res, next);}}next(); };

這段代碼主要處理兩種情況：

第一種，存在路由中間件的情況。如：

router.use('/1', function(req, res, next) {res.send('first user'); });router.use('/2', function(req, res, next) {res.send('second user'); });app.use('/users', router);

這種情況下，Router.handle順序匹配到中間的時候，會遞歸調用Router.handle，所以需要保存當前的路徑快照，具體路徑相關信息放到req.url、req.originalUrl 和req.baseUrl 這三個參數中。

第二種，非路由中間件的情況。如：

app.get('/', function(req, res, next) {res.send('home'); });app.get('/books', function(req, res, next) {res.send('books'); });

這種情況下，Router.handle內部主要是按照棧中的次序匹配路徑即可。

改好了處理函數，還需要修改一下Layer.match這個匹配函數。目前創建Layer可能會有三種情況：

不含有路徑的中間件。path屬性默認為/。
含有路徑的中間件。
普通路由。如果path屬性為*，表示任意路徑。

修改原有Layer是構造函數，增加一個fast_star 標記用來判斷path是否為*。

function Layer(path, fn) {this.handle = fn;this.name = fn.name || '<anonymous>';this.path = undefined;//是否為*this.fast_star = (path === '*' ? true : false);if(!this.fast_star) {this.path = path;} }

接著修改Layer.match匹配函數。

Layer.prototype.match = function(path) {//如果為*，匹配if(this.fast_star) {this.path = '';return true;}//如果是普通路由，從后匹配if(this.route && this.path === path.slice(-this.path.length)) {return true;}if (!this.route) {//不帶路徑的中間件if (this.path === '/') {this.path = '';return true;}//帶路徑中間件if(this.path === path.slice(0, this.path.length)) {return true;}}return false; };

代碼中一共判斷四種情況，根據this.route區分中間件和普通路由，然后分開判斷。

express除了普通的中間件外還要一種錯誤中間件，專門用來處理錯誤信息。該中間件的聲明和上一小節最后介紹的錯誤處理函數是一樣的，同樣是四個參數分別是：err、 req、 res和 next。

目前Router.handle中，當遇見錯誤信息的時候，會直接通過回調函數返回錯誤信息，顯示錯誤頁面。

if(idx >= stack.length || layerError) {return done(layerError); }

這里需要修改策略，將其改為繼續調用下一個中間件，直到碰到錯誤中間件為止。

//沒有找到 if(idx >= stack.length) {return done(layerError); }

原有這一塊的代碼只保留判斷枚舉是否完成，將錯誤判斷轉移到最后執行處理函數的位置。之所以這樣做是因為不管是執行處理函數，或是執行錯誤處理都需要進行路徑匹配操作和路徑分析操作，所以放到后面正好合適。

//處理中間件 if(!layer.route) {...//調用處理函數if(layerError)layer.handle_error(layerError, req, res, next);elselayer.handle_request(req, res, next);} else if(layer.route._handles_method(method)) {//處理路由layer.handle_request(req, res, next); }

到此為止，expross的錯誤處理部分算是基本完成了。

路由系統和中間件兩個大的概念算是全部講解完畢，當然還有很多細節沒有完善，在剩下的文字里如果有必要會繼續完善。

下一節主要的內容是介紹前后端交互的兩個重要成員：request和response。express在nodejs的基礎之上進行了豐富的擴展，所以很有必要仿制一下。

5. 第五次迭代

本節是expross的第五次迭代，主要的目標是封裝request和response兩個對象，方便使用。

其實nodejs已經給我們提供這兩個默認的對象，之所以要封裝是因為豐富一下二者的接口，方便框架使用者，目前框架在response對象上已經有一個接口：

if(!res.send) {res.send = function(body) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end(body);}; }

如果需要繼續封裝，也要類似的結構在代碼上添加顯然會給人一種很亂的感覺，因為request和response的原始版本是nodejs提供給框架的，框架獲取到的是兩個對象，并不是類，要想在二者之上提供另一組接口的辦法有很多，歸根結底就是將新的接口加到該對象上或者加到該對象的原型鏈上，目前的代碼選擇了前者，express的代碼選擇了后者。

首先建立兩個文件：request.js 和 response.js，二者分別導出req和res對象。

//request.js var http = require('http');var req = Object.create(http.IncomingMessage.prototype);module.exports = req;//response.js var http = require('http');var res = Object.create(http.ServerResponse.prototype);module.exports = res;

二者文件的代碼都是創建一個對象，分別指向nodejs提供的request和response兩個對象的原型，以后expross自定的接口可以統一掛載到這兩個對象上。

接著修改Application.handle函數，因為這個函數里面有新鮮出爐的request和response。思路很簡單，就是將二者的原型指向我們自建的req和res。因為req和res對象的原型和request和response的原型相同，所以并不影響原有nodejs的接口。

var request = require('./request'); var response = require('./response');...Application.prototype.handle = function(req, res) {Object.setPrototypeOf(req, request);Object.setPrototypeOf(res, response);... };

這里將原有的res.send轉移到了response.js文件中。

res.send = function(body) {this.writeHead(200, {'Content-Type': 'text/plain'});this.end(body); };

注意函數中不在是res.writeHead和res.end，而是this.writeHead和this.end。

在整個路由系統中，Router.stack每一項其實都是一個中間件，每個中間件都有可能用到req和res這兩個對象，所以代碼中修改nodejs原生提供的request和response對象的代碼放到了Application.handle中，這樣做并沒有問題，但是有一種更好的方式，expross框架將這部分代碼封裝成了一個內部中間件。

為了確保框架中每個中間件接收這兩個參數的正確性，需要將該內部中間放到Router.stack的首項。這里將原有Application的構造函數中的代碼去掉，不再是直接創建Router()路由系統，而是用一種惰性加載的方式，動態創建。

去除原有Application構造函數的代碼。

function Application() {}

添加惰性初始化函數。

Application.prototype.lazyrouter = function() {if(!this._router) {this._router = new Router();this._router.use(middleware.init());} };

因為是惰性初始化，所以在使用this._router對象前，一定要先調用該函數動態創建this._router對象。類似如下代碼：

//獲取router this.lazyrouter(); router = this._router;

接下來創建一個叫middleware文件夾，專門放內部中間件的文件，再創建一個init.js文件，放置Application.handle中用來初始化res和req的代碼。

var request = require('../request'); var response = require('../response');exports.init = function expressInit(req, res, next) {//request文件可能用到res對象req.res = res;//response文件可能用到req對象res.req = req;//修改原始req和res原型Object.setPrototypeOf(req, request);Object.setPrototypeOf(res, response);//繼續next(); };

修改原有的Applicaton.handle函數。

Application.prototype.handle = function(req, res) {...// 這里無需調用lazyrouter，因為listen前一定調用了.use或者.METHODS方法。// 如果二者都沒有調用，沒有必要創建路由系統。this._router為undefined。var router = this._router;if(router) {router.handle(req, res, done);} else {done();} };

運行node test/index.js走起……

express框架中，request和response兩個對象有很多非常好用的函數，不過大部分和框架結構無關，并且這些函數內部過于專研細節，對框架本身的理解沒有多少幫助。不過接下來有一個方面需要仔細研究一下，那就是前后端參數的傳遞，express如何獲取并分類這些參數的，這一點還是需要略微了解。

默認情況下，一共有三種參數獲取方式。

req.query 代表查詢字符串。
req.params 代表路徑變量。
req.body 代表表單提交變量。

req.query 是最常用的方式，例如：

// GET /search?q=tobi+ferret req.query.q // => "tobi ferret"// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse req.query.order // => "desc"req.query.shoe.color // => "blue"req.query.shoe.type // => "converse"

后臺獲取這些參數最簡單的方式就是通過nodejs自帶的querystring模塊分析URL。express使用的是另一個npm包，qs。并且將其封裝為另一個內部中間件，專門負責解析查詢字符串，默認加載。

req.params 是另一種從URL獲取參數的方式，例如：

//路由規則 /user/:name // GET /user/tj req.params.name // => "tj"

這是一種express框架規定的參數獲取方式，對于批量處理邏輯非常實用。在expross中并沒有實現，因為路徑匹配問題過于細節化，如果對此感興趣可以研究研究path-to-regexp模塊，express也是在其上的封裝。

req.body 是獲取表單數據的方式，但是默認情況下框架是不會去解析這種數據，直接使用只會返回undefined。如果想要支持需要添加其他中間件，例如 body-parser 或 multer。

本小節主要介紹了request和response兩個對象，并且講解了一下現有expross框架中獲取參數的方式，整體上并沒有太深入的仿制，主要是這方面內容涉及的細節過多，只可意會。研究了也就僅僅知道而已，并不能帶來多少積累，除非重頭再造一次輪子。

6. 第六次迭代

本小節是第六次迭代，主要的目的是介紹一下expresss是如何集成現有的渲染引擎的。與渲染引擎有關的事情涉及到下面幾個方面：

如何開發或綁定一個渲染引擎。
如何注冊一個渲染引擎。
如何指定模板路徑。
如何渲染模板引擎。

express通過app.engine(ext, callback) 方法即可創建一個你自己的模板引擎。其中，ext 指的是文件擴展名、callback 是模板引擎的主函數，接受文件路徑、參數對象和回調函數作為其參數。

//下面的代碼演示的是一個非常簡單的能夠渲染 “.ntl” 文件的模板引擎。var fs = require('fs'); // 此模板引擎依賴 fs 模塊 app.engine('ntl', function (filePath, options, callback) { // 定義模板引擎fs.readFile(filePath, function (err, content) {if (err) return callback(new Error(err));// 這是一個功能極其簡單的模板引擎var rendered = content.toString().replace('#title#', '<title>'+ options.title +'</title>').replace('#message#', '<h1>'+ options.message +'</h1>');return callback(null, rendered);}) });

為了讓應用程序可以渲染模板文件，還需要做如下設置：

//views, 放模板文件的目錄 app.set('views', './views') //view engine, 模板引擎 app.set('view engine', 'jade')

一旦 view engine 設置成功，就不需要顯式指定引擎，或者在應用中加載模板引擎模塊，Express 已經在內部加載。下面是如何渲染頁面的方法：

app.get('/', function (req, res) {res.render('index', { title: 'Hey', message: 'Hello there!'}); });

要想實現上述功能，首先在Application類中定義兩個變量，一個存儲app.set 和 app.get 這兩個方法存儲的值，另一個存儲模板引擎中擴展名和渲染函數的對應關系。

function Application() {this.settings = {};this.engines = {}; }

然后是實現app.set函數。

Application.prototype.set = function(setting, val) {if (arguments.length === 1) {// app.get(setting)return this.settings[setting];}this.settings[setting] = val;return this; };

代碼中不僅僅實現了設置，如何傳入的參數只有一個等價于get函數。

接著實現app.get函數。因為現在已經有了一個app.get方法用來設置路由，所以需要在該方法上進行重載。

http.METHODS.forEach(function(method) {method = method.toLowerCase();Application.prototype[method] = function(path, fn) {if(method === 'get' && arguments.length === 1) {// app.get(setting)return this.set(path);}...}; });

最后實現app.engine進行擴展名和引擎函數的映射。

Application.prototype.engine = function(ext, fn) {// get file extensionvar extension = ext[0] !== '.'? '.' + ext: ext;// store enginethis.engines[extension] = fn;return this; };

擴展名當做key，統一添加“.”。

到此設置模板引擎相關信息的函數算是完成，接下來就是最重要的渲染引擎函數的實現。

res.render = function(view, options, callback) {var app = this.req.app;var done = callback;var opts = options || {};var self = this;//如果定義回調，則返回，否則渲染done = done || function(err, str) {if(err) {return req.next(err);}self.send(str);};//渲染app.render(view, opts, done); };

渲染函數一共有三個參數，view表示模板的名稱，options是模板渲染的變量，callback是渲染成功后的回調函數。

函數內部直接調用render函數進行渲染，渲染完成后調用done回調。

接下來創建一個view.js文件，主要功能是負責各種模板引擎和框架間的隔離，保持對內接口的統一性。

View類內部定義了很多屬性，主要包括引擎、根目錄、擴展名、文件名等等，為了以后的渲染做準備。

View.prototype.render = function render(options, callback) {this.engine(this.path, options, callback); };

View的渲染函數內部就是調用一開始注冊的引擎渲染函數。

了解了View的定義，接下來實現app.render模板渲染函數。

Application.prototype.render = function(name, options, callback) {var done = callback;var engines = this.engines;var opts = options;view = new View(name, {defaultEngine: this.get('view engine'),root: this.get('views'),engines: engines});if (!view.path) {var err = new Error('Failed to lookup view "' + name + '"');return done(err);}try {view.render(options, callback);} catch (e) {callback(e);} };

還有一些細節沒有在教程中展示出來，可以參考github上傳的案例代碼。

貌似一切搞定，修改測試用例，嘗試一下。

運行node test/index.js，查看效果。

上面的代碼是自己注冊的引擎，如果想要和現有的模板引擎結合還需要在回調函數中引用模板自身的渲染方法，當然為了方便，express框架內部提供了一個默認方法，如果模板引擎導出了該方法，則表示該模板引擎支持express框架，無需使用app.engine再次封裝。

該方法聲明如下：

__express(filePath, options, callback)

可以參考ejs模板引擎的代碼，看看它們是如何寫的：

//該行代碼在lib/ejs.js文件的355行左右 exports.__express = exports.renderFile;

express框架是如何實現這個默認加載的功能的呢？很簡單，只需要在View的構造函數中加一個判斷即可。

if (!opts.engines[this.ext]) {// load enginevar mod = this.ext.substr(1);opts.engines[this.ext] = require(mod).__express; }

代碼很簡單，如果沒有找到引擎對應的渲染函數，那就嘗試加載__express函數。

后記

至此，算是結束本篇文章了。其實還有很多內容可以寫，但是寫的有些煩了，篇幅太長了，大概有一萬三千多字，后面有點應付了事的感覺。

簡單的說一下還有哪里沒有介紹。

關于Application。

如果稍微看過expross代碼的人都會發現，Application并不是想我寫的這樣是一個類，而是一個中間件，一個對象，該對象使用了mixin方法的多繼承手段，express.js文件中的createApplication函數算是整個框架的切入點。

關于Router.handle。

這個函數可以說是整個express框架的核心，如果理解了該函數，整個框架基本上就掌握了。我在仿制的時候舍棄了很多細節，在這里個函數里面內部有兩個個關鍵點沒說。一、處理URL形式的參數，這里涉及對params參數的提取過程。其中有一個restore函數使用高階函數的方法做了緩存，仔細體會很有意思。二、setImmediate異步返回，之所以要使用異步處理，是因為下面的代碼需要運行，包括路徑相關的參數，這些參數在下一個處理函數中可能會用到。

關于其他函數。

太多函數了，不一一列舉，前文已經提到，涉及的細節太多，正則表達式，http協議層，nodejs本身函數的使用，對于整個框架的理解幫助不大，全部舍棄。不過大多數函數都是自成體系，很好理解。

總結

以上是生活随笔為你收集整理的express 源码阅读（全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：第三百七十七节，Django+Xadmi
下一篇： Android动画(一)-视图动画与帧动