為什么使用模板引擎

作為一個工作一年的菜鳥，在公司做了幾個外包項目，也接觸到了不同形式的web開發。其實也沒多少，就是javaweb開發和HTML5移動開發，這兩者在頁面展示的時候的解決方案還是有所不同的。

1、vo+el表達式

　　在javaweb開發中，我們使用的是SSM框架（Spring,SpringMVC,Mybatis）。一些頁面的跳轉，我們通過返回SpringMVC的ModelAndView來實現，並采用這種方式來展示頁面。

　　其基本思想是：后端構造實體類，這個實體類里面包含目標頁面所需要的所有屬性，這個實體類由一張表或多張表中對應的字段組成，俗稱vo（value object）。屬性的值可以是String，int，Map，List等等，也就是說vo里面又可以套vo，因此這種方式非常靈活好用。

　　但是這種方式，把要展示的內容和控制混雜在一起，html里邊混雜了大量el控制標簽，很不美觀。並且，利用el表達式生成html代碼，這是一個在服務器端執行的動作，在服務器端解析完成之后，才發送到客戶端瀏覽器上，這樣做會占用大量服務器資源，而且速度緩慢。

示例如下：

<c:forEach var="advert" items="${advertInfo.getList()}">
    <tr class="text-c">
        <td>${advert.advert_id}</td>
        <td>${advert.advert_name}</td>
        <td><img src="${advert.advert_img}" width="100" alt="廣告圖片"/></td>
        <td>${advert.advert_url}</td>
        <td>
            <c:if test="${advert.advert_usable eq 0}"><span class="usable-close">不可用</span></c:if>
            <c:if test="${advert.advert_usable eq 1}"><span class="usable-start">可用</span></c:if>
        </td>
        <td>${advert.advert_index}</td>
        <td><fmt:formatDate value="${advert.create_time}" pattern="yyyy-MM-dd"/></td>
        <td class="td-manage">
            <c:if test="${advert.advert_usable eq 0}">
                <a class="ml-5 advert-usable" data-state="1" title="開啟" href="javascript:;"><span class="Hui-iconfont Hui-iconfont-shenhe-tongguo"></span></a>
            </c:if>
            <c:if test="${advert.advert_usable eq 1}">
                <a class="ml-5 advert-usable" data-state="0" title="關閉" href="javascript:;"><span class="Hui-iconfont Hui-iconfont-shenhe-tingyong"></span></a>
            </c:if>
            <a class="ml-5 advert-delete" title="刪除" href="javascript:;"><span class="Hui-iconfont Hui-iconfont-del2"></span></a>
        </td>
    </tr>
</c:forEach>

2、ajax+JSON拼接html

　　HTML5開發移動端界面，我們采用這種方式進行前后端交互，這也是目前比較熱門一種方式。

　　其基本思想是：通過ajax發起請求，服務端返回一個json字符串，這個json字符串中包含前端需要展示的信息，前端拿到json串后，通過拼接html來完成界面的展示。

示例如下：

$.ajax({
    url: "localhost:8080/demo/advertList.do",
    type: "post",
    async: true,
    dataType: "json",
    success: function(data) {
        var content = "";
        for (var i = 0, len = data.length; i < len; i++) {
            content += '<div class="mui-slider-group mui-slider-loop">' +
                '<div class="mui-slider-item mui-slider-item-duplicate"><a><img name="' + res[i].advertUrl + '" class="img_slider" src="' + res[i].advertName + '" /></a></div>' +
                '<div class="mui-slider-item"><img name="' + res[i].advertUrl + '" class="img_slider" src="' + res[i].advertName + '" /></div>' +
                '<div class="mui-slider-item"><a><img name="' + res[i].advertUrl + '" class="img_slider" src="' + res[i].advertName + '" /></a></div>' +
                '<div class="mui-slider-item"><a><img name="' + res[i].advertUrl + '" class="img_slider" src="' + res[i].advertName + '" /></a></div>' +
                '<div class="mui-slider-item mui-slider-item-duplicate"><a><img name="' + res[i].advertUrl + '" class="img_slider" src="' + res[i].advertName + '" /></a></div>' +
                '</div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div>' +
                '<div class="mui-indicator"></div><div class="mui-indicator"></div></div>';
        }
        document.getElementById("ul_list").innerHTML = content;
    },
    error: function(xhr, type, errorThrown) {
        console.log(type);
    }
});

　　這樣做的好處就是，服務端只負責返回數據，而頁面的展示由前端來完成，服務器承受的壓力明顯減少。但是缺點也很明顯，那就是字符串中拼接了大量的html標簽，可維護性極低。拼接html，打亂了html原有的層次結構，根本看不出來原來的結構，整個就是一坨字符串堆積在那里。

3、javascript模板引擎

　　javascript模板引擎可以很好的保留html原有格式，並且保留js構建html速度快的特點。我們之前做移動端開發，了解了幾款模板引擎后，選擇了artTemplate.js，因為他更加符合我們的需求並且性能相對較高。

示例如下：

html部分

<script type="text/html" id="advert_tmpl">
    {{each list as value i}}
    <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a><img name="{{value.advertName}}" lass="img_slider" src="{{value.advertUrl}}" />{{value.advertName}}</a>
        </div>
    </div>
    {{/each}}
</script>

javascript部分：

var advertList = template("advert_tmpl", data);
document.getElementById("ul_list").innerHTML = advertList;

　　可以很明顯地看到，采用javascript模板引擎來實現頁面的展示。不僅html結構清晰，而且javascript部分只需要處理邏輯，不需要進行過多的html拼接操作。而且artTemplate.js文件只有6KB左右，同時具有良好的可擴展性，是一款不可多得的javascript模板引擎。