基於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 全國 沙龍還將走進成都、杭州、上海、深圳幾大城市，邀請業內技術大咖跟大家一起交流學習，敬請期待！