Express是Node.js 的web開發框架,很受歡迎,這篇文章主要從源碼來分析 express的路由以及中間件是如何初始化及工做的。git
下面來先看下用法github
// 示例
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 的時候,看下輸出了什麼web
下面一塊兒來看下源碼,研究一下其中的原理究竟如何express
// 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 方法 -- 源碼位置api
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
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.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作了什麼,這裏代碼太多,稍稍修改了一下,源碼在這裏post
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的路由匹配原理也整理成一篇文章發出來,感謝各位看官。