nodejs模块学习之connect解析


Posted in NodeJs onJuly 05, 2017

nodejs 发展很快,从 npm 上面的包托管数量就可以看出来。不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来解决现实的问题。

知其然,并知其所以然这是程序员的天性。所以把常用的模块拿出来看看,看看高手怎么写的,学习其想法,让自己的技术能更近一步。

引言

express 是 nodejs 中最流行的 web 框架。express 中对 http 中的 request 和 response 的处理,还有以中间件为核心的处理流程,非常灵活,足以应对任何业务的需求。

而 connect 曾经是 express 3.x 之前的核心,而 express 4.x 已经把 connect 移除,在 express 中自己实现了 connect 的接口。可以说 connect 造就了 express 的灵活性。

因此,我很好奇,connect 是怎么写的。

争取把每一行代码都弄懂。

connect 解析

我们要先从 connect 的官方例子开始

var  connect = require( 'connect' ); 
 var  http = require( 'http' ); 
 var  app = connect(); 
 // gzip/deflate outgoing responses 

 var  compression = require( 'compression' ); 

 app.use(compression()); 

// store session state in browser cookie 

 var  cookieSession = require( 'cookie-session' ); 

 app.use(cookieSession({ 

    keys: [ 'secret1' ,  'secret2' ] 

 })); 

 // parse urlencoded request bodies into req.body 

 var  bodyParser = require( 'body-parser' ); 

 app.use(bodyParser.urlencoded({extended:  false })); 

 

 // respond to all requests 

 app.use( function (req, res){ 

   res.end( 'Hello from Connect!\n' ); 

 }); 


 //create node.js http server and listen on port 

 http.createServer(app).listen(3000);

从示例中可以看到一个典型的 connect 的使用:

var  app = connect() // 初始化 

 app.use( function (req, res, next) { 

    // do something 

 })

 // http 服务器,使用 

 http.createServer(app).listen(3000);

先倒着看,从调用的地方更能看出来,模块怎么使用的。我们就先从  http.createServer(app)  来看看。

从 nodejs doc 的官方文档中可以知,  createServer  函数的参数是一个回调函数,这个回调函数是用来响应  request  事件的。从这里看出,示例代码中  app  中函数签就是  (req, res) ,也就是说  app  的接口为  function (req, res) 。

但是从示例代码中,我们也可以看出  app  还有一个  use  方法。是不是觉得很奇怪,js 中函数实例上,还以带方法,这在 js 中就叫 函数对象,不仅能调用,还可以带实例变量。给个例子可以看得更清楚:

function  handle () { 
   function  app(req, res, next) { app.handle(req, res, next)} 
  app.handle =  function  (req, res, next) { 

    console.log( this ); 

   } 
  app.statck = []; 
   return  app; 

 } 
 var  app = handle(); 
 app()  // ==> { [Function: app] handle: [Function], stack: [] } 
 app.apply({})  // ==>{ [Function: app] handle: [Function], stack: [] }

可以看出:函数中的实例函数中的 this 就是指当前的实例,不会因为你使用 apply 进行环境改变。

其他就跟对象没有什么区别。

再次回到示例代码,因该可以看懂了,  connect  方法返回了一个函数,这个函数能直接调用,有 use 方法,用来响应 http 的 request 事件。

到此为此,示例代码就讲完了。 我们开始进入到 connect 模块的内部。

connect 只有一个导出方法。就是如下:

var  merge = require( 'utils-merge' ); 

 module.exports = createServer; 

 var  proto = {}; 

 function  createServer() { 

   // 函数对象,这个对象能调用,能加属性 

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

   merge(app, proto);  // ===等于调用 Object.assign 

   merge(app, EventEmitter.prototype);  // === 等于调用 Object.assign 

   app.route =  '/' ; 

   app.stack = []; 

   return  app; 

 }

从代码中可以看出,createServer 函数把 app 函数返回了,app 函数有三个参数,多了一个 next (这个后面讲),app函数把 proto 的方法合并了。还有 EventEmitter 的方法也合并了,还增加了 route 和 stack 的属性。

从前面代码来看,响应 request 的事件的函数,是 app.handle 方法。这个方法如下:

proto.handle =  function  handle(req, res, out) { 

   var  index = 0; 

   var  protohost = getProtohost(req.url) ||  '' ;  //获得 http://www.baidu.com 

   var  removed =  '' ; 

   var  slashAdded =  false ; 

   var  stack =  this .stack; 

 

   // final function handler 

   var  done = out || finalhandler(req, res, { 

    env: env, 

    onerror: logerror 

   });  // 接口 done(err); 

 

   // store the original URL 

   req.originalUrl = req.originalUrl || req.url; 

 

   function  next(err) { 

    if  (slashAdded) { 

     req.url = req.url.substr(1);  // 除掉 / 之后的字符串 

     slashAdded =  false ;  // 已经拿掉 

    } 

 

    if  (removed.length !== 0) { 

     req.url = protohost + removed + req.url.substr(protohost.length); 

     removed =  '' ; 

    } 

 

    // next callback 

    var  layer = stack[index++]; 

 

    // all done 

    if  (!layer) { 

     defer(done, err);  // 没有中间件,调用 finalhandler 进行处理,如果 err 有值,就返回 404 进行处理 

     return ; 

    } 

 

    // route data 

    var  path = parseUrl(req).pathname ||  '/' ; 

    var  route = layer.route; 

 

    // skip this layer if the route doesn't match 

    if  (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) { 

     return  next(err);  // 执行下一个 

    } 

 

    // skip if route match does not border "/", ".", or end 

    var  c = path[route.length]; 

    if  (c !== undefined && '/ ' !== c && ' . ' !== c) { 

     return next(err); // 执行下一个 

    } 

 

    // trim off the part of the url that matches the route 

    if (route.length !== 0 && route !== ' / ') { 

     removed = route; 

     req.url = protohost + req.url.substr(protohost.length + removed.length); 

 

     // ensure leading slash 

     if (!protohost && req.url[0] !== ' / ') { 

      req.url = ' /' + req.url; 

      slashAdded =  true ; 

     } 

    } 

 

    // call the layer handle 

    call(layer.handle, route, err, req, res, next); 

   } 

 

   next(); 

 };

