簡介
Express是Node.js 的web開發框架，很受歡迎，這篇文章主要從原始碼來分析 express的路由以及中介軟體是如何初始化及工作的。
下面來先看下用法
// 示例
const express = require('express');
const app = express();
// fn1
app.use((req, res, next) => {
console.log('enter');
next()
});
// fn2
app.get('/user', (req, res, next) => {
console.log('user:app get 1.1');
next()
}, (req, res, next) => {
// fn3
console.log('user:app get 1.2');
next()
});
// fn4
app.get('/api', (req, res, next) => {
console.log('api: app get 1');
res.send('api');
});
// fn5
app.get('/user', (req, res, next) => {
console.log('user: app get 2.1');
next();
}, (req, res, next) => {
// fn6
console.log('user: app get 2.2');
res.send('user');
});
app.listen(3000);
複製程式碼當我們在瀏覽器訪問http://localhost:3000/user 的時候，看下輸出了什麼
下面一起來看下原始碼，研究一下其中的原理究竟如何
初始化階段
首先先看下app.get -- 原始碼位置
// 1.生成router例項
methods.forEach(function(method){
app[method] = function(path){
// 這個函式就是判斷一下當前有沒有router屬性， 沒有就給this新增一個router屬性 屬性值為 Router的一個例項
this.lazyrouter();
// 2. 此處method為get 也就是Router類的get方法
// 另外 path 就是當前的/user
// slice就是Array.prototype.slice 所以後面的這個引數就是我們傳遞進去的處理函式
var route = this._router.route(path);
// 3. Router.route 返回了一個Route例項，同時生成了一個Layer並將layer新增到當前stack中，layer.path = path, layer.handler = route.dispatch方法
// 4. 然後呼叫之前返回的Route例項上的get 方法
// 5. 然後再看看之前layer的handler 也就是route.dispatch 方法 這個方法就是逐個呼叫layer的啟動方法，稍後會提到
route[method].apply(route, slice.call(arguments, 1));
return this;
};
});
複製程式碼Router.route 方法 -- 原始碼位置
Router.route = function route(path) {
// 3.1 生成Route例項 route初始化stack
// 3.2 同時route.methods = {}; 為了後期在匹配路徑的時候提升效率
var route = new Route(path);
var layer = new Layer(path, {
sensitive: this.caseSensitive,
strict: this.strict,
end: true
}, route.dispatch.bind(route));
layer.route = route;
this.stack.push(layer);
return route;
};
複製程式碼Route.get方法
methods.forEach(function(method){
// 4.1 同樣methods遍歷繫結方法
Route.prototype[method] = function(){
// handles 就是之前傳遞進來的handles method就是get
var handles = flatten(slice.call(arguments));
for (var i = 0; i < handles.length; i++) {
var handle = handles[i];
if (typeof handle !== 'function') {
var type = toString.call(handle);
var msg = 'Route.' + method + '() requires a callback function but got a ' + type
throw new Error(msg);
}
debug('%s %o', method, this.path)
// 遍歷handles 每次遍歷生成一個layer layer.path = '/' layer.handler = 當前的路由函式
var layer = Layer('/', {}, handle);
layer.method = method;
// route.methods['get'] = true;
this.methods[method] = true;
// 將layer推入當前stack
this.stack.push(layer);
}
return this;
};
});
複製程式碼app.use
app.use 方法 註冊中介軟體
app.use = function use(fn) {
var offset = 0;
var path = '/';
// 1.處理引數 初始化router
this.lazyrouter();
var router = this._router;
fns.forEach(function (fn) {
// 2.呼叫的是router.use 方法 path 預設 '/' fn
if (!fn || !fn.handle || !fn.set) {
return router.use(path, fn);
}
debug('.use app under %s', path);
fn.mountpath = path;
fn.parent = this;
router.use(path, function mounted_app(req, res, next) {
var orig = req.app;
fn.handle(req, res, function (err) {
setPrototypeOf(req, orig.request)
setPrototypeOf(res, orig.response)
next(err);
});
});
// mounted an app
fn.emit('mount', this);
}, this);
return this;
};
複製程式碼router.use 方法
proto.use = function use(fn) {
var offset = 0;
var path = '/';
// 2.1 處理引數
if (typeof fn !== 'function') {
var arg = fn;
while (Array.isArray(arg) && arg.length !== 0) {
arg = arg[0];
}
if (typeof arg !== 'function') {
offset = 1;
path = fn;
}
}
var callbacks = flatten(slice.call(arguments, offset));
if (callbacks.length === 0) {
throw new TypeError('Router.use() requires a middleware function')
}
// 2.2 遍歷中介軟體 向this.stack 加入layer layer.path = path layer.handle 就是中介軟體函式 layer.route = undefined
for (var i = 0; i < callbacks.length; i++) {
var fn = callbacks[i];
var layer = new Layer(path, {
sensitive: this.caseSensitive,
strict: false,
end: false
}, fn);
layer.route = undefined;
this.stack.push(layer);
}
return this;
};
複製程式碼初始化階段總結
- app._router 每次呼叫get或者post等方法都會生成一個對應path的route，同時，生成一個layer 這個layer上面的handle方法是遍歷對應這個route的所有方法的，其中的next方法就是呼叫 router.stack 中下一個layer的方法。
- 然後呼叫route的get或者post方法，route上的stack繼續掛載一個layer 的stack，這裡layer的handle方法就是對應傳遞進來的處理請求的方法，同時next就是呼叫當前 route.stack 中下一個layer的方法。
- app.use 呼叫router.use方法，不生成route，layer上的handle方法是呼叫router.stack中下一個layer的方法。
- 可能文字敘述有點不太清楚，看下圖片。
處理請求階段
app.listen方法
呼叫的是app.handle方法
app.handle = function handle(req, res, callback) {
var router = this._router;
var done = callback || finalhandler(req, res, {
env: this.get('env'),
onerror: logerror.bind(this)
});
if (!router) {
debug('no routes defined on app');
done();
return;
}
// 這裡的done就是一個錯誤控制函式
router.handle(req, res, done);
};
複製程式碼然後看看router.handle做了什麼，這裡程式碼太多，稍稍修改了一下，原始碼在這裡
proto.handle = function handle(req, res, out) {
var self = this;
var idx = 0;
var protohost = getProtohost(req.url) || ''
var removed = '';
var paramcalled = {};
var stack = self.stack;
var parentParams = req.params;
var parentUrl = req.baseUrl || '';
var done = restore(out, req, 'baseUrl', 'next', 'params');
// setup basic req values
req.baseUrl = parentUrl;
req.originalUrl = req.originalUrl || req.url;
next();
function next(err) {
// 錯誤處理 呼叫next('error')的時候
var layerError = err === 'route' ? null : err;
// 二級路由路徑處理
if (removed.length !== 0) {
req.baseUrl = parentUrl;
req.url = protohost + removed + req.url.substr(protohost.length);
removed = '';
}
// 跳到下一個路由
if (layerError === 'router') {
setImmediate(done, null)
return
}
// 遍歷完當前layer，然後呼叫done方法，就是呼叫上一層router.stack的下一個函式的方法
if (idx >= stack.length) {
setImmediate(done, layerError);
return;
}
var path = getPathname(req);
if (path == null) {
return done(layerError);
}
var layer;
var match;
var route;
while (match !== true && idx < stack.length) {
layer = stack[idx++];
match = matchLayer(layer, path);
route = layer.route;
if (match !== true) continue
if (!route) continue
if (layerError) {
match = false;
continue;
}
var method = req.method;
// 通過route的methods方法判斷是否有get或post方法
var has_method = route._handles_method(method);
if (!has_method && method !== 'HEAD') {
match = false;
continue;
}
}
if (match !== true) {
return done(layerError);
}
// 如果layer.route存在 就放在req.route上
if (route) {
req.route = route;
}
// 總之這裡就是呼叫layer.handle_request
// 記住這裡的next是呼叫router.stack裡的下一個路由或者中介軟體函式
req.params = self.mergeParams
? mergeParams(layer.params, parentParams)
: layer.params;
var layerPath = layer.path;
if(!layer.keys || layer.keys.length === 0 ) {
if(route){
layer.handle_request(req, res, next)
} else {
removed = layer.path;
req.url = req.url.slice(0,removed.length);
if(req.url == ''){
req.url = '/';
slashAdded = true;
}
layer.handle_request(req,res,next)
}
}
}
};
複製程式碼然後再看layer.handle_request方法
Layer.prototype.handle_request = function handle(req, res, next) {
var fn = this.handle;
if (fn.length > 3) {
// 函式的length就是函式形參的長度
return next();
}
fn(req, res, next);
};
複製程式碼呼叫layer.handle 還記得之前講的嗎，這裡如果是使用app.use ，這裡的handle就是傳遞進來的中介軟體函式，如果是app.get那就是呼叫的route.dispatch方法，就是讓之前app.get傳遞進去的函式逐個執行。
Route.dispatch方法
// 這裡的done就是router.stack 中的next函式了。
Route.prototype.dispatch = function dispatch(req, res, done) {
var idx = 0;
var stack = this.stack;
if (stack.length === 0) {
return done();
}
var method = req.method.toLowerCase();
if (method === 'head' && !this.methods['head']) {
method = 'get';
}
req.route = this;
next();
function next(err) {
if (err && err === 'route') {
return done();
}
if (err && err === 'router') {
return done(err)
}
var layer = stack[idx++];
if (!layer) {
return done(err);
}
if (layer.method && layer.method !== method) {
return next(err);
}
if (err) {
layer.handle_error(err, req, res, next);
} else {
layer.handle_request(req, res, next);
}
}
};
複製程式碼處理請求階段總結
總結起來就是一張圖。。。。。請一定原諒我的拙略畫技好嗎
感謝
以上，就是這篇文章的所有內容了，主要也就是講解一下express路由的原理，當然，express.Router 用的也是 proto物件，理解了這些，Router的道理也就自然就懂了，後續會將express的路由匹配原理也整理成一篇文章發出來，感謝各位看官。