express原始碼分析-路由

awesome23發表於2019-04-17
Express原始碼路由

簡介

Express是Node.js 的web開發框架，很受歡迎，這篇文章主要從原始碼來分析 express的路由以及中介軟體是如何初始化及工作的。

下面來先看下用法

// 示例
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 的時候，看下輸出了什麼

下面一起來看下原始碼，研究一下其中的原理究竟如何

初始化階段

首先先看下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 方法 -- 原始碼位置

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.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的方法。
  • 可能文字敘述有點不太清楚，看下圖片。

express原始碼分析-路由

處理請求階段

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做了什麼，這裡程式碼太多，稍稍修改了一下，原始碼在這裡

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路由的原理，當然，express.Router 用的也是 proto物件，理解了這些，Router的道理也就自然就懂了，後續會將express的路由匹配原理也整理成一篇文章發出來，感謝各位看官。

相關文章