express源码阅读记 -- 当一个hello worle 渲染到前端界面的时候express做了什么

前几天有空瞄了几眼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)

从第5行代码开始看起，先翻到源码：

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 requests
  app.request = Object.create(req, {
    app: { configurable: true, enumerable: true, writable: true, value: app }
  })
  // expose the prototype that will get set on responses
  app.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-compat
  Object.defineProperty(this.settings, trustProxyDefaultSymbol, {
    configurable: true,
    value: true
  });
  debug('booting in %s mode', env);
  /* 当一个子app 挂载到父app的时候会触发 */
  this.on('mount', function onmount(parent) {
    // inherit trust proxy
    if (this.settings[trustProxyDefaultSymbol] === true
      && typeof parent.settings['trust proxy fn'] === 'function') {
      delete this.settings['trust proxy'];
      delete this.settings['trust proxy fn'];
    }
    // inherit protos
    setPrototypeOf(this.request, parent.request)
    setPrototypeOf(this.response, parent.response)
    setPrototypeOf(this.engines, parent.engines)
    setPrototypeOf(this.settings, parent.settings)
  });
  // setup locals
  this.locals = Object.create(null);
  // top-most app is mounted at /
  this.mountpath = '/';
  // default locals
  this.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 functions
  setPrototypeOf(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 methods
  this.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 flags
  this.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 ' + type
        throw 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：

• 用于parse query的中间件；
• 用于初始化req，res的init中间件；

以上两个是初始化的时候就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 handler
  var done = callback || finalhandler(req, res, {
    env: this.get('env'),
    onerror: logerror.bind(this)
  });
  // no routes
  if (!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 request
  var options = [];
  // middleware and routes
  var stack = self.stack;
  // manage inter-router variables
  var parentParams = req.params;
  var parentUrl = req.baseUrl || '';
  /*重置传进来的next方法，restore的作用是保存初始的baseUrl，next，params的值，该方法最后返回
 一个闭包函数，该闭包函数内req上的以上三个属性会被重置为初始值，然后调用out方法
  */
  var done = restore(out, req, 'baseUrl', 'next', 'params');
  // setup next layer
  req.next = next;
  // for options requests, respond with a default if nothing else responds
  if (req.method === 'OPTIONS') {
    done = wrap(done, function(old, err) {
      if (err || options.length === 0) return old(err);
      sendOptionsResponse(res, options, old);
    });
  }
  // setup basic req values
  req.baseUrl = parentUrl;
  req.originalUrl = req.originalUrl || req.url;
  /*开始执行next方法，遍历router.stack里的layer*/
  next();
  function next(err) {
    var layerError = err === 'route'
      ? null
      : err;
    // remove added slash
    if (slashAdded) {
      req.url = req.url.substr(1);
      slashAdded = false;
    }
    // restore altered req.url
    if (removed.length !== 0) {
      req.baseUrl = parentUrl;
      req.url = protohost + removed + req.url.substr(protohost.length);
      removed = '';
    }
    // signal to exit router
    if (layerError === 'router') {
      setImmediate(done, null)
      return
    }
    // no more matching layers
    if (idx >= stack.length) {
      setImmediate(done, layerError);
      // 遍历完毕，则在check阶段执行done方法
      return;
    }
    // get pathname of request
    var path = getPathname(req);
    if (path == null) {
      return done(layerError);
    }
    // find next matching layer
    var 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 layerError
        layerError = layerError || match;
      }
        /*不匹配就开始下一轮循环*/
      if (match !== true) {
        continue;
      }
        /* 不是以app[method],router[method] 定义的路由就到此为止，跳出while，开始执行 */
      if (!route) {
        // process non-route handlers normally
        continue;
      }
      if (layerError) {
        // routes do not match with a pending error
        match = false;
        continue;
      }
      /*拿到http方法动词并判断是否为给出的动词*/
      var method = req.method;
      var has_method = route._handles_method(method);
      /* 如果不是已给出的方法动词，且为options，则在options数组里添加当前route.methods 的keys*/
      // build up automatic options response
      if (!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 separator
      var 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 stripped
      debug('trim prefix (%s) from url %s', layerPath, req.url);
      removed = layerPath;
      req.url = protohost + req.url.substr(protohost.length + removed.length);
      // Ensure leading slash
      if (!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 handler
    return 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完成。