代码中有相应的注释,可以看出,next 方法就是一个递归调用,不断的对比 route 是否匹配,如果匹配则调用 handle, 如果不匹配,则调用下一个 handle.

call 函数的代码如下:

function  call(handle, route, err, req, res, next) { 

   var  arity = handle.length; 

   var  error = err; 

   var  hasError = Boolean(err); 

 

   debug( '%s %s : %s' , handle.name ||  '<anonymous>' , route, req.originalUrl); 

 

   try  { 

    if  (hasError && arity === 4) { 

     // error-handling middleware 

     handle(err, req, res, next); 

     return ; 

    }  else  if  (!hasError && arity < 4) { 

     // request-handling middleware 

     handle(req, res, next); 

     return ; 

    } 

   }  catch  (e) { 

    // replace the error 

    error = e; 

   } 

 

   // continue 

   next(error); 

 }

可以看出一个重点:对错误处理,connect 的要求 是函数必须是 四个参数,而 express 也是如此。如果有错误, 中间件没有一个参数的个数是 4, 就会错误一直传下去,直到后面的  defer(done, err);  进行处理。

还有 app.use 添加中间件:

proto.use =  function  use(route, fn) { 

   var  handle = fn;  // fn 只是一个函数的话 三种接口 // 1. err, req, res, next 2. req, res, 3, req, res, next 

   var  path = route; 

 

   // default route to '/' 

   if  ( typeof  route !==  'string' ) { 

    handle = route; 

    path =  '/' ; 

   } 

 

   // wrap sub-apps 

   if  ( typeof  handle.handle ===  'function' ) {  // 自定义中的函数对象 

    var  server = handle; 

    server.route = path; 

    handle =  function  (req, res, next) {  // req, res, next 中间件 

     server.handle(req, res, next); 

    }; 

   } 

 

   // wrap vanilla http.Servers 

   if  (handle  instanceof  http.Server) { 

    handle = handle.listeners( 'request' )[0];  // (req, res) // 最后的函数 

   } 

 

   // strip trailing slash 

   if  (path[path.length - 1] ===  '/' ) { 

    path = path.slice(0, -1); 

   } 

 

   // add the middleware 

   debug( 'use %s %s' , path ||  '/' , handle.name ||  'anonymous' ); 

   this .stack.push({ route: path, handle: handle }); 

 

   return  this ; 

 };

从代码中,可以看出,use 方法添加中间件到 this.stack 中,其中 fn 中间件的形式有两种: function (req, res, next) 和 handle.handle(req, res, next) 这两种都可以。还有对 fn 情况进行特殊处理。

总的处理流程就是这样,用 use 方法添加中间件,用 next 编历中间件,用 finalHandle 进行最后的处理工作。

在代码中还有一个函数非常奇怪:

/* istanbul ignore next */ 

 var  defer =  typeof  setImmediate ===  'function' 

   ? setImmediate 

   :  function (fn){ process.nextTick(fn.bind.apply(fn, arguments)) }

defer  函数中的  fn.bind.apply(fn, arguments) ,这个方法主要解决了,一个问题,不定参的情况下,第一个参数函数,怎样拿到的问题,为什么这样说呢?如果中我们要达到以上的效果,需要多多少行代码?

function  () { 

    var  cb = Array.from(arguments)[0]; 

    var  args = Array.from(arguments).splice(1); 

    process.nextTick( function () { 

      cb.apply( null ,args); 

    }) 

 }

这还是 connect 兼容以前的 es5 之类的方法。如果在 es6 下面,方法可以再次简化

function (..args){ process.nextTick(fn.bind(...args)) }

总结

connect 做为 http 中间件模块,很好地解决对 http 请求的插件化处理的需求,把中间件组织成请求上的一个处理器,挨个调用中间件对 http 请求进行处理。

其中 connect 的递归调用,和对 js 的函数对象的使用,让值得学习,如果让我来写,就第一个调个的地方,就想不到使用 函数对象 来进行处理。

而且 next 的设计如此精妙,整个框架的使用和概念上,对程序员基本上没有认知负担,这才是最重要的地方。这也是为什么 express 框架最受欢迎。koa 相比之下,多几个概念,还使用了不常用的 yield 方法。

connect 的设计理念可以用在,类似 http 请求模式上, 如 rpc, tcp 处理等。

我把 connect 的设计方法叫做 中间件模式,对处理 流式模式,会有较好的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
Sep 26 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
nodejs基础之常用工具模块util用法分析
Dec 26 NodeJs
nodejs实现用户登录路由功能
May 22 NodeJs
nodejs中的异步编程知识点详解
Jan 17 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 #NodeJs
nodejs 子进程正确的打开方式
Jul 03 #NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 #NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 #NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 #NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 #NodeJs
NodeJS自定义模块写法(详解)
Jun 27 #NodeJs
You might like
PHP新手上路(十二)
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP简单遍历对象示例
2016/09/28 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
django 模型字段设置默认值代码
2020/07/15 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
机电一体化大学生求职信
2013/11/08 职场文书
信息管理员岗位职责
2013/12/01 职场文书
2014年党务公开方案
2014/05/08 职场文书
运动会口号大全
2014/06/07 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
工资证明格式模板
2015/06/12 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers
Linux中各个目录的作用与内容
2022/06/28 Servers