Velocity是一個(gè)基于Java的Web頁面模版引擎。十多年前，Velocity將Java代碼從Web頁面中分離出來，使得開發(fā)者能夠并行網(wǎng)頁開發(fā)和Java開發(fā)。隨著十年前后端分離的浪潮涌動，回首再面對這些基于Velocity的舊系統(tǒng)，無論是后端還是前端人員維護(hù)，都會存在諸多問題：

（1）后端人員維護(hù)：不熟悉前端開發(fā)模式，需要花費(fèi)大量精力學(xué)習(xí)UI和Js框架；

（2）前端人員維護(hù)：Velocity渲染依賴Java環(huán)境，需要花費(fèi)大量精力學(xué)習(xí)Maven工程、環(huán)境配置，且前端MVC框架版本老，開發(fā)效率低。

這種情況廣泛存在于零售內(nèi)部的一些舊系統(tǒng)中，且業(yè)務(wù)需求的不斷迭代，會導(dǎo)致系統(tǒng)維護(hù)成本越來越高。針對需要頻繁迭代的頁面模塊，常見的應(yīng)對措施是采用前后端分離方案，對頁面進(jìn)行整體重構(gòu)，但如此以后，整體重構(gòu)的代價(jià)是巨大的，主要體現(xiàn)在如下幾點(diǎn)：

（1）需要覆蓋所有的業(yè)務(wù)場景和需求；

（2）缺乏覆蓋全場景的測試物料；

（3）頁面重構(gòu)本身不帶來業(yè)務(wù)價(jià)值。

我們團(tuán)隊(duì)承擔(dān)了B端業(yè)務(wù)，由于業(yè)務(wù)啟動時(shí)間早，也不可避免需要維護(hù)這些Velocity系統(tǒng)。

針對老系統(tǒng)維護(hù)難的痛點(diǎn)，我們在實(shí)踐中探索了一種對老系統(tǒng)侵入程度低、技術(shù)架構(gòu)緩步升級的技術(shù)路線，分為4個(gè)步驟，分別是（1）搭建Velocity+MVC+MVVC混合架構(gòu)；（2）建立Velocity單文件組件化能力；（3）創(chuàng)建Velocity本地沙盒環(huán)境；（4）Velocity頁面前后端分離。下面分別進(jìn)行詳細(xì)說明：

一、 搭建Velocity + MVC + MVVC混合架構(gòu)

Velocity系統(tǒng)多數(shù)還在使用JQuery等Js框架，開發(fā)效率低，亟待改善。對比MVC框架和MVVC框架，MVVC框架封裝了視圖層邏輯，開發(fā)效率顯著提升。

因此第一個(gè)步驟是在Velocity頁面中引入MVVC框架，實(shí)現(xiàn)兩套技術(shù)架構(gòu)的共存。我們引入了Vue以及配套的UI組件庫，考慮Vue的主要因素有以下幾點(diǎn)：

（1）Vue支持Js資源鏈接的方式引入和使用，即在Velocity頁面中加入一行script標(biāo)簽即可實(shí)現(xiàn)開箱即用；

（2）Velocity的頁面編寫語法與Vue的模板語法非常接近。

混合架構(gòu)內(nèi)部，模板渲染需要分兩步進(jìn)行： Velocity模板首先在服務(wù)端渲染為Vue模板，Vue模板在客戶端渲染為最終頁面。

混合架構(gòu)存在的問題是，由于一些Session內(nèi)關(guān)鍵參數(shù)是服務(wù)器直出，Vue并不能直接獲取到這些參數(shù)，因此傳參的方案是在頁面中提前埋了一些占位符，Vue執(zhí)行時(shí)通過訪問DOM來獲取。

后續(xù)需求迭代時(shí)，可以逐步將業(yè)務(wù)邏輯從老舊MVC技術(shù)棧遷移到新的MVVC技術(shù)棧中，實(shí)現(xiàn)開發(fā)、維護(hù)效率的提升。

二、 建立Velocity單文件組件化能力

當(dāng)項(xiàng)目規(guī)模較大時(shí)，不同模塊之間可能存在一些相似的功能或邏輯，擺在面前的問題是如何實(shí)現(xiàn)模塊級的功能復(fù)用。

