express中间件原理解析

要说起express的中间件，就先得说起app.use,app.get,app.post的用法开始。
app为express产生的实例。

var express = require('express');
var app = express();

主要的实现原理就是先生成一个实例，然后将use，get，post等方法存到一个数组当中，判断第一个参数是不是字符串类型，是的话就是路由，不是的话就以'/'结束。然后将其归类，全部的方法存放到get，use，post等数组里面。再根据访问的地址逐一执行，而最核心的点就是next()方法了。因为只有在next()之后，才会真正的执行下一步，没有的话就直接跳出了。

// 在任何位置都执行
app.use(cookieParser());
// 只作用在users的路径上
app.use('/users', usersRouter);

1.创建并导出

主体框架就是导出一个函数，当执行函数的时候返回一个实例，正好和app = express()相对应。

class LikeExpress {
}

module.exports = () => {
  return new LikeExpress()
}

2.编写use,get,post等方法

主要都是要先处理各个参数，所以将公共的部分放入register中，主要就是检测是否有路径，有则直接放入info.path中作为后面的筛选使用，没有则直接以'/'放入path.info当中。并将剩下的参数转换成数组放入info.stack当中。其他方法类似。

// class内部
register(path) {
    const info = {}
    const slice = Array.prototype.slice
    if (typeof path === 'string') {
      info.path = path
      // 第一个参数是路径，就需要从第二个参数开始将方法放入数组中
      info.stack = slice.call(arguments, 1) // 数组
    } else {
      info.path = '/'
      info.stack = slice.call(arguments, 0)
    }
    return info
}

use() {
    const info = this.register.apply(this, marguments)
    this.routes.all.push(info)
  }
get() {
    const info = this.register.apply(this, marguments)
    this.routes.get.push(info)
 }

3.监听程序

express中能通过app.listen()就直接启动程序，并进行监听。主要就是将http.createServer()放入到了程序中。

  const http = require('http')
  listen(...args) {
    const server = http.createServer(this.callback)
    server.listen(...args)
  }

而在回调函数中，主要就是筛选出哪些是该路径下需要执行的方法，放入一个数组中，然后再逐一执行

callback() {
    return (req, res) => {
      res.json = data => {
        res.setHeader('Content-type', 'application/json')
        res.end(JSON.stringify(data))
      }
      const method = req.method
      const url = req.url
      const routeList = this.match(method, url)
      this.handle(req, res, routeList)
    }
  }
// 主要是为了筛选出哪些是符合该访问路径下的方法，然后放入一个数组中
match(method, url) {
    const stack = []
    // 浏览器发送的图标请求，需要忽略
    if (url === '/favicon.ico') {
      return stack
    }
    let routes = [].concat(this.routes.all)
    routes = routes.concat(thsi.routes[method])
    routes.forEach(routeInfo => {
      if (url.indexOf(routeInfo.path) === 0) {
        stack = stack.concat(routeInfo.stack)
      }
    })
    return stack
  }

4.核心方法和next机制

在express中，next()的执行，会直接到下一个中间件，而如果不写，则不会执行下一个中间件。
主要就是将筛选出来的方法，放入next函数中，每次取出一个方法来执行，在方法内部只有调用了next()才会再往下执行，而如果没有next则不会往下执行。

 handle(req, res, stack) {
    const next = () => {
      let middleware = stack.shift()
      if (middleware) {
        middleware(req, res, stack)
      }
    }
    next()
 }

5.总结

middleware的代码原理80行左右就写得差不多了，说难不是很难，但不难又感觉有点绕。
主要就是收集所有的方法和路径放在里面，然后根据路径来判断哪些方法是需要执行的，最后执行筛选出来的方法，有next的就继续往下，没有就返回给浏览器。