art-template模板浅析

js的模板引擎有很多。art-template模板是腾讯出的，收藏了两篇文章，讲的比较系统，简单来说就是一个数据和页面的拼接渲染模板，用于前端将从后台接口请求到的数据和html页面进行拼接渲染，而不是使用字符串拼接页面的方式渲染。

具体跟 Vue、React 这些前端主流框架比较的性能，官方并未给出数据，但是我认为只比较页面渲染能力的话，应该相差不多， Vue、React 是一整套的前端解决方案，而 art-template 只是一个 js模板引擎，二者定位和功能不同，不做详细比较，猜测 art-template 同样是使用虚拟 DOM 的方式进行页面渲染，否则能达到这样的性能，着实不容易。就学习而言，如果学习过 Vue、React，学这个非常简单，反过来学会 art-template 对学习 Vue、React也有一定帮助。

简单使用：
1.引入js文件(省略)
2.写模板(通过id的名字匹配)

<script id="art-template" type="text/html">
<table>
   /******/
    <tbody>
        {{each classInfoList}}
        <tr>
            <td>{{$index+1}}</td>
            <td>{{$value.Id}}</td>
            <td>{{$value.Name}}</td>
            <td>{{$value.Teacher}}</td>
            <td>{{$value.Remark}}</td>
            <td>
                <a href="{{$value.Uri}}">删除</a>
            </td>
        </tr>
        {{/each}}
    </tbody>
</table>
</script>

3.模板拼接

var datas = {
    title: "",
    classInfoList: []
}
$.ajax({
    type: "GET",
    dataType:"JSON",
    url: "/ClassHandler.ashx",
    success: function (data) {
        //原生JS序列化JSOn
        //datas.classInfoList = JSON.parse(data).classInfoList;
        datas.classInfoList = data.classInfoList;
        datas.title =data.title;
        html = template("art-template", datas);
        document.getElementById('app').innerHTML = html;
    }
})

链接：[https://www.jianshu.com/p/d8d8e19157e0]
[https://blog.csdn.net/ruisenLi/article/details/88410830]
ps.后端开发好像都不太擅长页面渲染和页面跳转。