據小菜了解，對於java開發，涉及到頁面展示時，比較主流的有兩種解決方案：
1. struts2+vo+el表達式。
這種方式，重點不在於struts2，而是vo和el表達式，其基本思想是：根據頁面需要的信息，構造出一個實體，這個實體中包含了界面需要的所有屬性，通常這個實體是由N個表中的字段構成的，俗稱vo。由於vo的屬性可以是String、List、Map等等等，又可以vo套vo，因此這種方式非常靈活，也非常好用。
在后台對vo進行賦值，通過struts2封裝到request中，然后在界面用el表達式，通常是${}、forEach標簽什么的，即可構造出界面。
但這種方式小菜卻不是很看好。因為這種利用標簽控制html，依然是把表現和控制混雜在一起，html里邊混雜了大量el控制標簽，很不美觀。
當然，小菜不可能因為這么簡單的理由拒絕這種方式，讀者仔細思考可以發現，利用el表達式生成html代碼，這是一個在服務器端執行的動作，在服務器端解析完成之后，才發送到客戶端瀏覽器上，這樣做會占用大量服務器資源，而且速度緩慢。
示例代碼：
1 <c:forEach var='bm' items="${contractAuditVo.borrowerModels}"> 2 <table> 3 <tbody> 4 <tr> 5 <td>借款人編號：</td> 6 <td> 7 <p> 8 ${bm.borrowerId } 9 </p> 10 </td> 11 </tr> 12 <tr> 13 <td>客戶編號：</td> 14 <td> 15 <p> 16 ${bm.customerId } 17 </p> 18 </td> 19 </tr> 20 <tr> 21 <td>曾用名：</td> 22 <td> 23 <p> 24 ${bm.usedName } 25 </p> 26 </td> 27 </tr> 28 </tbody> 29 </table> 30 </c:forEach>
2. Json+ajax+拼html。
這種方法一般是基於ajax請求，要求服務器端返回一個json類型的json字符串，這個json串中包含了界面所需的所有信息，界面拿到json串后，構造出html，完成界面展示。
小菜推薦這種方法，通過這種方式編寫的頁面，反應速度非常快，用戶體驗非常好。
因為服務器端只需要提供一個json串，由客戶端完成解析，因此服務器承受的壓力很小，目前的電腦配置都較高，客戶端的瀏覽器解析js腳本很快，因此頁面體驗效果好。
解析的過程大致是通過Jquery的each方法，進行遍歷。
但是小菜利用這種方式時，犯了一個致命的錯誤，小菜是通過原始的拼接html的方式，頁面中寫了大量html+=”<div>”;，這種寫法使頁面變得非常凌亂，幾乎不可以維護。
示例代碼：
1 var contractTextHtml=""; 2 $.each(jsonObject.cl,function(i,n){ 3 4 contractTextHtml=""; 5 6 //插入合同文本數據 7 contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>"; 8 contractTextHtml+="<table class='ui-table ui-table-noborder'>"; 9 contractTextHtml+="<tbody>"; 10 contractTextHtml+="<tr><td>合同編號：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>"; 11 contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>"; 12 contractTextHtml+="<tr><td>出借人證件類型：</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>"; 13 contractTextHtml+="<tr class='ui-table-split'><td>出借人證件號：</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>"; 14 contractTextHtml+="<tr><td>出借金額：</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>"; 15 contractTextHtml+="<tr class='ui-table-split'><td>出借人編號：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>"; 16 contractTextHtml+="<tr><td>出借人銀行帳號：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>"; 17 contractTextHtml+="<tr class='ui-table-split'><td>撮合編號：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>"; 18 contractTextHtml+="</tbody>"; 19 contractTextHtml+="</table>"; 20 contractTextHtml+="</div>"; 21 $("#textList").append(contractTextHtml); 22 });
造成這種問題的根本原因在於拼接html打亂了html原有的層次結構，看不出來哪里是哪里，沒有了層次結構的代碼，堆在那里就像是一坨垃圾。
el表達式構造html優點是能夠保持html原有格式，js構造html優點是速度快省資源，為什么我們不能把二者的優點結合在一起呢？這就是Handlebars.js。
既然要在項目中引入js模版引擎，就必須進行技術選型，嚴格考核之后，才可以引入，就好像是木桶效應，不能讓他成為項目中的短板。
Handlebars.js是一款基於Jquery的插件，以json對象為數據源，支持邏輯判斷、循環等操作，同時具有非常好的擴展性，體積60KB左右，經過小菜仔細的分析研究，這是一款不可多得的js模版引擎。