基於CMS的元件複用實踐
作者 個推高階前端開發工程師沈創
目前前端專案大多基於Vue、React、Angular等框架來實現,這一類框架都有一個明顯的特點:基於模組化以及元件化思維。所以,開發者在使用上述框架時,實際上是在寫一個一個的元件,並且元件與元件之間呈巢狀的形式。當一個專案中多次出現同一功能時,他們會選擇將其提取出來,並且放到components資料夾中,以達到複用的目的,但是這些複用都是基於同一專案的,所以,當寫另一個專案時,又要開始寫一些重複的程式碼。
個推擁有多條業務線,在進行前端專案時總會遇到重複寫程式碼的困境,所以,我們做了PCMS專案,主要為了解決跨專案之間的元件複用問題,其中的技術棧是基於Vue的,所以PCMS同時也是基於Vue專案實現的。
接下來我將基於自己在前端工作過程中的實踐,跟大家分享基於CMS的元件複用實踐。
想要實現跨專案之間的元件複用,需要解決以下問題,
1.元件與元件之間,元件與專案之間需要解耦
2.元件需要給出使用方法(文件)
3.元件需要能夠獨立執行
4.元件需要有版本管理並且可以按需載入
5.需要一個工具把這些元件管理並且展示出來
在上述五大問題中,首先要解決元件與元件以及專案之間的解耦問題,為此,我們需要將元件內部和其它元件以及專案耦合的部分剔除,然後通過props傳入,為了方便區分這些props與普通props,我們把他們放到了一個名為ds的物件中 。通常,這些耦合部分會是一些API或VUEX呼叫或者前端路由操作等。
同時, 為了方便這些元件的編寫和維護,我們給元件制定了更加嚴格的約束,同時將這些符合約束的複用元件稱為“區塊”,意思是可以獨立於專案的一個功能區域。
在解耦過程中,我們發現這些區塊的程式碼可以有一些重複部分,比如ds的一些優化和mock的註冊等,所以我們開發了一個vue外掛。在專案使用區塊時,為了完成按需載入時的引用方式以及生產環境下Mock資料的剔除,我們又開發了一個webpack外掛。
在具體實踐過程中,為了實現元件的複用,需要按照固定的結構去寫元件,還需要在專案中修改main.js和webpack配置工作,所以,我們開發了CLI工具和GUI工具來生成專案和元件基本檔案,同時管理和除錯元件。
使用了區塊的開發模式後,雖然開發流程與之前相比並沒有太大區別,但有效提升了開發的速度,同時還能將任務拆分得更細,對於團隊中的初學者來說,一個有使用文件的業務元件更加容易被他們接受,對於業務的上手速度也更快。
本文根據個推高階前端開發工程師沈創在個推TechDay全國巡迴沙龍廣州站的演講內容進行整理,略有刪減。
接下來,個推TechDay全國沙龍還將走進成都、杭州、上海、深圳幾大城市,邀請業內技術大咖跟大家一起交流學習,敬請期待!