基於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工具來生成項目和組件基本文件，同時管理和調試組件。

 

完成了CLI和GUI工具以後，具體的開發流程以下所示：

     1. 使用CLI生成項目

     2. 開發頁面

     3. 從GUI工具查找合適的區塊，直接使用或者下載代碼微調

     4. 頁面開發完成

     5. 對於可複用的功能，使用CLI生成區塊基本文件，進行區塊開發

     6. 開發完畢，項目上線發佈區塊庫

     7. 下一次開發項目時，能夠直接使用該區塊或者下載代碼

 

使用了區塊的開發模式後，雖然開發流程與以前相比並無太大區別，但有效提高了開發的速度，同時還能將任務拆分得更細，對於團隊中的初學者來講，一個有使用文檔的業務組件更加容易被他們接受，對於業務的上手速度也更快。

 

本文根據個推高級前端開發工程師沈創在個推TechDay全國巡迴沙龍廣州站的演講內容進行整理，略有刪減。

接下來，個推TechDay全國沙龍還將走進成都、杭州、上海、深圳幾大城市，邀請業內技術大咖跟你們一塊兒交流學習，敬請期待！