前端UI元件復用工具介紹

「懶」是第一個生產力。

程式碼重複使用總是程式設計師喜聞樂見的，前端元件化的最終目的就是複用，今天我們將深入探討如何實現UI元件的複用。

通常我們所說的元件往往是包含業務邏輯的前端元件，而這類元件其實很難實現廣義的複用，頂多能在同一條業務線上復用一下，但UI元件就不一樣了，沒有了業務的約束，只在UI層面上實現復用，那想像空間就很大了，所以這裡我們只討論UI元件。

首先界定一下，UI元件就是一個web介面的前端程式碼片段，雖然說不包含業務，但基本的JS效果是可以有的，例如表單驗證、輪播圖效果、選項卡效果等等，也就是說UI元件可以包含h​​tmlcssjs。我們重複使用的目的並不是簡單的複製貼上，而是希望可以實現一定程度上的自定義，例如介面內容可以調整、顯示樣式可以調整，甚至JS效果也可以加以設置，這樣才算真正有實用價值的組件復用。

那麼我們就來構思如何達到以上目的。首先最核心的就是元件自訂功能，自訂意味著一個元件的htmlcssjs程式碼都可以被修改，並且編輯過程要所見即所得。這個功能我們可以藉助模板引擎實現，想法是，將元件程式碼全部用模板語法來寫，然後抽出來一份配置數據，模板引擎用這份數據解析模板，就得到了最終瀏覽器可以運行的程式碼。修改配置的過程也就是編輯配置資料的過程，編輯後即時調用模板引擎，重新解析得到新的程式碼，再將程式碼即時更新到瀏覽器中，就實現了編輯過程所見即所得。

拆解一下，這個功能大致需要實作以下幾個部分：元件程式碼的取得、設定資料的視覺化、範本引擎的呼叫、設定檔編輯、元件示範、元件html/css/js程式碼複製。

再延伸一下，元件程式碼的自動取得想必要依賴一定的組織規律，那麼就要先約定好元件的管理方式。例如約定元件由一個資料夾組成，內部包含temp.html/style.css/script.js三個模板文件，再加上一個config.json設定資料檔。元件應該有一個總的存放資料夾作為元件庫，為了能獲取到元件的信息，元件庫還需要一個目錄文件，提供所有元件的列表以及每一個元件的信息，這樣就可以透過這個目錄取得到元件的模板、配置以及任何我們需要的資訊了。

基於上述分析已經可以著手開發一個UI元件管理工具了，能夠實現元件管理、預覽、編輯、程式碼複製功能。

如果止步於此，那這個工具的實用價值就不是很大。圍繞著前端程式碼重複使用，還可以進一步擴展功能，例如是否可以從設計環節就開始參與前端元件管理呢？由設計師發布並維護公司內部UI元件庫，在專案設計階段，就可以從元件庫中挑選基礎元件加以調整，並將結果交付給前端，前端只需要將設計師的元件還原，就可以得到能直接用於專案的前端程式碼了。

回顧一下，這裡面需要元件庫實現的功能是，將元件的編輯結果產生一個特殊程式碼，這個程式碼用來在管理工具內還原元件的編輯現場，從而實現設計過程到前端開發的交接。這個功能的實作原理是將元件原始配置與所修改配置做合併，得到元件的修改後配置，再用於元件的渲染與展示，就可以還原設計現場了。

到這裡我們需要的功能就基本完整了，目前這個工具已經開發完成，並在以上功能的基礎上，又增加了用戶管理和使用統計，有助於更好的優化組件庫建設。

原始碼：Github
預覽：

如果專案對你有幫助，請去Github盡情的star不要客氣。

以上是前端UI元件復用工具介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！