art-template使用笔记

art-template 是前端的一个高性能 JavaScript 模板引擎，它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能。

通过下面一张图可以大致了解下 art-template 与其他方式渲染HTML页面的性能比较：

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

在网上查询资料的时候，发现 art-template 好像是腾讯团队开发开源的，了解到这个情况的时候，心中少不了吐槽，不可否认东西确实好用，但是架不住腾讯团队写的文档烂啊！！腾讯团队什么时候能在文档上面长点心，学学隔壁的阿里。废话不多说了，简单写下容易遇到的问题。

初始化问题

关于 art-template 模板编写语法很简洁； template 对象的初始化也非常简单，只有两行代码，

模板编写：

<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>

template对象初始化：

var html = template("art-template", datas);
document.getElementById('app').innerHTML = html;

"art-template" 是定义好的模板的 id
datas 是需要渲染的数据

JS执行时间、顺序问题

在网上找到的 Demo 大多都是在 js 里面写一个假数据，用定义好的数据去初始化 template 对象，例如：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}}
</ul>
{{/if}}
</script>
<script>
var data = { title: '基本例子', isAdmin: true, list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

因为以前主要使用 Vue ，Vue 是有动态渲染，但是忘记了这个并没有提到是动态渲染，同时项目开发时，数据大多通过 Ajax 从后台获取，因此在开始时，将 template 对象初始化放在了 ajax 回调函数外，因为 ajax 请求数据需要花费时间，同时js代码跟后台代码执行顺序不同，并不是按行数依次执行，所以前期导致一直渲染失败。应注意 js 代码执行顺序和执行时间的问题。

完整ajax代码如下：

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;}
})

template数据初始化问题

在上面也看到，序列化 template 对象一共传了两个参数，一个是模板的 Id，另外一个是数据。

但是这个数据有个一问题，如果返回回来的 JSON 数据是类似数组数据的话，是没有办法直接渲染的，如：

 [{"Id": 0,"Name": "班级0","Teacher": "教师0","Remark": "这是班级0的简介","Uri": "/deleteClass.ashx?id=0"}, {"Id": 1,"Name": "班级1","Teacher": "教师1","Remark": "这是班级1的简介","Uri": "/deleteClass.ashx?id=1"}, {"Id": 2,"Name": "班级2","Teacher": "教师2","Remark": "这是班级2的简介","Uri": "/deleteClass.ashx?id=2"}]

这个样子是没有办法直接进行渲染，需要对数据如上述代码块包装，才能正常渲染。

如果返回 JSON 数据为：

{"classInfoList": [{"Id": 0,"Name": "班级0","Teacher": "教师0","Remark": "这是班级0的简介","Uri": "/deleteClass.ashx?id=0"}, {"Id": 1,"Name": "班级1","Teacher": "教师1","Remark": "这是班级1的简介","Uri": "/deleteClass.ashx?id=1"}, {"Id": 2,"Name": "班级2","Teacher": "教师2","Remark": "这是班级2的简介","Uri": "/deleteClass.ashx?id=2"}],"title": "软件学院班级列表"
}

可以直接初始化 template 对象，并进行渲染（模板不变）

<script>$.ajax({type: "GET",dataType:"JSON",url: "/ClassHandler.ashx",success: function (data) {html = template("art-template", data);document.getElementById('app').innerHTML = html;}})
</script>

template 对象初始化需注意地方

API： template(filename, content)

根据模板名渲染模板。

参数：
- {string} filename
- {Object,string} content
返回值：
- 如果 content 为 Object，则渲染模板并返回 string
- 如果 content 为 string，则编译模板并返回 function

浏览器版本无法加载外部文件，filename 为存放模板的元素 id

因为渲染的时候，数据大多从后台获取，后台返回的数据可能为字符串或JSON，如果第二个参数（content）传进来的是字符串的话，没有报错，但是渲染会失败，渲染结果如下：

因此，需注意 template 初始化赋值时，数据格式是否正确。

渲染问题

each 循环渲染问题

关于循环的语法，官方文档上写的很简洁：

默认在遍历 target 时，有两个值，value和index，其中 value 是单个对象值，index 是下标。

根据文档所写，我把

{{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}}

修改为：

{{each classInfoList val key}}<tr><td>{{$key+1}}</td><td>{{$val.Id}}</td><td>{{$val.Name}}</td><td>{{$val.Teacher}}</td><td>{{$val.Remark}}</td><td><a href="{{$val.Uri}}">删除</a></td></tr>
{{/each}}

浏览器在渲染的时候就报错了：

至今不清楚，是我没领会文档说明，还是 art-template 团队忘了维护文档了。

结语

本文只是 art-template js模板引擎的简单使用，还有其他几个接口、方式没有逐一介绍，在我看来这些已经能够满足基本的开发使用，至于更加复杂的渲染、渲染切换，Vue 比 art-template 省心。如有兴趣继续研究 art-template ，附上官方文档及参考博客链接。

参考文档：

art-template 官方文档
art-template官方API文档
js模板引擎-art-template常用总结

art-template踩坑相关推荐

【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路
最近半年在维护公司的一个管理后台项目,搭建之初的技术栈比较混乱,构建方案采用了Gulp中调用Webpack的方式,Gulp负责处理.html文件,Webpack负责加载.vue..js等.而在这一套构 ...
踩坑：vue2 ajax异步请求数据，层数太多，页面无法渲染
刚接触vue2不是太久,勉强算是小白一枚吧,在此分享一下我最近踩的一个坑,望以后的小白们借鉴: 首先,数据结构: data(){ return { outer: { mid: [{ inner: &q ...
Ubuntu 配置大数据平台hadoop hive数据仓库之完整踩坑
导读:作为大数据界的萌新,这篇文章的写作过程,经历了各种阻挠,也踩了无数坑,俗话说面向CSDN.度娘编程,然后多看官方文档,在遇到各种神奇的坑的时候,搜着搜着就到了国外,刹那间一大堆英文向你飞来,就知 ...
restTemplate使用和踩坑总结
日常工作中肯定会遇到服务之间的调用,尤其是现在都是微服务的架构,所以总结一下restTemplate的最常用的用法以及自己踩过的坑. restTemplate的使用 restTemplate底层调用的 ...
vantUI组件：van-card 自定义内容 - 踩坑篇
vantUI组件:van-card 自定义内容 - 踩坑篇特别说明: 自定义用法,格式必须: <van-card> <template #tags> ····自定义内容·· ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
Mint-UI框架router-link返回上一页的方法 - 踩坑篇
使用mint-ui框架的header导航组件,<router-link to="">如何实现点击返回上一页? 代码如下: <template><!-- ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...
日常踩坑记录-汇总版
开发踩坑记录,不定时更新心得 RTFM 严谨的去思考问题,处理问题严格要求自己的代码编写习惯与风格注意单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...

art-template踩坑