Express中间件的原理及实现

在express中都是会用到中间件这个东西，下面模仿下express是如何实现中间件的

我们正常的写法都是

const express = require('express');
const app = express();
const xxx = require('xxx')

app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.ues(xxx)
app.listen(3000);

　　

只要用use就可以搞定了

如果说我们自己实现一个中间件就是下面这个样子的，官网也有中间件的介绍

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

const myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

app.use(myLogger);

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

　　

这里可以看到只要你运行了之后访问 localhost:3000控制台就会打印出 'LOGGED'  然后在网页中显示 Hello World!

下面我们模仿下原理

const http = require('http');
const  express = () => {
    let funcs = []; // 待执行的函数数组 形成了闭包
    let app = function (req, res) {
        let i = 0;
        const next = () => {
            let task = funcs[i++];  // 取出函数数组里的下一个函数
            if (!task) {    // 如果函数不存在,return
                return;
            }
            task(req, res, next);   // 否则,执行下一个函数
        }

        next();
    }

    // use方法就是把函数添加到函数数组中
    app.use = function (task) {
        funcs.push(task);
    }
    return app;    // 返回实例
}

// 测试
let app = express();
http.createServer(app).listen('3000', function () {
    console.log('listening 3000....');
});
const middleware1 = (req, res, next) => {
    console.log('返回之前 middleware1');
    next();
    console.log('返回之后 middleware1');
}
const middleware2 = (req, res, next) => {
    console.log('返回之前 middleware2');
    next();
    console.log('返回之后 middleware2');
}

const middleware3 = (req, res, next) => {
    console.log('返回之前 middleware3');
    next();
    console.log('返回之后 middleware3');
}

app.use(middleware1);
app.use(middleware2);
app.use(middleware3);