13. JS/CSS 檔案名稱結構

維護任何複雜專案的一大挑戰是組織，DataTables 也不例外。該專案主要分為核心函式庫、擴充功能和外掛程式。這種為 DataTables 新增功能的模組化方法效果良好，但也必須考慮與 DataTables 支援的各種樣式函式庫整合。

DataTables 使用的樣式整合針對每個樣式函式庫有兩個組成部分（請注意，每個部分都是可選的 - 例如，許多擴充功能不需要自訂 Javascript）

Javascript - 整合檔案將設定適合樣式函式庫的預設選項（通常是類別名稱和渲染器）。這是除了主軟體之外載入的。
CSS - 在這種情況下，整合檔案會新增樣式函式庫沒有提供的任何所需樣式。

整合檔案包含在每個函式庫的原始碼儲存庫中，因此，在 DataTables 核心及其各種擴充功能之間使用一致的檔案名稱非常重要。這可確保開發人員可以立即存取他們需要更新的軟體，發行是原子性的，並且有一致的方法來包含每個樣式函式庫所需的檔案。

這種方法的缺點是，如果您使用大量的擴充功能，則需要的檔案數量會大幅增加。然而，一致的命名提供了以程式方式組合檔案的能力（如 DataTables 下載所使用），這一事實彌補了這個缺點。

檔案名稱規則

檔案名稱是階層式的，最顯著的軟體名稱在左側
每個外掛程式都會將其名稱新增至階層（在右側），除非它與階層中的前一個項目相同
DataTables 是階層樹的頂端
階層以點分隔
檔案名稱僅限於階層中的最後兩個元素。
樣式框架整合檔案將框架名稱附加為階層中的最後一個元素
DataTables 提供的樣式被視為框架（Javascript 預設值適用於其樣式框架，因此永遠不需要 Javascript DataTables 整合檔案！）
擴充功能 .min 用於表示縮小的檔案（附加在檔案副檔名之前）
檔案名稱將始終具有副檔名（例如，.css 或 .js）。
檔案名稱是駝峰式命名 - 即所有小寫字母，除非組合了兩個單字

範例 - 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