隨著互聯(lián)網(wǎng)的快速發(fā)展，web 業(yè)務(wù)也越來越復(fù)雜和多元化，以前的那種前后端一起的方式越來越跟不上發(fā)展節(jié)奏，前后端逐步分離，隨之前端的任務(wù)也日漸變得重要起來。
本文主要分享長亮科技 WEB 前端團(tuán)隊根據(jù)業(yè)務(wù)場景特點研發(fā)的企業(yè)級前端框架組件化方案。
組件技術(shù)：高內(nèi)聚低耦合
組件（component）的意義比較廣泛。軟件工程里被翻譯為“構(gòu)件”。構(gòu)件是面向軟件體系架構(gòu)的可復(fù)用軟件模塊。 構(gòu)件可以是一個工具類（utils）， 也可以是一個中間件（如：MQ）。
早在2013年W3C提出了“Web Components”草案，隨著前端web應(yīng)用的迅速發(fā)展，出現(xiàn)了React、VUE、Angular等主流的組件化開發(fā)框架。在VUE中組件是可復(fù)用的 Vue 實例。而VUE的插件技術(shù)，提供了組件間依賴引用、靈活組裝的可能。本文實踐方案，以VUE技術(shù)為基礎(chǔ)講解。
組件化開發(fā)需要思考以下問題：
●怎樣以依賴方式使用組件？
●怎樣保證拆分組件，整合時風(fēng)格統(tǒng)一？
●怎樣管理組件依賴版本？
●怎樣解決組件（包含公共JS、CSS）依賴引入多次打包壓縮問題？
組件分類：基礎(chǔ)組件和業(yè)務(wù)組件
企業(yè)內(nèi)部要實現(xiàn)組件化開發(fā)，可以根據(jù)自身業(yè)務(wù)實際情況，首先明確好“組件”的定義，達(dá)成共識。可將組件歸為兩大類，基礎(chǔ)組件和業(yè)務(wù)組件，如下所示。
各組件層級關(guān)系圖如下：
總體設(shè)計
長亮科技的前端框架解決方案設(shè)計原則，主要以“開源低耦合”、“靈活組裝”、“簡單快捷”等關(guān)鍵詞為出發(fā)點。
開源低耦合
為避免重復(fù)造輪子，減輕上手難度和學(xué)習(xí)成本，充分復(fù)用現(xiàn)在開源技術(shù)的優(yōu)勢和積累。 會選擇基于“開源框架”為起點，搭建前端框架。
但同時考慮框架核心功能盡量避免對開源技術(shù)的強綁定，增加中間層對開源組件進(jìn)行包裝，以達(dá)到低成本替換的目的。
靈活組裝
前端框架主要是對業(yè)務(wù)組件的積累，抽取企業(yè)內(nèi)部普遍業(yè)務(wù)場景，沉淀各業(yè)務(wù)組件庫。各組件庫是能夠獨立開發(fā)、依賴使用的。除基礎(chǔ)組件庫可被其他組件依賴使用之外，盡量避免組件庫間高度耦合。
簡單快捷
根據(jù)公司內(nèi)部實際情況，前端框架服務(wù)于兩方面的人員，一是非專業(yè)前端人員（后端人員）， 二是專業(yè)前端人員。
針對“非專業(yè)前端人員”，需要考慮“零JS”代碼開發(fā)，以簡單配置方式快速對接后臺接口，開發(fā)出頁面功能。
針對“專業(yè)前端人員”，要提供統(tǒng)一區(qū)域級、頁面級布局組件，固化樣式，以最大程度統(tǒng)一頁面風(fēng)格，減少溝通管理成本，快速協(xié)作開發(fā)。
前端框架總體設(shè)計
如上圖所示，前端框架基于VUE + Element UI等開源技術(shù)為底座，以減輕開發(fā)人員的學(xué)習(xí)成本，而前端框架支持整個應(yīng)用系統(tǒng)功能的開發(fā)。
按組件分類，前端框架分為了6大模塊。每個模塊作為獨立的工程發(fā)布為插件，模塊本身可以存在依賴關(guān)系，如：工具類和基礎(chǔ)組件，作為最小的模塊，為其他模塊提供支持，其他模塊的功能，基于這兩個模塊開發(fā)。
前端框架組件視圖
●基礎(chǔ)組件（Base Components）
基礎(chǔ)UI組件，主要指開源的ELement UI組件和一些算定義擴展的組件，如： 表單控件，表格，按鈕等
●工具類（Utils Components）
公共方法工具，包含常用的多組件共用的工具方法類
●業(yè)務(wù)組件（Business Components）
為減少分類過程，且考慮到目前基礎(chǔ)業(yè)務(wù)組件抽取的很少，我們將業(yè)務(wù)基礎(chǔ)組件和區(qū)域組件，統(tǒng)一歸到此模塊里。區(qū)域組件可以認(rèn)為是從頁面模板組件中抽取出來的小組件。如： 查詢頁面模板包含表單條件區(qū)域、工具欄區(qū)域和表格區(qū)域（包含分頁），我們可以抽取出表單區(qū)域組件、工具欄區(qū)域組件、表格區(qū)域組件，每個區(qū)域組件主要借助slot插槽等機制，實現(xiàn)功能擴展
●頁面模板（Template Components）
頁面模板是將特定的一些常用業(yè)務(wù)場景封裝成模板。可通過簡單的配置，實現(xiàn)頁面業(yè)務(wù)功能，適用于后臺或前端基礎(chǔ)較弱的開發(fā)者
頁面模板化，目標(biāo)是實現(xiàn)80%常見頁面功能由“模板+模板數(shù)據(jù)”生成，20%不能滿足的采取基于現(xiàn)有組件自定義開發(fā)方式開發(fā)。示例如下：
●后管框架（admin-Cli）
此模塊為前端框架提供了所有組件聚合的方案。主要是針對后端管理系統(tǒng)而搭建的，包含了后臺管理系統(tǒng)常見的功能，例如登錄，路由菜單，布局，主題換膚，多語言切換，數(shù)據(jù)字典，元素權(quán)限控制等
●插件工程（Plugin-Cli）
此模塊功能組件插件化提供腳手架支持。腳手架創(chuàng)建出來的前端工程，自帶搭建好了組件開發(fā)規(guī)范目錄結(jié)構(gòu)，配套Markdown文檔自動生成在線文檔機制，組件開發(fā)調(diào)試運行機制等
前端框架在真實應(yīng)用中可以應(yīng)用于三方面：
1、開發(fā)插件應(yīng)用： 基于插件腳手架工程，快速搶建和發(fā)布插件到私服，供其他項目依賴使用
2、組件庫依賴使用： 無論項目使用的開發(fā)框架是前端框架提供的腳手架工程，還是原生vue腳手架工程，可以引入前端框架提供的業(yè)務(wù)組件庫
3、后管框架使用： 前端框架提供一整體后管基礎(chǔ)功能框架，可直接基于此腳手架工程開發(fā)。如果后端人員，可以借助“頁面模板”以JSON配置加后臺接口數(shù)據(jù)驅(qū)動，“零JS”渲染出頁面；如果是前端人員，可以借助業(yè)務(wù)組件庫提供的組件與頁面模板“混合開發(fā)”，既可JSON配置，又可使用原生VUE開發(fā)
接下來從長亮科技的兩個應(yīng)用場景看前端框架的具體實踐。
實踐一：功能組件插件化拆分與組合
將公司各業(yè)務(wù)系統(tǒng)公共功能抽取出來，形成統(tǒng)一的組件，以便節(jié)約人力開發(fā)成本和維護(hù)成本。使用前端框架的插件腳手架工程，可以快速搭建一組件化插件工程，將組件功能發(fā)布成可以使用“模板依賴”的方式，組件搭配使用。
上圖中表明，基礎(chǔ)應(yīng)用平臺的“機構(gòu)選擇”和“人員選擇”功能，可以作為公共功能抽取出組件，發(fā)布到私服，由“績效系統(tǒng)”“內(nèi)部資金轉(zhuǎn)移定價”等系統(tǒng)使用。 績效系統(tǒng)中的“業(yè)務(wù)查詢管理”依賴“基礎(chǔ)應(yīng)用平臺”的功能完成，內(nèi)部資金轉(zhuǎn)移定價中的“定價測算”也是依賴“基礎(chǔ)應(yīng)用平臺”功能。
通過前端框架提供的插件腳手架工程，可以將項目工程組件發(fā)布成插件，上傳到Nexus私有， 其他項目業(yè)務(wù)系統(tǒng)前端工程以“模塊依賴”方式依賴使用。
實踐二： “零JS”開發(fā)頁面
前端框架中存在大粒度的比較特殊的頁面模板組件。頁面模板，是根據(jù)內(nèi)部業(yè)務(wù)場景溝通交流，抽取出來的，以“頁面”為整體的解決方案組件。 頁面模板，以JSON的方式配置前端頁面功能。
傳統(tǒng)的VUE實現(xiàn)：
利用表單模板組件配置JSON實現(xiàn)：
傳統(tǒng)的VUE實現(xiàn)除了要編寫繁瑣的HTML和組件標(biāo)簽外還需JS實現(xiàn)解凍提交彈框等事件邏輯。而通過JSON形式只需配置表單控件類型，操作欄解凍按鈕，表格以及初始化的接口地址即可輕松實現(xiàn)。JSON模板內(nèi)置數(shù)據(jù)初始化，數(shù)據(jù)提交等與后端交互邏輯以及多種事件聯(lián)動功能。開發(fā)者都可通過簡單的配置實現(xiàn)這些功能。
再從以下三個維度比較一下這兩種開發(fā)模式：
從開發(fā)人員技術(shù)熟練度來看，使用VUE開發(fā)，需掌握一定的前端知識。而通過這種JSON配置開發(fā)，開發(fā)人員無需任何前端基礎(chǔ)，真正實現(xiàn)開發(fā)使用”零門檻”。
從開發(fā)時間來看，開發(fā)一個上文所提的查詢表格頁面，使用VUE至少需要1小時左右，而使用JSON開發(fā)，時間可控制在10分鐘內(nèi)。
使用業(yè)務(wù)模板組件利用JSON配置開發(fā)前端頁面模式，已使用于多個項目。項目客戶真實數(shù)據(jù)反饋：通過這種JSON配置開發(fā)頁面，可快速開發(fā)POC頁面功能，與傳統(tǒng)的頁面開發(fā)模式相比，JSON配置開發(fā)至少節(jié)約一半人力和頁面開發(fā)時間。
總結(jié)
企業(yè)級前端框架具備的能力，首先需要一個基礎(chǔ)框架為支撐，其次以企業(yè)內(nèi)部具體業(yè)務(wù)場景為起點，分析、抽取、持續(xù)積累沉淀具體業(yè)務(wù)組件，結(jié)合統(tǒng)一規(guī)范約束，快速搭建、組裝出業(yè)務(wù)系統(tǒng)的能力。
