express中间件,了解一下

栏目: Node.js · 发布时间: 5年前

内容简介:首先从建立一个文件启动服务器,通过访问

首先从 github 上下载 express 源码。

建立一个文件 test.js 文件,引入根目录的 index.js 文件,实例化 express ,启动服务器。

let express = require('../index.js');
let app = express()

function middlewareA(req, res, next) {
  console.log('A1');
  next();
  console.log('A2');
}

function middlewareB(req, res, next) {
  console.log('B1');
  next();
  console.log('B2');
}

function middlewareC(req, res, next) {
  console.log('C1');
  next();
  console.log('C2');
}

app.use(middlewareA);
app.use(middlewareB);
app.use(middlewareC);

app.listen(8888, () => {
  console.log("服务器已经启动访问http://127.0.0.1:8888");
})

复制代码

启动服务器,通过访问 http://127.0.0.1:8888 服务,打开终端,看看终端日志执行顺序。

express中间件,了解一下

从日志我们可以看出,每次 next() 之后,都会按照顺序依次调用下中间件函数,然后按照执行顺序依次打印 A1,B1,C1 ,此时中间件已经调用完成,再依次打印 C2,B2,A2

目录结构

--lib
    |__ middleware
        |__ init.js
        |__ query.js
    |__ router
        |__ index.js
        |__ layer.js
        |__ route.js
    |__ application.js
    |__ express.js
    |__ request.js
    |__ response.js
    |__ utils.js
    |__ view.js

复制代码

通过实例化的express,我们可以看到, index.js 文件实际上是暴露出 lib/express 的文件。

实例化express

express ,通过 mixin 继承appLication,同时初始化application。

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;
}

复制代码

而mixin是 merge-descriptors npm模块。 Merge objects using descriptors.

打开 application.js 文件,发现 express 的实例化源自 var app = exports = module.exports = {}

进一步搜索 app.use ,找到 app.use ,而 app.use 又只是向应用程序路由器添加中间件的 Proxy

/**
 * Proxy `Router#use()` to add middleware to the app router.
 * See Router#use() documentation for details.
 *
 * If the _fn_ parameter is an express app, then it will be
 * mounted at the _route_ specified.
 *
 * @public
 */

app.use = function use(fn) {
  var offset = 0;
  var path = '/';

  // 默认path 为 '/'
  // app.use([fn])
  //判断app.use传进来的是否是函数
  if (typeof fn !== 'function') {
    var arg = fn;

    while (Array.isArray(arg) && arg.length !== 0) {
      arg = arg[0];
    }

    // 第一个参数是路径
    //取出第一个参数,将第一个参数赋值给path。
    if (typeof arg !== 'function') {
      offset = 1;
      path = fn;
    }
  }
  //slice.call(arguments,offset),通过slice转为数据,slice可以改变具有length的类数组。
  //arguments是一个类数组对象。
  
  //处理多种中间件使用方式。
  // app.use(r1, r2);
  // app.use('/', [r1, r2]);
  // app.use(mw1, [mw2, r1, r2], subApp);
  
  var fns = flatten(slice.call(arguments, offset));//[funtion]

  //抛出错误
  if (fns.length === 0) {
    throw new TypeError('app.use() requires a middleware function')
  }

  //设置router
  this.lazyrouter();
  var router = this._router;

  fns.forEach(function (fn) {
    // 处理不是express的APP应用的情况,直接调用route.use。
    if (!fn || !fn.handle || !fn.set) {
    //path default to '/'
      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);
      });
    });

    // app mounted 触发emit
    fn.emit('mount', this);
  }, this);

  return this;
};


复制代码

定义默认参数 offerpath 。然后处理 fn 形参不同类型的情况。将不同类型的中间件使用方式的形参转为扁平化数组,赋值给 fns

forEach 遍历fns,判断如果 fnfn.handlefn.set 参数不存在,return出去 router.use(path, fn)

否则继续执行 router.use

调用 handle 函数,执行中间件。

代码如下:

