JavaScript中如何配置主API类以通过API.子类名调用子类静态方法

你可以通过将子类挂载为API类的静态属性实现需求，具体步骤如下：

步骤1：导出各个子类 #

在每个独立的子类文件（如MySubClass1.js）末尾添加导出语句：

class MySubClass1  {
     static method1 () {
        return { something: 'demo value' }
     }
     static method2 () {
        return { somethingElse: 'other value' }
     }
}
// 导出当前类
export default MySubClass1

其余MySubClassXXX.js子类都按相同规则默认导出对应类即可。

步骤2：API类导入并挂载子类 #

在API.js中导入所有子类，将其挂载为API类的静态属性：

// 导入所有子类
import MySubClass1 from './MySubClass1.js'
import MySubClass2 from './MySubClass2.js'
// 其余子类按需导入

class API {
  // 这里可以正常编写API类本身的静态、实例方法
  static commonUtil() {
    return 'API base method'
  }
}

// 将子类挂载为API的静态属性
API.MySubClass1 = MySubClass1
API.MySubClass2 = MySubClass2
// 其余子类同理挂载

export default API

效果验证 #

在项目其他文件中导入API后，即可按你需要的格式调用：

import API from './API.js'

// 调用方式完全符合需求
console.log(API.MySubClass1.method1()) 

可选扩展 #

子类需要继承API能力的场景 #

如果你的子类需要用到API类的静态/实例方法，只需要在定义子类时继承API即可：

// MySubClass1.js
import API from './API.js'
// 继承API类
class MySubClass1 extends API {
  static method1 () {
    // 可直接调用API的静态方法
    return { baseRes: this.commonUtil() }
  }
}
export default MySubClass1

ES模块天然支持这种循环导入的场景，不会出现引用错误。

子类较多时批量导入 #

如果你的子类数量多，且都放在统一目录下，可以借助Vite/Webpack等构建工具的批量导入能力减少重复代码：

// API.js，假设所有子类都放在./subclasses目录下
const subClassFiles = import.meta.glob('./subclasses/*.js', { eager: true })

class API {}

for (const filePath in subClassFiles) {
  const subClass = subClassFiles[filePath].default
  // 从文件路径提取类名作为API的静态属性名
  const className = filePath.match(/\/([^/]+)\.js$/)[1]
  API[className] = subClass
}

export default API

后续新增子类只需要放到对应目录即可，不需要手动修改API.js的导入逻辑。

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