爲何要使用JS模板引擎

我以前在寫一個輸入聯想控件的時候，改過好幾個版本，每一個版本不是由於性能很差就是由於代碼凌亂而被推翻，最後用了understore模板引擎，效果有明顯改善。整好這兩天在研究互聯網技術架構，發現不少的開發框架前端都是使用js模板引擎，感悟真的是大道至簡，異曲同工啊，哈哈。

 

關於爲何使用js模板引擎，在博客園發現園友的一片文章《js模版引擎handlebars.js實用教程——爲何選擇Handlebars.js》，該文已經作了詳細解答。下面內容轉自該文：

 

 據小菜瞭解，對於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模版引擎。