基于CMS的組件復(fù)用實(shí)踐

目前前端項(xiàng)目大多基于Vue、React、Angular等框架來實(shí)現(xiàn)，這一類框架都有一個(gè)明顯的特點(diǎn)：基于模塊化以及組件化思維。所以，開發(fā)者在使用上述框架時(shí)，實(shí)際上是在寫一個(gè)一個(gè)的組件，并且組件與組件之間呈嵌套的形式。當(dāng)一個(gè)項(xiàng)目中多次出現(xiàn)同一功能時(shí)，他們會(huì)選擇將其提取出來，并且放到components文件夾中，以達(dá)到復(fù)用的目的，但是這些復(fù)用都是基于同一項(xiàng)目的，所以，當(dāng)寫另一個(gè)項(xiàng)目時(shí)，又要開始寫一些重復(fù)的代碼。

個(gè)推擁有多條業(yè)務(wù)線，在進(jìn)行前端項(xiàng)目時(shí)總會(huì)遇到重復(fù)寫代碼的困境，所以，我們做了PCMS項(xiàng)目，主要為了解決跨項(xiàng)目之間的組件復(fù)用問題，其中的技術(shù)棧是基于Vue的，所以PCMS同時(shí)也是基于Vue項(xiàng)目實(shí)現(xiàn)的。

接下來我將基于自己在前端工作過程中的實(shí)踐，跟大家分享基于CMS的組件復(fù)用實(shí)踐。

想要實(shí)現(xiàn)跨項(xiàng)目之間的組件復(fù)用，需要解決以下問題，
1.組件與組件之間，組件與項(xiàng)目之間需要解耦
2.組件需要給出使用方法（文檔）
3.組件需要能夠獨(dú)立運(yùn)行
4.組件需要有版本管理并且可以按需加載
5.需要一個(gè)工具把這些組件管理并且展示出來

在上述五大問題中，首先要解決組件與組件以及項(xiàng)目之間的解耦問題，為此，我們需要將組件內(nèi)部和其它組件以及項(xiàng)目耦合的部分剔除，然后通過props傳入，為了方便區(qū)分這些props與普通props，我們把他們放到了一個(gè)名為ds的對(duì)象中 。通常，這些耦合部分會(huì)是一些API或VUEX調(diào)用或者前端路由操作等。

同時(shí)， 為了方便這些組件的編寫和維護(hù)，我們給組件制定了更加嚴(yán)格的約束，同時(shí)將這些符合約束的復(fù)用組件稱為“區(qū)塊”，意思是可以獨(dú)立于項(xiàng)目的一個(gè)功能區(qū)域。

在解耦過程中，我們發(fā)現(xiàn)這些區(qū)塊的代碼可以有一些重復(fù)部分，比如ds的一些優(yōu)化和mock的注冊(cè)等，所以我們開發(fā)了一個(gè)vue插件。在項(xiàng)目使用區(qū)塊時(shí)，為了完成按需加載時(shí)的引用方式以及生產(chǎn)環(huán)境下Mock數(shù)據(jù)的剔除，我們又開發(fā)了一個(gè)webpack插件。

在具體實(shí)踐過程中，為了實(shí)現(xiàn)組件的復(fù)用，需要按照固定的結(jié)構(gòu)去寫組件，還需要在項(xiàng)目中修改main.js和webpack配置工作，所以，我們開發(fā)了CLI工具和GUI工具來生成項(xiàng)目和組件基本文件，同時(shí)管理和調(diào)試組件。

使用了區(qū)塊的開發(fā)模式后，雖然開發(fā)流程與之前相比并沒有太大區(qū)別，但有效提升了開發(fā)的速度，同時(shí)還能將任務(wù)拆分得更細(xì)，對(duì)于團(tuán)隊(duì)中的初學(xué)者來說，一個(gè)有使用文檔的業(yè)務(wù)組件更加容易被他們接受，對(duì)于業(yè)務(wù)的上手速度也更快。

本文根據(jù)個(gè)推高級(jí)前端開發(fā)工程師沈創(chuàng)在個(gè)推TechDay全國(guó)巡回沙龍廣州站的演講內(nèi)容進(jìn)行整理，略有刪減。
接下來，個(gè)推TechDay全國(guó)沙龍還將走進(jìn)成都、杭州、上海、深圳幾大城市，邀請(qǐng)業(yè)內(nèi)技術(shù)大咖跟大家一起交流學(xué)習(xí)，敬請(qǐng)期待！