如何在JavaScript单个类中分组多类别函数实现链式调用？

问题背景 #

现有一个包含多类别静态函数的JavaScript类：

class App {
  static fileFunc1() {
    ...
  }

  static fileFunc2() {
    ...
  }

  static strFunc1() {
    ...
  }

  static strFunc2() {
    ...
  }
}

需要在单个文件内对这些函数分类，实现如下链式调用：

App.file.fileFunc1();
App.str.strFunc2();

自行尝试的方案如下（存在语法问题）：

class App {
  /**
   * Group of file-operation related functions
   */
  static file {
    fileFunc1: () => {
      ...
    },

    fileFunc2: () => {
      ...
    }
  };

  /**
   * Group of string-processing related functions
   */
  static str {
    strFunc1: () => {
      ...
    },

    strFunc2: () => {
      ...
    }
  };
}

希望确认该方案是否推荐，以及了解其他可行思路，且不希望拆分到多个文件。

方案评价与修正 #

你的方案思路是可行的，但存在语法错误：静态类字段的正确写法需要用=赋值，修正后代码如下：

class App {
  /**
   * 文件操作相关函数组
   */
  static file = {
    fileFunc1: () => {
      ...
    },
    fileFunc2: () => {
      ...
    }
  };

  /**
   * 字符串处理相关函数组
   */
  static str = {
    strFunc1: () => {
      ...
    },
    strFunc2: () => {
      ...
    }
  };
}

修正后可以正常实现你要的链式调用，这种方式直观简洁，完全满足单文件的要求，是可行的方案之一。

其他推荐方案 #

1. 静态嵌套类 #

将分类函数组织成App的静态嵌套类，更符合面向对象的结构规范，函数写法也更贴近常规静态方法：

class App {
  /**
   * 文件操作相关函数组
   */
  static class File {
    static fileFunc1() {
      ...
    }
    static fileFunc2() {
      ...
    }
  }

  /**
   * 字符串处理相关函数组
   */
  static class Str {
    static strFunc1() {
      ...
    }
    static strFunc2() {
      ...
    }
  }
}

// 调用方式
App.File.fileFunc1();
App.Str.strFunc2();

如果不习惯大写类名，也可以将嵌套类命名为file/str，保持调用方式和你的需求一致。

2. 先定义独立对象再挂载 #

在文件内先单独定义各分类的函数对象，再挂载到App类的静态属性上，这种方式能让代码块划分更清晰，便于维护：

// 文件操作函数组
const fileOps = {
  fileFunc1() {
    ...
  },
  fileFunc2() {
    ...
  }
};

// 字符串处理函数组
const strOps = {
  strFunc1() {
    ...
  },
  strFunc2() {
    ...
  }
};

class App {}

// 挂载到App静态属性
App.file = fileOps;
App.str = strOps;

// 调用方式
App.file.fileFunc1();
App.str.strFunc2();

这种方式的优势在于函数组可以独立编写、测试，甚至在文件内分块放置，可读性更强，同时也完全符合单文件的要求。

总结 #

• 你的方案修正语法后完全可用，适合追求简洁直观的场景；
• 静态嵌套类更符合类结构的规范性，适合偏向面向对象风格的代码；
• 先定义对象再挂载的方式灵活性更高，便于代码的拆分和维护。

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