前端UI組件複用工具

「懶」是第一輩子產力。

代碼複用老是程序員喜聞樂見的，前端組件化的最終目的就是複用，今天咱們就將深刻探討如何實現UI組件的複用。

一般咱們所說的組件每每是包含業務邏輯的前端組件，而這類組件實際上很難實現廣義上的複用，頂多能在同一條業務線上複用一下，但UI組件就不同了，沒有了業務的約束，只在UI層面上實現複用，那想象空間就很大了，因此這裏咱們只討論UI組件。

首先界定一下，UI組件就是一個web界面的前端代碼片斷，雖說不包含業務，但基本的JS效果是能夠有的，好比表單驗證、輪播圖效果、選項卡效果等等，也就是說UI組件能夠包括htmlcssjs。咱們複用的目的並非簡單的複製粘貼，而是但願能夠實現必定程度上的自定義，好比界面內容能夠調整、顯示樣式能夠調整，甚至JS效果也能夠加以設置，這樣纔算真正有實用價值的組件複用。

那麼咱們就來構思一下如何達到以上目的。首先最核心的就是組件自定義功能，自定義意味着一個組件的htmlcssjs代碼均可以被修改，而且編輯過程要所見即所得。這個功能咱們能夠藉助模板引擎實現，思路是，將組件代碼所有用模板語法來寫，而後抽出來一份配置數據，模板引擎用這份數據解析模板，就獲得了最終瀏覽器能夠運行的代碼。修改配置的過程也就是編輯配置數據的過程，編輯後實時調用模板引擎，從新解析獲得新的代碼，再將代碼實時更新到瀏覽器中，就實現了編輯過程所見即所得。

拆解一下，這個功能大體須要實現如下幾個部分：組件代碼的獲取、配置數據的可視化、模板引擎的調用、配置文件編輯、組件演示、組件html/css/js代碼複製。

再延伸一下，組件代碼的自動獲取想必要依賴必定的組織規律，那麼就要先約定好組件的管理方式。好比約定組件由一個文件夾組成，內部包含temp.html/style.css/script.js三個模板文件，再加上一個config.json配置數據文件。組件應該有一個總的存放文件夾做爲組件庫，爲了能獲取到組件的信息，組件庫還須要一個目錄文件，提供全部組件的列表以及每個組件的信息，這樣就能夠經過這個目錄獲取到組件的模板、配置以及任何咱們須要的信息了。

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

若是止步於此，那這個工具的實用價值不是很大。圍繞前端代碼複用，還能夠進一步擴展功能，好比是否能夠從設計環節就開始參與到前端組件管理呢？由設計師發佈並維護公司內部UI組件庫，在項目設計階段，就能夠從組件庫中挑選基礎組件加以調整，並將結果交付給前端，前端只須要將設計師的組件還原，就能夠獲得能直接用於項目的前端代碼了。

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

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

源碼：Github
預覽：http://refined-x.com/WidgetsPlayground/

若是項目對你有幫助，請去Github盡情的star不要客氣。