Velocity是一個基於Java的Web頁面模版引擎。十多年前，Velocity將Java代碼從Web頁面中分離出來，使得開發者能夠並行網頁開發和Java開發。隨著十年前後端分離的浪潮涌動，迴首再面對這些基於Velocity的舊系統，無論是後端還是前端人員維護，都會存在諸多問題：

（1）後端人員維護：不熟悉前端開發模式，需要花費大量精力學習UI和Js框架；

（2）前端人員維護：Velocity渲染依賴Java環境，需要花費大量精力學習Maven工程、環境配置，且前端MVC框架版本老，開發效率低。

這種情況廣泛存在於零售內部的一些舊系統中，且業務需求的不斷迭代，會導致系統維護成本越來越高。針對需要頻繁迭代的頁面模塊，常見的應對措施是採用前後端分離方案，對頁面進行整體重構，但如此以後，整體重構的代價是巨大的，主要體現在如下幾點：

（1）需要覆蓋所有的業務場景和需求；

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

（3）頁面重構本身不帶來業務價值。

我們團隊承擔了B端業務，由於業務啟動時間早，也不可避免需要維護這些Velocity系統。

針對老系統維護難的痛點，我們在實踐中探索了一種對老系統侵入程度低、技術架構緩步升級的技術路線，分為4個步驟，分別是（1）搭建Velocity+MVC+MVVC混合架構；（2）建立Velocity單文件組件化能力；（3）創建Velocity本地沙盒環境；（4）Velocity頁面前後端分離。下麵分別進行詳細說明：

一、 搭建Velocity + MVC + MVVC混合架構

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

因此第一個步驟是在Velocity頁面中引入MVVC框架，實現兩套技術架構的共存。我們引入了Vue以及配套的UI組件庫，考慮Vue的主要因素有以下幾點：

（1）Vue支持Js資源鏈接的方式引入和使用，即在Velocity頁面中加入一行script標簽即可實現開箱即用；

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

混合架構內部，模板渲染需要分兩步進行： Velocity模板首先在服務端渲染為Vue模板，Vue模板在客戶端渲染為最終頁面。

混合架構存在的問題是，由於一些Session內關鍵參數是伺服器直出，Vue並不能直接獲取到這些參數，因此傳參的方案是在頁面中提前埋了一些占位符，Vue執行時通過訪問DOM來獲取。

後續需求迭代時，可以逐步將業務邏輯從老舊MVC技術棧遷移到新的MVVC技術棧中，實現開發、維護效率的提升。

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

當項目規模較大時，不同模塊之間可能存在一些相似的功能或邏輯，擺在面前的問題是如何實現模塊級的功能復用。

因此第二個步驟是在Velocity系統中引入組件化能力，實現跨頁面代碼復用。Velocity系統由於渲染依賴Java環境，難以適用基於NodeJs的前端工程化能力，無法直接使用Vue的單文件組件化能力。幸運的是，可以利用Velocity的包含（#include）和解析（#parse）能力，配合Vue的API介面，實現一種創新型的Velocity+Vue單文件組件化技術。

如果你熟悉Vue，你肯定對Vue單文件組件很熟悉了，即一個文件名以.vue尾碼結尾的文件，它描述了一個Vue組件，內部結構的三板斧：template、script、style，簡單來說分別描述了組件的模板呈現、邏輯交互、css樣式。

Velocity單文件組件的組織方式參照了這個層級結構，使用一個文件名以.vm尾碼結尾的文件，描述了一個Velocity組件，由於缺乏工程化的能力，區別點在於：（1）為了相容低版本瀏覽器，需要使用script標簽來承載模板；不考慮瀏覽器相容性的情況下，也可以直接使用template標簽。（2）需要手動調用Vue.component執行組件的註冊。

實現單文件組件化之後，Velocity頁面可以通過粒度更小的組件來層層組裝，實現系統的業務耦合程度進一步降低。

三、 創建Velocity本地沙盒環境 + 前端工程化

前面兩個步驟對系統整體架構進行了大幅優化，但是仍有一個痛點沒解決：Velocity渲染依賴Java環境，習慣了本地開發的前端同學會很無語：改一個小問題需要本地盲開發->線上部署容器->看效果->繼續盲修改，一來二去幾個小時就過去了。

因此第三個步驟是實現Velocity本地編譯和開發環境，並且引入工程化技術實現熱更新。

解決Velocity本地編譯的核心思路是模擬Server的環境變數，並且支持Velocity語法編譯。我們搭建了一套基於Velocity的前端沙盒工程，前者通過在工程中mock服務端變數的方式來實現，在本地JSON數據源承載這些環境變數；後者是基於Velocity語法AST重構，開發了一套解析引擎Velocity-loader，支持在webpack中實時解析文件並註入環境參數。

沙盒能力引入後，開發流程轉變為本地實時開發Velocity，熱更新達到毫秒級，開發體驗只有一個字：爽。

四、 Velocity頁面前後端分離

事實上，對比前三個步驟，我們距離Velocity頁面徹底前後端分離已經很接近了。

第四個步驟是真正實現Velocity頁面的前端獨立構建和部署，並永久擺脫依賴Server端渲染。但由於Vue-loader實際上會在工程編譯時把模板語法解析成render函數，已經破壞了模板語法的結構，因此不能支持在客戶端動態的解析Velocity，需要固化渲染環境變數。Velocity的動態數據渲染部分需要改寫為Vue的語法來實現，托靠客戶端Ajax來刷新動態數據和頁面。

至此，我們完整實現了對Velocity後端應用向前端工程化逐步演進之路，路漫漫其修遠兮，吾將上下而求索，也歡迎各位看官共同探討。

作者：京東零售 陳震

內容來源：京東雲開發者社區