前几天有空瞄了几眼express4.x的源码,今天做一下总结。 首先我会使用以下代码做为一个入口,开始
const express = require('express');const app = express();app.get('/',indexHandler)function indexHandler(req,res,next){res.set('Content-Type',"text/html;charset=utf-8");res.send(`<h1 style="color:red">hello world</h1>`)}app.listen(9999)
function createApplication() {var app = function(req, res, next) {app.handle(req, res, next);};mixin(app, EventEmitter.prototype, false);mixin(app, proto, false);// expose the prototype that will get set on requestsapp.request = Object.create(req, {app: { configurable: true, enumerable: true, writable: true, value: app }})// expose the prototype that will get set on responsesapp.response = Object.create(res, {app: { configurable: true, enumerable: true, writable: true, value: app }})app.init();return app;}
首先注意一下这个叫做app的函数,他既是我们本段代码的入口,也是http请求过来时要流过的第一个函数,然后下来的两个minxin,第一个是把EventEmitter.prototype中的所有属性合并到app上来,这样一来app就拥有了事件订阅和提交的功能,关于EventEmitter可以查看node官网的文档详情。 第二个minxin 是将一个叫做proto的东西合并到了app上,这个proto是在application.js文件里边,定义了app上的方法,诸如listen,enabled,disabled,set等等,这些方法可以在express官方文档这里看到。
下来,是定义了request,response,并分别在其上面用app属性引用了app,然后调用app.init()方法。
app.init = function init() {this.cache = {};this.engines = {};this.settings = {};this.defaultConfiguration();};
chache是于保存render时的结果的,engines是模板引擎,至于settings保存的是一些设置,诸如是否开启e-tag,x-powerd,还有响应头的一些字段。下来调用了defaultConfiguration。代码比较长,直接在源码里做注释了:
app.defaultConfiguration = function defaultConfiguration() {var env = process.env.NODE_ENV || 'development';// default settings/*添加头x-powered-by*/this.enable('x-powered-by');/* 设置etag> tips:ETag有两种类型:强ETag(strong ETag)与弱ETag(weak ETag)。强ETag表示形式:"22FAA065-2664-4197-9C5E-C92EA03D0A16"。弱ETag表现形式:w/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。具体的策略得看浏览器的不同实现*/this.set('etag', 'weak');/*设置环境变量,开发还是生产*/this.set('env', env);/* query解析函数,extendend策略下最终调用的是:qs.parse(str, {allowPrototypes: true});*/this.set('query parser', 'extended');/*访问req.subdomains时host用.分割成数组之后需要删除后边的数目是几个,举例: 默认为2,tobi.ferrets.example.com 的subdomains 就是["ferrets", "tobi"]*/this.set('subdomain offset', 2);/*是否信任代理,*/this.set('trust proxy', false);// trust proxy inherit back-compatObject.defineProperty(this.settings, trustProxyDefaultSymbol, {configurable: true,value: true});debug('booting in %s mode', env);/* 当一个子app 挂载到父app的时候会触发 */this.on('mount', function onmount(parent) {// inherit trust proxyif (this.settings[trustProxyDefaultSymbol] === true&& typeof parent.settings['trust proxy fn'] === 'function') {delete this.settings['trust proxy'];delete this.settings['trust proxy fn'];}// inherit protossetPrototypeOf(this.request, parent.request)setPrototypeOf(this.response, parent.response)setPrototypeOf(this.engines, parent.engines)setPrototypeOf(this.settings, parent.settings)});// setup localsthis.locals = Object.create(null);// top-most app is mounted at /this.mountpath = '/';// default localsthis.locals.settings = this.settings;// default configuration/* view为render的时候渲染模板的一个数据结构 */this.set('view', View);/* 模板目录,默认为views */this.set('views', resolve('views'));/* 设置jsonp 回调函数的名字*/this.set('jsonp callback name', 'callback');/*生产模式开启view缓存*/if (env === 'production') {this.enable('view cache');}/* 4.x不再支持app.router式的调用 */Object.defineProperty(this, 'router', {get: function() {throw new Error('\'app.router\' is deprecated!\nPlease see the 3.x to 4.x migration guide for details on how to update your app.');}});};
至此,app.init行完毕。 然后express函数返回app实例。
接着,我们使用app.get定义了我们的第一条路由,至于app.get的源码,是在这里:
// methods = ['get','post'...] 等一系列http动词methods.forEach(function(method){app[method] = function(path){if (method === 'get' && arguments.length === 1) {// app.get(setting)return this.set(path);}this.lazyrouter();var route = this._router.route(path);route[method].apply(route, slice.call(arguments, 1));return this;};});
app[method]向外引用,function,闭包了当前method的名字,这里注意到当以app.get(‘key’)形式调用的时候,程序实际return的是当前set[‘key’]的值。
如果是定义路由,则走了下面的步骤,首先会给当前的app实例初始化一个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));}};
这种如果没有再定义的策略,设计模式上叫单例模式,初次执行肯定没有,所以这里先会初始化一个rouer绑定到app._router上,caseSensitive 表示路由对大小写敏感,strict开启路由的严格模式,好,接着走到Router构造函数:
var proto = module.exports = function(options) {var opts = options || {};function router(req, res, next) {router.handle(req, res, next);}// mixin Router class functionssetPrototypeOf(router, proto)router.params = {};router._params = [];router.caseSensitive = opts.caseSensitive;router.mergeParams = opts.mergeParams;router.strict = opts.strict;router.stack = [];return router;};
router本身是一个函数,调用自身的而handle方法,传递http,setPrototypeOf 将router的__proto__属性指向proto,借此实现js式的继承,至于proto,也定义于此处,就是router的一系列方法,诸如param,handle,use等等。当然router也有自己的get,post等等方法,这些和app上定义的时候大同小异的,最后声明了几个保存变量的属性,将router返回了出来。初始化router完毕之后,router使用了两个中间件,第一个是parse query的,第二个中间件是用于初始化req和res的,他做了一件很重要的事就是将express框架的request和response 绑定到了当前的req和res上,部分代码如下:
setPrototypeOf(req, app.request)setPrototypeOf(res, app.response)
这些方法里边包含了很多东西,诸如req的属性,res的send,set等等。
lazyRouter执行完毕,然后执行router上的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;this.stack.push(layer);return route;};
Route是描述路由的一个数据结构,他的构造函数如下:
function Route(path) {this.path = path;this.stack = [];debug('new %o', path)// route handlers for various http methodsthis.methods = {};}
path属性包含了当前路由的path,stack是定义路由是用于保存定义路由时生成的layer的数组,至于methods,举一个例子就是当 route.get()发生时,那么this.methods.get的值就是true。
接着会生成layer,layer的构造函数如下:
function Layer(path, options, fn) {if (!(this instanceof Layer)) {return new Layer(path, options, fn);}debug('new %o', path)var opts = options || {};this.handle = fn;this.name = fn.name || '<anonymous>';this.params = undefined;this.path = undefined;this.regexp = pathRegexp(path, this.keys = [], opts);// set fast path flagsthis.regexp.fast_star = path === '*'this.regexp.fast_slash = path === '/' && opts.end === false}
这里边比较重要的一点是会将当前path转化成能匹配他的正则并把这个正则保存到this.regexp上,并且会把param参数在此处提取出来保存到this.keys上,还有一个handle属性保存在这个layer上执行的回调函数,以以上形式生成的layer上,其handle函数为route.dispatch.bind(route),这个函数是route实例上的方法,用于执行他的栈上保存的layer。然后layer生成完毕,此时的layer实例会将一个route属性指向当前的route,此刻,将这个layer保存到router的stacks里。
这里多提一句就是,router.use这种形式生成路由时layer上的route是undefined的,并且layer的handle就是传进去的回调函数。在后边router遍历自己stack上存储的layer时,正是基于此 判断他是中间件还是一个路由业务函数。
router.route执行完毕,接下来开始执行route[method].apply(route, slice.call(arguments, 1));, route[method]的定义方法,和app,router大同小异:
methods.forEach(function(method){Route.prototype[method] = function(){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 ' + typethrow new Error(msg);}debug('%s %o', method, this.path)var layer = Layer('/', {}, handle);layer.method = method;this.methods[method] = true;this.stack.push(layer);}return this;};});
route.get,post,…等方法也会生成layer,其handle就是定义的回调函数,然后这个layer会保存到route的stack里,在route的dispath方法里调用。
这样的话,route[method].apply(route, slice.call(arguments, 1));也就执行完毕了。至此,路由定义完毕。现在在这里梳理一下,app,router,route的关系:
此刻,app的内部属性_router上引用的router实例,他的stack上此刻应该有如下几个layer:
以上两个是初始化的时候就use的中间件,接下来是:
app,get 的时候为route创造的layer。 在app.get执行时,生成的route实例会在其stack上保存一个layer,该layer的handle就是我们定义的回调函数。
ok。下来app开始listen:
app.listen = function listen() {var server = http.createServer(this);return server.listen.apply(server, arguments);};
server还是使用http模块的createServer创造的, 只不过this指向的是app也就是开头我们提到的整个程序的入口,是个函数,接着用了函数的apply方法,将app.listen调用时传过去的参数使用arguments巧妙的传过去,并将server设置为listen的上下文。listen之后,app就开始正式运行了,监听了9999端口。
——————
当在浏览器上输入http://localhost:9999/ 时,首先,app会被执行,而app里只有一句话就是app.handle(req, res, next); 参数分别是request,response和next(在此时为undefined),所以我们继续往下看app.handle:
app.handle = function handle(req, res, callback) {var router = this._router;// final handlervar done = callback || finalhandler(req, res, {env: this.get('env'),onerror: logerror.bind(this)});// no routesif (!router) {debug('no routes defined on app');done();return;}router.handle(req, res, done);};
开始执行 router.handle并将done默认值作为next参数传递过去: 此处代码稍长,所以还是将解释放到源码里边。
function handle(req, res, out) {var self = this;debug('dispatching %s %s', req.method, req.url);var idx = 0;var protohost = getProtohost(req.url) || ''var removed = '';var slashAdded = false;var paramcalled = {};// store options for OPTIONS request// only used if OPTIONS requestvar options = [];// middleware and routesvar stack = self.stack;// manage inter-router variablesvar parentParams = req.params;var parentUrl = req.baseUrl || '';/*重置传进来的next方法,restore的作用是保存初始的baseUrl,next,params的值,该方法最后返回一个闭包函数,该闭包函数内req上的以上三个属性会被重置为初始值,然后调用out方法*/var done = restore(out, req, 'baseUrl', 'next', 'params');// setup next layerreq.next = next;// for options requests, respond with a default if nothing else respondsif (req.method === 'OPTIONS') {done = wrap(done, function(old, err) {if (err || options.length === 0) return old(err);sendOptionsResponse(res, options, old);});}// setup basic req valuesreq.baseUrl = parentUrl;req.originalUrl = req.originalUrl || req.url;/*开始执行next方法,遍历router.stack里的layer*/next();function next(err) {var layerError = err === 'route'? null: err;// remove added slashif (slashAdded) {req.url = req.url.substr(1);slashAdded = false;}// restore altered req.urlif (removed.length !== 0) {req.baseUrl = parentUrl;req.url = protohost + removed + req.url.substr(protohost.length);removed = '';}// signal to exit routerif (layerError === 'router') {setImmediate(done, null)return}// no more matching layersif (idx >= stack.length) {setImmediate(done, layerError);// 遍历完毕,则在check阶段执行done方法return;}// get pathname of requestvar path = getPathname(req);if (path == null) {return done(layerError);}// find next matching layervar layer;var match;var route;/* 循环的目的,找匹配的layer,如果找不到匹配的layer就一直将stack里的layer遍历完毕 */while (match !== true && idx < stack.length) {layer = stack[idx++];/*是否匹配*/match = matchLayer(layer, path);route = layer.route;if (typeof match !== 'boolean') {// hold on to layerErrorlayerError = layerError || match;}/*不匹配就开始下一轮循环*/if (match !== true) {continue;}/* 不是以app[method],router[method] 定义的路由就到此为止,跳出while,开始执行 */if (!route) {// process non-route handlers normallycontinue;}if (layerError) {// routes do not match with a pending errormatch = false;continue;}/*拿到http方法动词并判断是否为给出的动词*/var method = req.method;var has_method = route._handles_method(method);/* 如果不是已给出的方法动词,且为options,则在options数组里添加当前route.methods 的keys*/// build up automatic options responseif (!has_method && method === 'OPTIONS') {appendMethods(options, route._options());}// don't even bother matching route/*如果不是已给出的方法动词且不是head 则将match重置为false开始下一个循环*/if (!has_method && method !== 'HEAD') {match = false;continue;}}// no match/* while循环执行完毕之后,有两种结果,第一种匹配到了layer,则开始执行layer,第二种,没有匹配到则执行done方法,重置req对象 */if (match !== true) {/*没有匹配到,*/return done(layerError);}// store route for dispatch on change/*当前为路由形式的layer,也就是layer.route不为undefined的layer,req.route 指向route*/if (route) {req.route = route;}// Capture one-time layer values/*获取当前req的params*/req.params = self.mergeParams? mergeParams(layer.params, parentParams): layer.params;var layerPath = layer.path;// this should be done for the layer/*process_params方法,有layer匹配当前param的时候,至多执行一次app.params()定义的方法,这些方法执行完毕之后,才开始执行当前的layer,也就是调用layer.handle_request*/self.process_params(layer, paramcalled, req, res, function (err) {if (err) {return next(layerError || err);}if (route) {/*路由形式的layer这么执行*/return layer.handle_request(req, res, next);}/*非路由形式的layer执行前,需要调用trim_prefix方法,该方法会先验证当前layer的path是否合法,然后重新设置req.urlreq.baseUrl等一系列工作,然后调用layout的方法*/trim_prefix(layer, layerError, layerPath, path);});}function trim_prefix(layer, layerError, layerPath, path) {if (layerPath.length !== 0) {// Validate path breaks on a path separatorvar c = path[layerPath.length]if (c && c !== '/' && c !== '.') return next(layerError)// Trim off the part of the url that matches the route// middleware (.use stuff) needs to have the path strippeddebug('trim prefix (%s) from url %s', layerPath, req.url);removed = layerPath;req.url = protohost + req.url.substr(protohost.length + removed.length);// Ensure leading slashif (!protohost && req.url[0] !== '/') {req.url = '/' + req.url;slashAdded = true;}// Setup base URL (no trailing slash)req.baseUrl = parentUrl + (removed[removed.length - 1] === '/'? removed.substring(0, removed.length - 1): removed);}debug('%s %s : %s', layer.name, layerPath, req.originalUrl);if (layerError) {layer.handle_error(layerError, req, res, next);} else {layer.handle_request(req, res, next);}}};
下来开始说layout的执行方法,首先对于正常的layer执行layer.handle_request(req, res, next)方法,其中next就是next函数,由于循环变量idx置于next函数外边,因此开始执行此函数就意味着开始寻找下一个匹配的layer。
Layer.prototype.handle_request = function handle(req, res, next) {var fn = this.handle;if (fn.length > 3) {// not a standard request handlerreturn next();}try {fn(req, res, next);} catch (err) {next(err);}};
由上面可以看到如果当前layer的handle的形参大于3就会出错,直接执行下一个layer,如果正确的话,则调用我们传递给他的回调函数。 handle在前面详细说过这里就不提了。
当执行完pase query,以及init 两个中间件之后,开始执行第三个我们定义的route,只不过这里的执行过程是 layer.handle -> router.dispatch -> 遍历route.stack里的layer执行,遍历的流程跟router上的差不多,然后最后就是执行:
function indexHandler(req,res,next){res.set('Content-Type',"text/html;charset=utf-8");res.send(`<h1 style="color:red">hello world</h1>`)}
res的set使用来设置响应头的,各种响应头,至于send,除了为我们写了一些头还判断了http缓存逻辑,最后调用res.end()方法,将我们的<h1 style="color:red">hello world</h1> 返回给了客户端,剩下的工作是一些异步工作,诸如tcp挥手,node自己内部的一些方法,俺也没多做了解,就不展开讲了。至此hello world完成。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号