JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

作为一个工作一年的菜鸟，在公司做了几个外包项目，也接触到了不同形式的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模板引擎。