為什麼選擇Handlebars.js

標籤：erb   左右   對象   維護   文本   amount   div   style   java開發   

據瞭解，對於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代碼，這是一個在伺服器端執行的動作，在伺服器端解析完成之後，才發送到用戶端瀏覽器上，這樣做會佔用大量伺服器資源，而且速度緩慢。

         範例程式碼：

<c:forEach var=‘bm‘ items="${contractAuditVo.borrowerModels}">
<table>
<tbody>
<tr>
<td>借款人編號：</td>
<td>
<p>
${bm.borrowerId }
</p>
</td>
</tr>
<tr>
<td>客戶編碼：</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請求，要求伺服器端返回一個json類型的json字串，這個json串中包含了介面所需的所有資訊，介面拿到json串後，構造出html，完成介面展示。

         小菜推薦這種方法，通過這種方式編寫的頁面，反應速度非常快，使用者體驗非常好。

         因為伺服器端只需要提供一個json串，由用戶端完成解析，因此伺服器承受的壓力很小，目前的電腦配置都較高，用戶端的瀏覽器解析js指令碼很快，因此頁面體驗效果好。

         解析的過程大致是通過Jquery的each方法，進行遍曆。

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

         範例程式碼：

var contractTextHtml="";
$.each(jsonObject.cl,function(i,n){

contractTextHtml="";

//插入合約文本資料
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>合約編號：</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>出借人證件號：</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>出借人編號：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
contractTextHtml+="<tr><td>出借人銀行帳號：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
contractTextHtml+="<tr class=‘ui-table-split‘><td>撮合編號：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
contractTextHtml+="</tbody>";
contractTextHtml+="</table>";
contractTextHtml+="</div>";
$("#textList").append(contractTextHtml);
});

造成這種問題的根本原因在於拼接html打亂了html原有的階層，看不出來哪裡是哪裡，沒有了階層的代碼，堆在那裡就像是一坨垃圾。

         el運算式構造html優點是能夠保持html原有格式，js構造html優點是速度快省資源，為什麼我們不能把二者的優點結合在一起呢？這就是Handlebars.js。

         既然要在項目中引入js模版引擎，就必須進行技術選型，嚴格考核之後，才可以引入，就好像是木桶效應，不能讓他成為項目中的短板。

         Handlebars.js是一款基於Jquery的外掛程式，以json對象為資料來源，支援邏輯判斷、迴圈等操作，同時具有非常好的擴充性，體積60KB左右，經過仔細的分析研究，這是一款不可多得的js模版引擎。

為什麼選擇Handlebars.js