背景

随着业务接入的上翻容器日益增多,不同容器间的 API 兼容性差异导致了严重的技术不确定性。这种不确定性直接影响项目工时评估的准确性,并增加了技术风险。

为了解决这一问题,我们开发了 CanIUse 测试页面,旨在系统分析阶段就能明确 API 在各容器中的兼容情况。同时,CanIUse 进一步承担起 API 标准化层的角色,通过统一的方式来处理环境差异,避免了传统硬编码方案带来的业务逻辑复杂度和维护成本问题。

目录结构

- constants  // 常量文件夹
- hooks      // canIUse hooks
- utils      // 工具库
- types      // 类型,命名规范需要跟package下文件夹名称保持一致
- packages   // canIUse api 模块
- calling.ts // 导出canIUse调用, 业务层统一调用
- index.lesss
- index.ts   // canIUse 测试页面
- module.ts  // 动态模块加载以及分发逻辑

其中 packages 下每个api目录结构

API名称
 - base // H5 通用模块
 - Voyager_General // Voyager 通用模块
 - Rewards_General // Rewards 通用模块
 - config.json // API 配置文件
 - ...other   // 定制模块

config 配置

{
  name  // API 名称
  sort  // 权重参考 api数量文档序号(保障展示顺序与文档顺序一致)
  defaultDescription // api 兜底描述(如果BaseModule没有定义 description 走配置兜底)
}

模块动态加载自动分发

详见 ./test/module.ts 文件

动态加载

俩个作用:

moduleMap 收集后结果如下:

{
  APIName: {
    base: classModule,
    Voyager_General: classModule,
    Rewards_General: classModule,
    ...other: classModule
  }
}

config 文件数据会自动绑定到每个classModule 中

获取配置: