目前前端項目大多基于Vue、React、Angular等框架來實現(xiàn)，這一類框架都有一個明顯的特點：基于模塊化以及組件化思維。所以，開發(fā)者在使用上述框架時，實際上是在寫一個一個的組件，并且組件與組件之間呈嵌套的形式。當一個項目中多次出現(xiàn)同一功能時，他們會選擇將其提取出來，并且放到components文件夾中，以達到復用的目的，但是這些復用都是基于同一項目的，所以，當寫另一個項目時，又要開始寫一些重復的代碼。
個推擁有多條業(yè)務線，在進行前端項目時總會遇到重復寫代碼的困境，所以，我們做了PCMS項目，主要為了解決跨項目之間的組件復用問題，其中的技術棧是基于Vue的，所以PCMS同時也是基于Vue項目實現(xiàn)的。
接下來我將基于自己在前端工作過程中的實踐，跟大家分享基于CMS的組件復用實踐。
想要實現(xiàn)跨項目之間的組件復用，需要解決以下問題，
1.組件與組件之間，組件與項目之間需要解耦
2.組件需要給出使用方法（文檔）
3.組件需要能夠獨立運行
4.組件需要有版本管理并且可以按需加載
5.需要一個工具把這些組件管理并且展示出來
在上述五大問題中，首先要解決組件與組件以及項目之間的解耦問題，為此，我們需要將組件內(nèi)部和其它組件以及項目耦合的部分剔除，然后通過props傳入，為了方便區(qū)分這些props與普通props，我們把他們放到了一個名為ds的對象中 。通常，這些耦合部分會是一些API或VUEX調(diào)用或者前端路由操作等。
同時， 為了方便這些組件的編寫和維護，我們給組件制定了更加嚴格的約束，同時將這些符合約束的復用組件稱為“區(qū)塊”，意思是可以獨立于項目的一個功能區(qū)域。
在解耦過程中，我們發(fā)現(xiàn)這些區(qū)塊的代碼可以有一些重復部分，比如ds的一些優(yōu)化和mock的注冊等，所以我們開發(fā)了一個vue插件。在項目使用區(qū)塊時，為了完成按需加載時的引用方式以及生產(chǎn)環(huán)境下Mock數(shù)據(jù)的剔除，我們又開發(fā)了一個webpack插件。
在具體實踐過程中，為了實現(xiàn)組件的復用，需要按照固定的結(jié)構(gòu)去寫組件，還需要在項目中修改main.js和webpack配置工作，所以，我們開發(fā)了CLI工具和GUI工具來生成項目和組件基本文件，同時管理和調(diào)試組件。
使用了區(qū)塊的開發(fā)模式后，雖然開發(fā)流程與之前相比并沒有太大區(qū)別，但有效提升了開發(fā)的速度，同時還能將任務拆分得更細，對于團隊中的初學者來說，一個有使用文檔的業(yè)務組件更加容易被他們接受，對于業(yè)務的上手速度也更快。
本文根據(jù)個推高級前端開發(fā)工程師沈創(chuàng)在個推TechDay全國巡回沙龍廣州站的演講內(nèi)容進行整理，略有刪減。
接下來，個推TechDay全國沙龍還將走進成都、杭州、上海、深圳幾大城市，邀請業(yè)內(nèi)技術大咖跟大家一起交流學習，敬請期待！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
