13. JS/CSS 文件名结构

维护任何复杂项目的巨大挑战之一是组织性,而 DataTables 也概莫能外。该项目的首要划分包括核心库、扩展和插件。这一用于在 DataTables 中添加特性的模块化方法效果良好,但还必须考虑到与 DataTables 支持的各种样式库的集成。

DataTables 使用的样式集成针对每个样式库包含两个组件部分(注意,其中每个部分都是可选的 - 例如,许多扩展不需要自定义 Javascript)

  • Javascript - 集成文件将设置适合样式库的默认选项(通常是类名和呈现器)。这将加载到主软件之外。
  • CSS - 此情况下的集成文件添加样式库未满足的任何所需样式。

集成文件包含在每个库的源代码库中,因此,DataTables 核心与其各种扩展之间使用的文件名保持一致非常重要。这确保了开发人员可以立即访问他们需要更新的软件,版本是原子性的,以及包含每个样式库所需文件的方法是一致的。

这种方法的缺点是,如果你使用大量扩展,它会显著增加所需文件数量。然而,通过一致的命名提供按编程方式合并文件(如 DataTables 下载 所用)的能力,这一缺点被抵消了。

文件名规则

  1. 文件名是分层的,最重要的软件名称位于左侧
  2. 每个插件向该层级添加自己的名称(在右侧),除非它与层级中的前一个项目相同
  3. DataTables 位于层级树的顶部
  4. 层级使用点号分隔
  5. 文件名仅限于层级中的最后两个元素。
  6. 样式框架集成文件在层级中追加框架名称作为最后一个元素
  7. DataTables 提供的样式算作框架(Javascript 默认值适合其样式框架,因此永远不需要 Javascript DataTables 集成文件!)
  8. 扩展名 .min 用于表示缩小文件(附加在文件扩展名前面)
  9. 文件名总是带扩展名(例如 .css.js)。
  10. 文件名采用 *驼峰式大小写* - 即全部采用小写,除了将两个单词合并的情况

示例 - DataTables

考虑 DataTables 的情况 - 它是树的顶部,因此核心文件被称为 dataTables.js。因此 Bootstrap 集成文件被称为 dataTables.bootstrap.js。因此,DataTables Javascript 目录将包含

  • dataTables.js
  • dataTables.bootstrap.js
  • dataTables.bulma.js
  • dataTables.foundation.js

对样式的文件 CSS 与集成文件类似,尽管由于规则 6,DataTables 样式文件名与其他样式库采用相同格式

  • dataTables.dataTables.css
  • dataTables.bootstrap.css
  • dataTables.bulma.css
  • dataTables.foundation.css

示例 - Responsive

我们现在考虑一下Responsive 扩展。对于主 Javascript 文件,我们有 dataTables.responsive.js,而对于样式集成文件,我们会有 dataTables.responsive.bootstrap.js 作为层级,但由于规则 5,它会被缩短为 responsive.bootstrap.js。因此,Responsive 的文件为

  • dataTables.responsive.js
  • responsive.bootstrap.js
  • responsive.bulma.js
  • responsive.foundation.js

对于 CSS,应用相同的规则,我们有

  • responsive.dataTables.css
  • responsive.bootstrap.css
  • responsive.foundation.css
  • responsive.jqueryui.css