22. DataTables 项目文件名

维护任何复杂项目的一个巨大挑战在于组织,DataTables 也同样如此。该项目主要分为 DataTables 核心库、扩展和插件。本技术说明尝试规范用于定义 DataTables 及其扩展的各种文件的规则(有很多规则!)。

值得注意的是,我们不仅需要考虑文件名中的软件模块,还需要考虑

  • 样式框架集成(例如,DataTables 默认、Bootstrap、Bulma 等)
  • 文件是否经过缩小
  • 文件类型
    • ES 模块:.mjs
    • UMD 加载器:.js
    • CSS:.css

文件名规则

考虑到这一点,我们将在 DataTables 发行包中定义文件名规则

  1. 文件名是分层的,最显着的软件名称在左侧
  2. 除非每个插件与层级结构中的前一个项目相同,否则每个插件都会将自己的名称添加到该层级结构(右侧)
  3. DataTables 是层级树的顶部
  4. 层级结构以小数点分隔
  5. 文件名仅限于层级结构中的最后两个元素。
  6. 样式框架集成文件将框架名称追加为层级结构中的最后一个元素
  7. DataTables 提供的样式算作框架(Javascript 默认设置适合其样式框架)
  8. 扩展 .min 用于表示缩小的文件(追加在文件扩展名之前)
  9. 文件名始终有扩展名(例如 .css.js.mjs)。
  10. 文件名采用小驼峰式命名法,即除两个单词组合在一起以外,所有单词都采用小写

示例

让我们通过几个示例来了解其实际情况。

DataTables

DataTables 是基础,因此我们只有

文件功能 层级结构 文件名
核心 JS 库 DataTables dataTables.js
Bootstrap 5 JS DataTables > Bootstrap 5 dataTables.bootstrap5.js
Bulma CSS DataTables > Bulma dataTables.bulma.css

显而易见的是,还有很多其他文件,加上它们的缩小版本。现在,您知道为什么我们需要花时间提出一个像文件命名约定一样乏味的东西!

Editor

借助 Editor,我们正在为层次结构添加另一层,因此我们开始看到规则 5 的效果,将名称限制为只有最后的两个元素

文件功能 层级结构 文件名
Editor JS DataTables > Editor dataTables.editor.js
Bootstrap 5 JS DataTables > Editor > Bootstrap 5 editor.bootstrap5.js
DataTables 默认 CSS DataTables > Editor > DataTables editor.dataTables.css

等。

关于 ES 模块 (.mjs) 的说明

我们为将 JavaScript 加载到项目中提供了多种不同的方式

  • 通过通用模块描述 (UMD),支持
    • AMD
    • CommonJS
    • 直接在浏览器中加载
  • 通过 EcmaScript 模块 (ESM)

不可能在单个文件中包含一个 ESM 加载器和一个 UMD,因此对于我们要发布的每一块 JavaScript,我们都必须提供两个文件。为了区分它们,我们遵循 V8 指南,并使用 .mjs 来表示一个文件包含 ESM 加载器代码,而 .js 则用于 UMD 加载器代码。基于这些扩展,Node 和包构建器将自动使用它们所需的文件。