×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

使用Node.js实现一个express框架

手写一个express系列

express的基本用法

 
 
 
    
  
  
  
  1. const express = require("express");  
    2.   
  
  
  2. const app = express();  
    3.   
  
  
  3. app.get("/test", (req, res, next) => {  
    4.   
  
  
  4.   console.log("*1");  
    5.   
  
  
  5. //   res.end("2");  
    6.   
  
  
  6.   next();  
    7.   
  
  
  7. });  
    8.   
  
  
  8. app.get("/test", (req, res, next) => {  
    9.   
  
  
  9.   console.log("*2");  
    10.   
  
  
  10.   res.end("2");  
    11.   
  
  
  11. });  
    12.   
  
  
  12. app.listen(8888, (err) => {  
    13.   
  
  
  13.   !err && console.log("监听成功");  
    14.   
  
  
  14. }); 
    15.  
 
 
 
 
 
    
  
  
  
  1. *1  
    2.   
  
  
  2. *2 
    3.

一起来实现一个简单的express框架

 
 
 
    
  
  
  
  1. class express {  
    2.   
  
  
  2. }  
    3.   
  
  
  3. module.exports = express; 
    4.  
 
 
 
 
 
    
  
  
  
  1. const { createServer } = require("http"); 
    2.  
 
 
 
 
 
    
  
  
  
  1. class express {  
    2.   
  
  
  2.   listen(...args) {  
    3.   
  
  
  3.     createServer(cb).listen(...args);  
    4.   
  
  
  4.   }  
    5.   
  
  
  5. } 
    6.

实现接收到请求触发

 
 
 
    
  
  
  
  1. class express {  
    2.   
  
  
  2.   cb() {  
    3.   
  
  
  3.     return (req, res) => {  
    4.   
  
  
  4.       console.log(res, res, "开始行动");  
    5.   
  
  
  5.     };  
    6.   
  
  
  6.   }  
    7.   
  
  
  7.   listen(...args) {  
    8.   
  
  
  8.     createServer(this.cb()).listen(...args);  
    9.   
  
  
  9.   }  
    10.   
  
  
  10. } 
    11.  
 
 
 
 
 
    
  
  
  
  1. constructor() {  
    2.   
  
  
  2.     this.routers = {  
    3.   
  
  
  3.       get: [],  
    4.   
  
  
  4.       post: [],  
    5.   
  
  
  5.     };  
    6.   
  
  
  6.   }  
    7.   
  
  
  7.   get(path, handle) {  
    8.   
  
  
  8.     this.routers.get.push({  
    9.   
  
  
  9.       path,  
    10.   
  
  
  10.       handle,  
    11.   
  
  
  11.     });  
    12.   
  
  
  12.   }  
    13.   
  
  
  13.   post(path, handle) {  
    14.   
  
  
  14.     this.routers.post.push({  
    15.   
  
  
  15.       path,  
    16.   
  
  
  16.       handle,  
    17.   
  
  
  17.     });  
    18.   
  
  
  18.   } 
    19.  
 
 
 
 
 
    
  
  
  
  1. cb() {  
    2.   
  
  
  2.   return (req, res) => {  
    3.   
  
  
  3.     const method = req.method.toLowerCase();  
    4.   
  
  
  4.     console.log(this.routers[method], ",method");  
    5.   
  
  
  5.     const url = req.url;  
    6.   
  
  
  6.     this.routers[method].forEach((item) => {  
    7.   
  
  
  7.       item.path === url && item.handle(req, res);  
    8.   
  
  
  8.     });  
    9.   
  
  
  9.   };  
    10.   
  
  
  10. }  
    11.   
  
  
  11. listen(...args) {  
    12.   
  
  
  12.   createServer(this.cb()).listen(...args);  
    13.   
  
  
  13. } 
    14.  
 
 
 
 
 
    
  
  
  
  1. [ { method: 'get', path: '/test', handle: [Function] } ] ,method 
    2.