/**
*将一个req, res对分派到应用程序中。中间件执行开始。
*如果没有提供回调,则默认错误处理程序将作出响应
*在堆栈中冒泡出现错误时。
*/
app.handle = function handle(req, res, callback) {
  var router = this._router;

  // 最后报错处理error。
  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。

从上述代码中可以知道, app.use 的作用实际上是将各种应用函数传递给 router 的一个中间层代理。

而且,在app.use中有调用 this.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')));
    //初始化router
    this._router.use(middleware.init(this));
  }
};

复制代码

这里对 Router 进行了实例化,同时设置基本的 optioncaseSensitive 是否区分大小写, strict 是否设置严格模式。

express中间件,了解一下

Router 初始化如下:

/**
 * 用给定的“选项”初始化一个新的“路由器”。
 * 
 * @param {Object} [options] [{ caseSensitive: false, strict: false }]
 * @return {Router} which is an callable function
 * @public
 */

var proto = module.exports = function(options) {

  var opts = options || {};

  function router(req, res, next) {
    router.handle(req, res, next);
  }

  // 混合路由器类函数
  setPrototypeOf(router, proto)

  router.params = {};
  router._params = [];
  router.caseSensitive = opts.caseSensitive;
  router.mergeParams = opts.mergeParams;
  router.strict = opts.strict;
  router.stack = [];

  return router;
};

复制代码

调用 app.use 时,参数都会传递给 router.use ,因此,打开 router/index.js 文件,查找 router.use

/**
*使用给定的中间件函数,具有可选路径,默认为“/”。
* Use(如' .all ')将用于任何http方法,但不会添加
*这些方法的处理程序,所以选项请求不会考虑“。use”
*函数,即使它们可以响应。
*另一个区别是_route_ path被剥离,不可见
*到处理程序函数。这个特性的主要作用是安装
*无论“前缀”是什么,处理程序都可以在不更改任何代码的情况下操作
*路径名。
 *
 * @public
 */

proto.use = function use(fn) {
  var offset = 0;
  var path = '/';

  // 默认路径  '/'
  // 消除歧义 router.use([fn])
  // 判断是否是函数
  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;
    }
  }

  //将arguments转为数组,然后扁平化多维数组
  var callbacks = flatten(slice.call(arguments, offset));

  //如果callbacks内没有传递函数,抛错
  if (callbacks.length === 0) {
    throw new TypeError('Router.use() requires a middleware function')
  }

  //循环callbacks数组
  for (var i = 0; i < callbacks.length; i++) {
    var fn = callbacks[i];
    
    if (typeof fn !== 'function') {
      throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
    }

    //解析下query和expressInit的含义
    // 添加中间件
    //匿名 anonymous 函数
    debug('use %o %s', path, fn.name || '<anonymous>')

    var layer = new Layer(path, {
      sensitive: this.caseSensitive, //敏感区分大小写 //默认为false
      strict: false, //严格
      end: false //结束
    }, fn);

    layer.route = undefined;
    this.stack.push(layer);
  }

  return this;
}

复制代码

router.use 的主要作用就是将从 app.use 中传递过来的函数,通过 Layer 实例化的处理,添加一些 处理错误处理请求 的方法,以便后续调用处理。同时将传递过来的 path ,通过 path-to-regexp 模块把路径转为正则表达式( this.regexp ),调用 this.regexp.exec(path) ,将参数提取出来。

Layer 代码较多,这里不贴代码了,可以参考 express/lib/router/layer.js

处理中间件。

处理中间件就是将放入 this,stacknew Layout([options],fn) ,拿出来依次执行。

