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后端應用向前端工程化逐步演進之路，路漫漫其修遠兮，吾將上下而求索，也歡迎各位看官共同探討，
作者：京東零售 陳震
內容來源：京東云開發者社區
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553341.html
標籤：其他
上一篇：Web服務器
下一篇：返回列表