完成最重要的中间件功能

 
 
 
    
  
  
  
  1. constructor() {  
    2.   
  
  
  2.    this.routers = {  
    3.   
  
  
  3.      get: [],  
    4.   
  
  
  4.      post: [],  
    5.   
  
  
  5.      all: [],  
    6.   
  
  
  6.    };  
    7.   
  
  
  7.  } 
    8.  
 
 
 
 
 
    
  
  
  
  1. handleAddRouter(path, handle) {  
    2.   
  
  
  2.    let router = {}; 
    3.   
  
  
  3.     if (typeof path === "string") {  
    4.   
  
  
  4.      router = {  
    5.   
  
  
  5.        path,  
    6.   
  
  
  6.        handle,  
    7.   
  
  
  7.      };  
    8.   
  
  
  8.    } else {  
    9.   
  
  
  9.      router = {  
    10.   
  
  
  10.        path: "/",  
    11.   
  
  
  11.        handle: path, 
    12.   
  
  
  12.      };  
    13.   
  
  
  13.    }  
    14.   
  
  
  14.    return router;  
    15.   
  
  
  15.  }  
    16.   
  
  
  16.  get(path, handle) {  
    17.   
  
  
  17.    const router = this.handleAddRouter(path, handle);  
    18.   
  
  
  18.    this.routers.get.push(router);  
    19.   
  
  
  19.  }  
    20.   
  
  
  20.  post(path, handle) {  
    21.   
  
  
  21.    const router = this.handleAddRouter(path, handle);  
    22.   
  
  
  22.    this.routers.post.push(router); 
    23.   
  
  
  23.   }  
    24.   
  
  
  24.  use(path, handle) {  
    25.   
  
  
  25.    const router = this.handleAddRouter(path, handle);  
    26.   
  
  
  26.    this.routers.all.push(router);  
    27.   
  
  
  27.  } 
    28.

这里要注意,promise.then 源码实现和 express 的 next、以及 koa 的洋葱圈、redux 的中间件实现,有着一丁点相似,当你能真的领悟前后端框架源码时候,发现大都相似

实现next

 
 
 
    
  
  
  
  1. search(method, url) {  
    2.   
  
  
  2.     const matchedList = [];  
    3.   
  
  
  3.     [...this.routers[method], ...this.routers.all].forEach((item) => {  
    4.   
  
  
  4.       item.path === url && matchedList.push(item.handle);  
    5.   
  
  
  5.     });  
    6.   
  
  
  6.     return matchedList;  
    7.   
  
  
  7.   }  
    8.   
  
  
  8.   cb() {  
    9.   
  
  
  9.     return (req, res) => {  
    10.   
  
  
  10.       const method = req.method.toLowerCase();  
    11.   
  
  
  11.       const url = req.url;  
    12.   
  
  
  12.       const matchedList = this.search(method, url);  
    13.   
  
  
  13.     };  
    14.   
  
  
  14.   } 
    15.  
 
 
 
 
 
    
  
  
  
  1. handle(req, res, matchedList) {  
    2.   
  
  
  2.    const next = () => {  
    3.   
  
  
  3.      const midlleware = matchedList.shift();  
    4.   
  
  
  4.      if (midlleware) {  
    5.   
  
  
  5.        midlleware(req, res, next);  
    6.   
  
  
  6.      }  
    7.   
  
  
  7.    };  
    8.   
  
  
  8.    next();  
    9.   
  
  
  9.  }  
    10.   
  
  
  10.  cb() {  
    11.   
  
  
  11.    return (req, res) => {  
    12.   
  
  
  12.      const method = req.method.toLowerCase();  
    13.   
  
  
  13.      const url = req.url;  
    14.   
  
  
  14.      const matchedList = this.search(method, url);  
    15.   
  
  
  15.      this.handle(req, res, matchedList);  
    16.   
  
  
  16.    };  
    17.   
  
  
  17.  } 
    18.

写在最后


分享名称：使用Node.js实现一个express框架
文章路径：http://cdbrznjsb.com/article/ccdhjog.html

其他资讯

让你的专属顾问为你服务