86 # express 基本实现

koa 和 express 的区别

• koa 内部原理使用 es6 来编写的（promise async + await），express 是使用 es5 来编写的，内部是基于回调函数来实现
• express 内置了很多中间件（功能会比 koa 强大一些，内部集成了路由，静态服务，模板引擎）
• express 本身会大一些，koa 主要关注的是核心（use）
• koa（基于 promise） 和 express（基于回调） 中间件有一些差异，错误处理也不一样
• webpack-dev-server 内部使用的是 express
• 开发人员是同一波，应用层面来说基本一致
• koa 的 ctx 上下文有 （req，res，request，response），而 express 直接对 res 和 req 进行了拓展

安装 express

npm init -y
npm i express
1
2

编写一个 express demo

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

// 调用回调时 会将原生的 req 和 res 传入（req，res 在内部也被扩展了）
// 内部不会将回调函数包装成 promise
app.get("/", (req, res) => {
    res.end("ok");
});

app.get("/add", (req, res) => {
    res.end("add");
});

app.listen(3000, () => {
    console.log(`server start 3000`);
    console.log(`在线访问地址：http://localhost:3000/`);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

express 源码目录结构

├── index.js：入口文件，没有 main 入口，默认通过 index.js 入口找到 `lib/express`
├── lib
│   ├── middleware：中间件 内置了中间件
│   ├── router：路由系统
│   ├── application.js：应用
│   ├── request.js：用来拓展 req
│   ├── response.js：用来拓展 res
│   ├── utils.js：工具方法
│   └── view.js：模板引擎
1
2
3
4
5
6
7
8
9

express 基本实现

下面完成这个功能，有一个默认的路由，默认找不到时会执行 404 功能，配置的路由会默认从上到下来进行匹配

先新建 kaimo-express 文件夹，添加对应的文件

index.js

// 找到 express 的入口
console.log("使用的是 kaimo-express");
module.exports = require("./lib/express");
1
2
3

express.js

const http = require("http");
const url = require("url");
const routers = [
    {
        path: "*",
        method: "all",
        handler: (req, res) => {
            res.end(`kaimo-express Cannot ${req.method} ${req.url}`);
        }
    } // 默认路由
];

function createApplication() {
    return {
        get(path, handler) {
            routers.push({
                path,
                method: "get",
                handler
            });
        },
        listen() {
            const server = http.createServer((req, res) => {
                const { pathname } = url.parse(req.url);
                const requestMethod = req.method.toLowerCase();
                for (let i = 1; i < routers.length; i++) {
                    let { path, method, handler } = routers[i];
                    if (path === pathname && method === requestMethod) {
                        return handler(req, res);
                    }
                }
                return routers[0].handler(req, res);
            });
            server.listen(...arguments);
        }
    };
}

module.exports = createApplication;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

下面引用自己的 kaimo-express 测试

const express = require("./kaimo-express");
const app = express();

// 调用回调时 会将原生的 req 和 res 传入（req，res 在内部也被扩展了）
// 内部不会将回调函数包装成 promise
app.get("/", (req, res) => {
    res.end("ok");
});

app.get("/add", (req, res) => {
    res.end("add");
});

app.listen(3000, () => {
    console.log(`server start 3000`);
    console.log(`在线访问地址：http://localhost:3000/`);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

访问 http://localhost:3000/add

访问 http://localhost:3000/kaimo313