express源碼分析-路由

時間 2019-11-21

原文原文鏈接

簡介

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

初始化階段

首先先看下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 方法 -- 源碼位置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.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._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作了什麼，這裏代碼太多，稍稍修改了一下，源碼在這裏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);
    }
  }
};
複製代碼