因此第二個(gè)步驟是在Velocity系統(tǒng)中引入組件化能力，實(shí)現(xiàn)跨頁面代碼復(fù)用。Velocity系統(tǒng)由于渲染依賴Java環(huán)境，難以適用基于NodeJs的前端工程化能力，無法直接使用Vue的單文件組件化能力。幸運(yùn)的是，可以利用Velocity的包含（#include）和解析（#parse）能力，配合Vue的API接口，實(shí)現(xiàn)一種創(chuàng)新型的Velocity+Vue單文件組件化技術(shù)。

如果你熟悉Vue，你肯定對Vue單文件組件很熟悉了，即一個(gè)文件名以.vue后綴結(jié)尾的文件，它描述了一個(gè)Vue組件，內(nèi)部結(jié)構(gòu)的三板斧：template、script、style，簡單來說分別描述了組件的模板呈現(xiàn)、邏輯交互、css樣式。

Velocity單文件組件的組織方式參照了這個(gè)層級結(jié)構(gòu)，使用一個(gè)文件名以.vm后綴結(jié)尾的文件，描述了一個(gè)Velocity組件，由于缺乏工程化的能力，區(qū)別點(diǎn)在于：（1）為了兼容低版本瀏覽器，需要使用script標(biāo)簽來承載模板；不考慮瀏覽器兼容性的情況下，也可以直接使用template標(biāo)簽。（2）需要手動調(diào)用Vue.component執(zhí)行組件的注冊。

實(shí)現(xiàn)單文件組件化之后，Velocity頁面可以通過粒度更小的組件來層層組裝，實(shí)現(xiàn)系統(tǒng)的業(yè)務(wù)耦合程度進(jìn)一步降低。

三、 創(chuàng)建Velocity本地沙盒環(huán)境 + 前端工程化

前面兩個(gè)步驟對系統(tǒng)整體架構(gòu)進(jìn)行了大幅優(yōu)化，但是仍有一個(gè)痛點(diǎn)沒解決：Velocity渲染依賴Java環(huán)境，習(xí)慣了本地開發(fā)的前端同學(xué)會很無語：改一個(gè)小問題需要本地盲開發(fā)->在線部署容器->看效果->繼續(xù)盲修改，一來二去幾個(gè)小時(shí)就過去了。

因此第三個(gè)步驟是實(shí)現(xiàn)Velocity本地編譯和開發(fā)環(huán)境，并且引入工程化技術(shù)實(shí)現(xiàn)熱更新。

解決Velocity本地編譯的核心思路是模擬Server的環(huán)境變量，并且支持Velocity語法編譯。我們搭建了一套基于Velocity的前端沙盒工程，前者通過在工程中mock服務(wù)端變量的方式來實(shí)現(xiàn)，在本地JSON數(shù)據(jù)源承載這些環(huán)境變量；后者是基于Velocity語法AST重構(gòu)，開發(fā)了一套解析引擎Velocity-loader，支持在webpack中實(shí)時(shí)解析文件并注入環(huán)境參數(shù)。

沙盒能力引入后，開發(fā)流程轉(zhuǎn)變?yōu)楸镜貙?shí)時(shí)開發(fā)Velocity，熱更新達(dá)到毫秒級，開發(fā)體驗(yàn)只有一個(gè)字：爽。

四、 Velocity頁面前后端分離

事實(shí)上，對比前三個(gè)步驟，我們距離Velocity頁面徹底前后端分離已經(jīng)很接近了。

第四個(gè)步驟是真正實(shí)現(xiàn)Velocity頁面的前端獨(dú)立構(gòu)建和部署，并永久擺脫依賴Server端渲染。但由于Vue-loader實(shí)際上會在工程編譯時(shí)把模板語法解析成render函數(shù)，已經(jīng)破壞了模板語法的結(jié)構(gòu)，因此不能支持在客戶端動態(tài)的解析Velocity，需要固化渲染環(huán)境變量。Velocity的動態(tài)數(shù)據(jù)渲染部分需要改寫為Vue的語法來實(shí)現(xiàn)，托靠客戶端Ajax來刷新動態(tài)數(shù)據(jù)和頁面。

至此，我們完整實(shí)現(xiàn)了對Velocity后端應(yīng)用向前端工程化逐步演進(jìn)之路，路漫漫其修遠(yuǎn)兮，吾將上下而求索，也歡迎各位看官共同探討。

作者：京東零售 陳震

內(nèi)容來源：京東云開發(fā)者社區(qū)文章來源地址http://www.zghlxwxcb.cn/news/detail-457561.html

到了這里，關(guān)于Velocity 不用愁！Velocity 系統(tǒng)的前端工程化之路的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！