artTemplate模板的使用（一）

OECOM

发布于 2020-07-01 17:26:27

7460

文章被收录于专栏：OECOMOECOM

2017-05-10 07:11:17

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

本人认为其基本上的用途是对于数据处理然后渲染到页面，下面来看一个最基本的例子

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../lib/template-web.js"></script>
</head>

<body>
<div id="content"></div>
<div id="content"></div>
<script>

</script>
<script id="test" type="text/html">
{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}
{{$data}}
</script>

<script>
var data = {
	title: '基本例子',
	isAdmin: true,
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

其输出到页面的结果为

基本例子

索引 1 ：文艺
索引 2 ：博客
索引 3 ：摄影
索引 4 ：电影
索引 5 ：民谣
索引 6 ：旅行
索引 7 ：吉他

{"title":"基本例子","isAdmin":true,"list":["文艺","博客","摄影","电影","民谣","旅行","吉他"]}

有编程基础的一般都能看懂上面的代码，首先是需要定义一个script标签，给该标签设置一个id，然后按html标准来写一个需要嵌入数据的模板，each语句为循环。下面数据通过template()方法来进入数据的嵌入即可。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-05-10，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

java

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

java

登录后参与评论

0 条评论

热度

artTemplate模板的使用（一）

artTemplate模板的使用（一）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