console.log(‘three’);
next();
}, (req, res) => {
console.log(‘four’);
res.end(‘four’);
})
app.listen(3000);
- Application
表示一个Express应用,通过express()即可进行创建。
- Router
路由系统,用于调度整个系统的运行,在上述代码中该路由系统包含app.get(‘/test1’,……)和app.get(‘/test2’,……)两大部分
- Layer
代表一层,对于上述代码中app.get(‘/test1’,……)和app.get(‘/test2’,……)都可以成为一个Layer
- Route
一个Layer中会有多个处理函数的情况,这多个处理函数构成了Route,而Route中的每一个函数又成为Route中的Layer。对于上述代码中,app.get(‘/test1’,……)中的两个函数构成一个Route,每个函数又是Route中的Layer。
了解完上述概念后,结合该幅图,就大概能对整个流程有了直观感受。首先启动服务,然后客户端发起了http://localhost:3000/test2的请求,该过程应该如何运行呢?
- 启动服务时会依次执行程序,将该路由系统中的路径、请求方法、处理函数进行存储(这些信息根据一定结构存储在Router、Layer和Route中)
- 对相应的地址进行监听,等待请求到达。
- 请求到达,首先根据请求的path去从上到下进行匹配,路径匹配正确则进入该Layer,否则跳出该Layer。
- 若匹配到该Layer,则进行请求方式的匹配,若匹配方式匹配正确,则执行该对应Route中的函数。
上述解释的比较简单,后续会在细节部分进一步阐述。
三、体会细节
通过上述对Express设计原理的分析,下面将从两个方面做进一步的源码解读,下面流程图是一个常见的Express项目的过程,首先会进行app实例初始化、然后调用一系列中间件,最后建立监听。对于整个工程的运行来说,主要分为两个阶段:初始化阶段、请求处理阶段,下面将以app.get()为例来阐述一下该核心细节。
3.1 初始化阶段
下面利用app.get()这个路由来了解一下工程的初始化阶段。
- 首先来看一下app.get()的内容(源代码中app.get()是通过遍历methods的方式产生)
app.get = function(path){
// ……
this.lazyrouter();
var route = this._router.route(path);
route.get.apply(route, slice.call(arguments, 1));
return this;
};
- 在app.lazyrouter()会完成router的实例化过程
app.lazyrouter = function lazyrouter() {
if (!this._router) {
this._router = new Router({
caseSensitive: this.enabled(‘case sensitive routing’),
strict: this.enabled(‘strict routing’)
});
// 此处会使用一些中间件
this._router.use(query(this.get(‘query parser fn’)));
this._router.use(middleware.init(this));
}
};
注意:该过程中其实是利用了单例模式,保证整个过程中获取router实例的唯一性。
- 调用router.route()方法完成layer的实例化、处理及保存,并返回实例化后的route。(注意源码中是proto.route)
router.prototype.route = function route(path) {
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;// 把route放到layer上
this.stack.push(layer); // 把layer放到数组中
return route;
};
- 将该app.get()中的函数存储到route的stack中。(注意源码中也是通过遍历method的方式将get挂载到route的prototype上)
Route.prototype.get = function(){
var handles = flatten(slice.call(arguments));
for (var i = 0; i < handles.length; i++) {
var handle = handles[i];
// ……
// 给route添加layer,这个层中需要存放方法名和handler
var layer = Layer(‘/’, {}, handle);
layer.method = method;
this.methods[method] = true;
this.stack.push(layer);
}
return this;
};
注意:上述代码均删除了源码中一些异常判断逻辑,方便读者看清整体框架。
通过上述的分析,可以看出初始化阶段主要做了两件事情:
- 将路由处理方式(app.get()、app.post()……)、app.use()等划分为路由系统中的一个Layer。
- 对于每一个层中的处理函数全部存储至Route对象中,一个Route对象与一个Layer相互映射。
3.2 请求处理阶段
当服务启动后即进入监听状态,等待请求到达后进行处理。
- app.listen()使服务进入监听状态(实质上是调用了http模块)
app.listen = function listen() {
var server = http.createServer(this);
return server.listen.apply(server, arguments);
};
- 当连接建立会调用app实例,app实例中会立即执行app.handle()函数,app.handle()函数会立即调用路由系统的处理函数router.handle()
app.handle = function handle(req, res, callback) {
var router = this._router;
// 如果路由系统中处理不了这个请求,就调用done方法
var done = callback || finalhandler(req, res, {
env: this.get(‘env’),
onerror: logerror.bind(this)
});
//……
router.handle(req, res, done);
};
- router.handle()主要是根据路径获取是否有匹配的layer,当匹配到之后则调用layer.prototype.handle_request()去执行route中内容的处理
router.prototype.handle = function handle(req, res, out) {
// 这个地方参数out就是done,当所有都匹配不到,就从路由系统中出来,名字很形象
var self = this;
// ……
var stack = self.stack;
// ……
next();
function next(err) {
// ……
// get pathname of request
var path = getPathname(req);
// find next matching layer
var layer;
var match;
var route;
while (match !== true && idx < stack.length) {
layer = stack[idx++];
match = matchLayer(layer, path);
route = layer.route;
// ……
}
// no match
if (match !== true) {
return done(layerError);
}
// ……
// Capture one-time layer values
req.params = self.mergeParams
-
? mergeParams(layer.params, parentParams)
- layer.params;
var layerPath = layer.path;
// this should be done for the layer
self.process_params(layer, paramcalled, req, res, function (err) {
if (err) {
return next(layerError || err);
}
if (route) {
return layer.handle_request(req, res, next);
}
trim_prefix(layer, layerError, layerPath, path);
});
}
function trim_prefix(layer, layerError, layerPath, path) {
最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】