22. DataTables 專案檔案名稱
維護任何複雜專案的一大挑戰是如何組織，DataTables 也不例外。專案主要分為核心 DataTables 函式庫、擴充功能和外掛程式。此技術說明試圖將用於定義 DataTables 及其擴充功能（有很多）各種檔案的檔案名稱規則編纂成文。
務必注意，我們在檔案名稱中不僅需要考量軟體模組，還需要考量
- 樣式框架整合（例如 DataTables 預設、Bootstrap、Bulma 等）
- 檔案是否已縮小
- 檔案類型
- ES 模組：.mjs
- UMD 載入器：.js
- CSS：.css
檔案名稱規則
考慮到這一點，以下是如何定義 DataTables 發行套件中檔案名稱的規則
- 檔案名稱是分層的，最重要的軟體名稱在左側
- 每個外掛程式都會將自己的名稱新增到階層中（在右側），除非它與階層中的前一個項目相同
- DataTables 位於階層樹的頂端
- 階層以點分隔
- 檔案名稱僅限於階層中的最後兩個元素。
- 樣式框架整合檔案將框架名稱附加為階層中的最後一個元素
- DataTables 提供的樣式被視為框架（Javascript 預設值適用於其樣式框架）
- 擴充功能
.min用於表示縮小的檔案（附加在檔案擴充功能之前） - 檔案名稱將始終具有擴充功能（例如
.css、.js、.mjs）。 - 檔案名稱為 camelCase - 即除了組合兩個單字的地方外，所有小寫
範例
讓我們逐步瀏覽幾個範例，看看實際情況。
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 和套件建置器將會根據這些擴充功能自動使用它們需要的檔案。