2015 年 6 月 2 日,星期二

Git 儲存庫結構更新

維護任何複雜專案的一大挑戰是組織,DataTables 也不例外。專案主要分為核心函式庫、擴充功能和外掛程式。這種為 DataTables 新增功能的模組化方法運作良好,但目前證明困難之處在於與 DataTables 支援的各種樣式函式庫整合。

DataTables 提供自己的樣式表,但它也可以利用作為 BootstrapZurb FoundationjQuery UI ThemeRoller 一部分提供的樣式。這種能夠透過許多不同框架設定樣式的能力是 DataTables 的基本面向,而且在這些環境中使用 DataTables 應該盡可能簡單。

目前情況並非如此,但這篇文章將討論在即將推出的 DataTables 版本中將如何解決這個問題。如果您一直在深入研究各種 DataTables Git 儲存庫,您可能已經看到其中一些變更,這篇部落格文章將確切說明這些變更為何以及為何進行這些變更。

我希望這篇部落格文章能在更新 DataTables 及其所有擴充功能的工作中作為參考和指南文件,因此它相當「枯燥乏味」,但此處提出的工作確實構成 DataTables 未來的關鍵部分。

目前狀態

目前,若要將 DataTables 與任何支援的樣式函式庫搭配使用,您需要在程式碼中包含所需的 Javascript 函式庫,以及 DataTables 的 樣式函式庫的整合檔案

整合檔案的工作方式是在 Javascript 檔案中設定預設值,並擴充樣式函式庫選項以符合 DataTables 的需求。

一般而言,這種方法運作良好,從 DataTables 支援三種完全不同的樣式函式庫以及自己的預設樣式這一事實就可以看出。但是,有兩個方面經常出錯

  • 對於使用該軟體的開發人員來說,並非總是清楚地知道預設的 DataTables 樣式不應與整合樣式一起包含
  • 對於更新整合檔案的 DataTables 開發人員來說,它是獨立的,並且不針對各種擴充功能發布。例如,TableTools 的 Bootstrap 整合會嵌入到一般整合檔案中,因此它可能無法與 TableTools 同時更新,或者發布可能會不同步。

解決方案

解決方案是將每個元件的整合選項移至其主機函式庫,並提供一組檔案名稱應遵循的規則。這可確保開發人員可以立即存取他們需要更新的軟體,發布是不可分割的,並且有一致的方法來包含每個樣式函式庫所需的檔案。

這種方法的缺點是,如果您使用大量擴充功能,它會顯著增加所需的檔案數量。但是,這被一致的命名提供了以程式方式組合檔案的能力所抵消了,有關此主題的更多資訊將在未來的部落格文章中介紹!

在這篇文章的其餘部分,我將僅專注於儲存庫檔案結構的詳細資訊。

檔案名稱規則

  1. 檔案名稱是階層式的,最重要的軟體名稱在左邊
  2. 每個外掛程式都會將其自己的名稱新增到階層結構中(在右邊),除非它與階層結構中的前一個項目相同
  3. jQuery 位於階層樹的頂端
  4. 階層結構以點分隔
  5. 檔案名稱僅限於階層結構中的最後兩個元素。
  6. 樣式框架整合檔案將框架名稱附加為階層結構中的最後一個元素
  7. DataTables 提供的樣式被視為框架(Javascript 預設值適用於其樣式框架,因此永遠不需要 Javascript DataTables 整合檔案!)
  8. 擴充功能 .min 用於表示縮小檔案(附加在檔案副檔名之前)
  9. 檔案名稱將始終具有副檔名(例如,.css.js)。
  10. 檔案名稱是駝峰式命名法,即全部小寫,除非組合了兩個單字

範例 - DataTables

以 DataTables 為例,它是 jQuery 的外掛程式,因此其主要的 Javascript 檔案名為 jquery.dataTables.js。Bootstrap 整合檔案名為 jquery.dataTables.bootstrap.js,但規則 5 會將其截斷為 dataTables.bootstrap.js。因此,DataTables Javascript 目錄將包含

  • jquery.dataTables.js
  • dataTables.bootstrap.js
  • dataTables.foundation.js
  • dataTables.jqueryui.js

對於樣式,CSS 檔案與整合檔案類似,因此我們有

  • jquery.dataTables.css
  • dataTables.bootstrap.css
  • dataTables.foundation.css
  • dataTables.jqueryui.css

範例 - Responsive

現在讓我們考慮 Responsive 擴充功能。對於 Responsive,不需要 Javascript 整合檔案,因此我們只需要

  • dataTables.responsive.js

對於 CSS,我們確實需要整合檔案,因此我們有

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

儲存庫狀態

在撰寫這篇文章時,只有 DataTablesSrcFixedColumnsResponsive 儲存庫已更新以符合這些新規則。

隨著 DataTables 的持續開發,其他儲存庫將很快跟進。