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

编写一个 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/`);
});

express 源码目录结构

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

express 基本实现

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

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

在这里插入图片描述
index.js

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

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;

下面引用自己的 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/`);
});

访问 http://localhost:3000/add
在这里插入图片描述
访问 http://localhost:3000/kaimo313