JavaScript中如何实现类似express的函数链式调用？

你的代码问题原因 #

你当前的代码中，app()返回的是listen函数本身，所以调用app()得到的是那个返回"ggg"的函数——这个函数本身并没有listen属性，自然会报错listen不是函数。

类似Express的实现思路 #

Express的核心逻辑是：express()返回一个自身挂载了各类方法的函数（这个函数本身是处理HTTP请求的核心逻辑），同时这些方法大多返回自身（this）以支持链式调用。

基础实现示例 #

// 对应express()的创建函数
function createApp() {
  // 核心app函数，可用于处理请求
  const app = function(req, res) {
    console.log('处理请求：', req.url);
  };

  // 挂载listen方法，模拟启动服务器
  app.listen = function(port = 3000) {
    console.log(`服务器已启动，监听端口 ${port}`);
    // 返回this，支持链式调用
    return this;
  };

  // 挂载get路由注册方法
  app.get = function(path, handler) {
    console.log(`注册GET路由：${path}`);
    // 返回this，支持链式调用
    return this;
  };

  // 可以继续挂载更多方法，比如post、use等
  app.post = function(path, handler) {
    console.log(`注册POST路由：${path}`);
    return this;
  };

  return app;
}

// 使用方式完全贴近Express
const app = createApp();
// 链式调用注册路由并启动服务
app.get('/home', (req, res) => {})
   .post('/login', (req, res) => {})
   .listen(3000);

// 验证app的类型：是函数，同时拥有listen等方法
console.log(typeof app); // function
console.log(typeof app.listen); // function

修正你的原始代码 #

如果要调整你自己的代码使其正常运行，只需让app()返回一个带有listen方法的函数即可：

var app = function() {
    // 定义主函数
    const mainFunc = function() {
        return "ggg";
    };
    // 给主函数挂载listen方法
    mainFunc.listen = function() {
        return "listen method called";
    };
    return mainFunc;
}

// 现在可以正常调用
console.log("dd: " + app().listen().length); // 输出 dd: 21

关键要点总结 #

• 不要让创建函数直接返回某个方法，而是返回一个载体（函数或对象），再给这个载体挂载所需方法
• 链式调用的核心是：每个方法执行完毕后返回this（即载体本身），这样就能连续调用其他方法

内容的提问来源于stack exchange，提问作者Aquarius_Girl