proto.handle = function handle(req, res, out) {
  var self = this;

  debug('dispatching %s %s', req.method, req.url);

  var idx = 0;
  //获取协议与URL地址
  var protohost = getProtohost(req.url) || ''
  var removed = '';
  //是否添加斜杠
  var slashAdded = false;
  var paramcalled = {};

  //存储选项请求的选项
  //仅在选项请求时使用
  var options = [];

  // 中间件和路由
  var stack = self.stack;
  // 管理inter-router变量
  //req.params 请求参数
  var parentParams = req.params;
  var parentUrl = req.baseUrl || '';
  var done = restore(out, req, 'baseUrl', 'next', 'params');

  // 设置下一层
  req.next = next;

  // 对于选项请求,如果没有其他响应,则使用默认响应
  if (req.method === 'OPTIONS') {
    done = wrap(done, function(old, err) {
      if (err || options.length === 0) return old(err);
      sendOptionsResponse(res, options, old);
    });
  }

  // 设置基本的req值
  req.baseUrl = parentUrl;
  req.originalUrl = req.originalUrl || req.url;

  next();

  function next(err) {
    var layerError = err === 'route'
      ? null
      : err;

    //是否添加斜线 默认false
    if (slashAdded) {
      req.url = req.url.substr(1);
      slashAdded = false;
    }

    // 恢复改变req.url
    if (removed.length !== 0) {
      req.baseUrl = parentUrl;
      req.url = protohost + removed + req.url.substr(protohost.length);
      removed = '';
    }

    // 出口路由器信号
    if (layerError === 'router') {
      setImmediate(done, null)
      return
    }

    // 不再匹配图层
    if (idx >= stack.length) {
      setImmediate(done, layerError);
      return;
    }

    // 获取路径pathname
    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++];
      //try layer.match(path) catch err
      //搜索 path matchLayer有两种状态一种是boolean,一种是string。
      match = matchLayer(layer, path);
      route = layer.route;

      if (typeof match !== 'boolean') {
        layerError = layerError || match;
      }

      if (match !== true) {
        continue;
      }

      if (!route) {
        //正常处理非路由处理程序
        continue;
      }

      if (layerError) {
        // routes do not match with a pending error
        match = false;
        continue;
      }

      var method = req.method;
      var has_method = route._handles_method(method);

      // build up automatic options response
      if (!has_method && method === 'OPTIONS') {
        appendMethods(options, route._options());
      }

      // don't even bother matching route
      if (!has_method && method !== 'HEAD') {
        match = false;
        continue;
      }
    }

    // no match
    if (match !== true) {
      return done(layerError);
    }

    //重新赋值router。
    if (route) {
      req.route = route;
    }

    // 合并参数
    req.params = self.mergeParams
      ? mergeParams(layer.params, parentParams)
      : layer.params;
      
    var layerPath = layer.path;

    // 处理参数
    self.process_params(layer, paramcalled, req, res, function (err) {
      if (err) {
        return next(layerError || err);
      }

      if (route) {
        return layer.handle_request(req, res, next);
      }

    // 处理req.url和layerPath,同时对layer中的请求error和handle_error加tryCatch处理。
      trim_prefix(layer, layerError, layerPath, path);
    });
  }

复制代码

执行 proto.handle 中间件也就的 while 循环中的一些核心代码,每次调用 app.use 中的回调函数中的 next() 都会让 idx 加一,将 stack[idx++]; 赋值给 layer ,调用一开始说到的 layer.handle_request ,然后调用 trim_prefix(layer, layerError, layerPath, path) ,添加一些报错处理。

trim_prefix 函数如下:

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)

      // //删除url中与路由匹配的部分
      // 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;
      }

      // 设置 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);
    }
  }
};

复制代码

总结

以上就是通过 app.use 调用之后,一步步执行中间件函数 router.handle

next 核心代码很简单,但是需要考虑的场景却是很多,通过这次源码阅读,更能进一步的理解express的核心功能。

虽说平常做项目用到 express 框架很少,或者可以说基本不用,一般都是用 Koa 或者 Egg ,可以说基本上些规模的场景的项目用的都是 Egg

但是不可否认得是, express 框架还是一款非常经典的框架。

以上代码纯属个人理解,如有不合适的地方,望在评论区留言。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

技术元素

技术元素

[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库/电子工业出版社 / 2012-5 / 55.00元

我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中,这样我就能知道自己到底在想些什么。——KK “技术元素”(technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术(例如汽车、雷达和计算机等),它还包括文化、 法律、社会机构和所有的智能创造物。”简而言之,技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看 《技术元素》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码