?據(jù)小菜了解，對(duì)于java開發(fā)，涉及到頁面展示時(shí)，比較主流的有兩種解決方案：

?????????1. struts2+vo+el表達(dá)式。

???????? 這種方式，重點(diǎn)不在于struts2，而是vo和el表達(dá)式，其基本思想是：根據(jù)頁面需要的信息，構(gòu)造出一個(gè)實(shí)體，這個(gè)實(shí)體中包含了界面需要的所有屬性，通常這個(gè)實(shí)體是由N個(gè)表中的字段構(gòu)成的，俗稱vo。由于vo的屬性可以是String、List、Map等等等，又可以vo套vo，因此這種方式非常靈活，也非常好用。

???????? 在后臺(tái)對(duì)vo進(jìn)行賦值，通過struts2封裝到request中，然后在界面用el表達(dá)式，通常是${}、forEach標(biāo)簽什么的，即可構(gòu)造出界面。

???????? 但這種方式小菜卻不是很看好。因?yàn)檫@種利用標(biāo)簽控制html，依然是把表現(xiàn)和控制混雜在一起，html里邊混雜了大量el控制標(biāo)簽，很不美觀。

???????? 當(dāng)然，小菜不可能因?yàn)檫@么簡(jiǎn)單的理由拒絕這種方式，讀者仔細(xì)思考可以發(fā)現(xiàn)，利用el表達(dá)式生成html代碼，這是一個(gè)在服務(wù)器端執(zhí)行的動(dòng)作，在服務(wù)器端解析完成之后，才發(fā)送到客戶端瀏覽器上，這樣做會(huì)占用大量服務(wù)器資源，而且速度緩慢。

???????? 示例代碼：

<c:forEach?var='bm'?items="${contractAuditVo.borrowerModels}"><table><tbody><tr><td>借款人編號(hào)：</td><td><p>${bm.borrowerId?}</p></td></tr><tr><td>客戶編號(hào)：</td><td><p>${bm.customerId?}</p></td></tr><tr><td>曾用名：</td><td><p>${bm.usedName?}</p></td></tr></tbody></table> </c:forEach>

?

??? ? ?? 2. Json+ajax+拼html。

???????? 這種方法一般是基于ajax請(qǐng)求，要求服務(wù)器端返回一個(gè)json類型的json字符串，這個(gè)json串中包含了界面所需的所有信息，界面拿到j(luò)son串后，構(gòu)造出html，完成界面展示。

???????? 小菜推薦這種方法，通過這種方式編寫的頁面，反應(yīng)速度非常快，用戶體驗(yàn)非常好。

???????? 因?yàn)榉?wù)器端只需要提供一個(gè)json串，由客戶端完成解析，因此服務(wù)器承受的壓力很小，目前的電腦配置都較高，客戶端的瀏覽器解析js腳本很快，因此頁面體驗(yàn)效果好。

???????? 解析的過程大致是通過Jquery的each方法，進(jìn)行遍歷。

???????? 但是小菜利用這種方式時(shí)，犯了一個(gè)致命的錯(cuò)誤，小菜是通過原始的拼接html的方式，頁面中寫了大量html+=”<div>”;，這種寫法使頁面變得非常凌亂，幾乎不可以維護(hù)。

???????? 示例代碼：

?var?contractTextHtml=""; $.each(jsonObject.cl,function(i,n){contractTextHtml="";//插入合同文本數(shù)據(jù)contractTextHtml+="<div?title='出借人信息---"+hiddenNull(n.cm.lenderName)+"'?style='overflow:auto;padding:5px;'>";contractTextHtml+="<table?class='ui-table?ui-table-noborder'>";contractTextHtml+="<tbody>";contractTextHtml+="<tr><td>合同編號(hào)：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";contractTextHtml+="<tr?class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";contractTextHtml+="<tr><td>出借人證件類型：</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";contractTextHtml+="<tr?class='ui-table-split'><td>出借人證件號(hào)：</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";contractTextHtml+="<tr><td>出借金額：</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";contractTextHtml+="<tr?class='ui-table-split'><td>出借人編號(hào)：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";contractTextHtml+="<tr><td>出借人銀行帳號(hào)：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";contractTextHtml+="<tr?class='ui-table-split'><td>撮合編號(hào)：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";contractTextHtml+="</tbody>";contractTextHtml+="</table>";contractTextHtml+="</div>";$("#textList").append(contractTextHtml); });

???????? 造成這種問題的根本原因在于拼接html打亂了html原有的層次結(jié)構(gòu)，看不出來哪里是哪里，沒有了層次結(jié)構(gòu)的代碼，堆在那里就像是一坨垃圾。

???????? el表達(dá)式構(gòu)造html優(yōu)點(diǎn)是能夠保持html原有格式，js構(gòu)造html優(yōu)點(diǎn)是速度快省資源，為什么我們不能把二者的優(yōu)點(diǎn)結(jié)合在一起呢？這就是Handlebars.js。

???????? 既然要在項(xiàng)目中引入js模版引擎，就必須進(jìn)行技術(shù)選型，嚴(yán)格考核之后，才可以引入，就好像是木桶效應(yīng)，不能讓他成為項(xiàng)目中的短板。

???????? Handlebars.js是一款基于Jquery的插件，以json對(duì)象為數(shù)據(jù)源，支持邏輯判斷、循環(huán)等操作，同時(shí)具有非常好的擴(kuò)展性，體積60KB左右，經(jīng)過小菜仔細(xì)的分析研究，這是一款不可多得的js模版引擎。

引用地址：http://www.cnblogs.com/iyangyuan/p/3471267.html

轉(zhuǎn)載于:https://blog.51cto.com/issac/1564754

總結(jié)

以上是生活随笔為你收集整理的js模版引擎handlebars.js实用教程——为什么选择Handlebars.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。