“懶”是第一生產力。 代碼復用總是程式員喜聞樂見的，前端組件化的最終目的就是復用，今天我們就將深入探討如何實現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不要客氣。
