降龍-第6章：模板引擎

時(shí)間：2023-06-07 05:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-07 05:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

降龍-第6章：模板引擎：直到今天，仍然有很多網(wǎng)站采用iframe作為模板來(lái)構(gòu)建網(wǎng)頁(yè)。而像React一樣的前端框架則是采用了編譯打包用加載組件的方式解決模板復(fù)用的，這一點(diǎn)跟很多后端語(yǔ)言很像。今天我要講的是自己研發(fā)的模板引擎套件，是內(nèi)嵌在網(wǎng)站框架中存在的，用不用可以根據(jù)開關(guān)配置項(xiàng)來(lái)決定。

freemarker模板引擎是一款比較流行的插件，用起來(lái)也很方便直觀，甚至有很多專門為它開發(fā)的插件來(lái)渲染文檔樣式，花花綠綠的很好看，而我則是要顛覆它，相比React這樣的組件式開發(fā)要依賴打包服務(wù)器和前端框架支持相對(duì)比較重，我決定用最少的代碼實(shí)現(xiàn)一個(gè)輕量級(jí)的模板引擎功能。

直接上我最后的模板使用效果圖?：

這是我網(wǎng)站的微博系統(tǒng)首頁(yè)代碼，看到里面有很多${uuid}的字符串，這個(gè)就是我的模板引擎引入寫法了，操作和freemarker一樣，在原生的html頁(yè)面里面寫這個(gè)視覺沖擊效果是最強(qiáng)烈的，因?yàn)榫幾g器天然支持對(duì)網(wǎng)頁(yè)的代碼樣式渲染還不報(bào)錯(cuò)，同樣的樣式和腳本里面也支持這種寫法。

來(lái)看一下這種寫法的最終效果圖：

可以從上面兩張圖看到界面展示效果和代碼植入效果，這是數(shù)據(jù)動(dòng)態(tài)替換，像導(dǎo)航，側(cè)邊欄這種分欄設(shè)計(jì)模板則只需要引入一個(gè)網(wǎng)頁(yè)模板即可，而模板里面的樣式和代碼只需要模板自己處理好就行，來(lái)看一下圖片：

可以看到在模板里面也是支持模板的循環(huán)嵌套的，只不過(guò)不能寫成遞歸套用罷了，上面的截圖是網(wǎng)站右側(cè)邊欄的網(wǎng)頁(yè)代碼，實(shí)際效果如下：?

效果和寫法很簡(jiǎn)單，那么我們來(lái)看一下技術(shù)實(shí)現(xiàn)吧，先上一個(gè)代碼截圖?：

就是這么一個(gè)方法把資源請(qǐng)求、網(wǎng)頁(yè)壓縮、瀏覽器緩存、模板引擎的所有功能都包含進(jìn)去了，唯獨(dú)沒(méi)有實(shí)現(xiàn)的是后端渲染，這點(diǎn)我在比較靠后的章節(jié)會(huì)說(shuō)到，因?yàn)樾枰戎v自研mvc框架。

整個(gè)方法的排版是按照請(qǐng)求接口的頻率分布的，網(wǎng)頁(yè)、樣式、腳本、圖片、字體，然后在每一種類型的請(qǐng)求里面分別處理壓縮和模板替換，得到最終資源后返回輸出。

當(dāng)然現(xiàn)在看來(lái)這個(gè)思路是比較順的，那也是我代碼重構(gòu)后的結(jié)果，為了結(jié)構(gòu)看起來(lái)更加清晰，我把類似處理邏輯的代碼都封裝成了方法調(diào)用了，如下：

可以看到代碼都幾乎一樣，唯獨(dú)就是腳本壓縮我調(diào)用的谷歌插件，代碼邏輯也比較簡(jiǎn)單，這樣就完成了整個(gè)輕量級(jí)模板引擎的設(shè)計(jì)，最后就剩下模板替換的算法了，這里需求簡(jiǎn)單但是實(shí)現(xiàn)起來(lái)卻相對(duì)困難一些，有興趣可以自己嘗試謝謝看，我也沒(méi)去研究有沒(méi)有更高效的方法，我用的是一次遍歷，算法效率應(yīng)該不成問(wèn)題。

整個(gè)模板替換的核心就是針對(duì)".html"結(jié)尾的key做模板替換，其它的做鍵值對(duì)替換，入?yún)ap存儲(chǔ)的是鍵值對(duì)數(shù)據(jù)，這個(gè)在以后的后端渲染引擎中非常重要。然后算法的實(shí)現(xiàn)需要考慮邊界值，也就是指針后移的終止問(wèn)題，在寫法上算法是嚴(yán)格要求$和{之間不能有空格的，內(nèi)部key沒(méi)有要求。


然后".html"做為模板相比f(wàn)reemarker以".ftl"作為模板在模板源文件預(yù)覽上效果相差太明顯，我寫的這個(gè)就是跟網(wǎng)頁(yè)長(zhǎng)得一模一樣。輕量級(jí)模板引擎的開發(fā)就這樣結(jié)束了，代碼已上傳到github，有興趣的朋友可以下載參觀哈。?