artTemplate模板引擎

项目中用到art前端模板引擎。今天学习了一下,使用还是比较简单的。

一、artTemplate的特色

  • 1、性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)

  • 2、支持运行时调试,可精确定位异常模板所在语句(演示)
  • 3、对 NodeJS Express 友好支持
  • 4、安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
  • 5、支持include语句
  • 6、可在浏览器端实现按路径加载模板(详情)
  • 7、支持预编译,可将模板转换成为非常精简的 js 文件
  • 8、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
  • 9、支持所有流行的浏览器

二、使用方式

artTemplate有三种使用方式,下面就分别演示一下:

1、模板方式

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/209/dartys33/template.js">
<script type="text/html" id="test">
    <h1>{{msg}}</h1>
    <ul>
    {{if admin}}
        <li>欢迎:管理员!</li>
    {{else}}
        <li>欢迎:游客</li>
     {{/if}}
    </ul>
</script>
<script>
    var data= {
        msg:'hello artTemplate',
        admin: true
    };
    var html = template("test", data);
    document.getElementsByTagName("body")[0].innerHTML = html;
</script>

演示地址:Demo1

2、上面是一种简洁语法,也可以使用原生语法。需要引用template-native.js。原生语法是将<%%>作为起止标签。内容输出为<%=content%>,不编码输出为<%=#content%>。具体原生语法参考这里,因为项目本身没有使用原生语法,所以就先看这部分了。

3、通过template.compile()方法,将模板拼接成字符串传进去,返回渲染函数。

var tpl = "<ul>",
+ '{{if admin}}',
+ '<li>欢迎:管理员</li>',
+ '{{else}}',
+ '<li>欢迎:游客!</li>',
+ '{{/if}}',
+ '</ul>';
var data= {
    msg:'hello artTemplate',
    admin: true
};
var render = template.compile(tpl);
var html = render(data);
document.getElementsByTagName("body")[0].innerHTML = html;

测试地址:DEMO2

三、模板引用

在artTemplate中,提供了{{include}}来引用子模板,子模板默认引用父模板的数据。

<script type="text/html" id="header">
    <h1>{{msg}}</h1>
</script>
<script type="text/html" id="test">
    {{include 'test'}}
    <ul>
    {{if admin}}
        <li>欢迎:管理员!</li>
    {{else}}
        <li>欢迎:游客</li>
     {{/if}}
    </ul>
</script>
<script>
    var data= {
        msg:'hello artTemplate',
        admin: true
    };
    var html = template("test", data);
    document.getElementsByTagName("body")[0].innerHTML = html;
</script>

测试地址:DEMO3

四、循环输出

有两种循环输出的方法,如下:

第一种:

<ul>
{{each list as value i}}
<li>索引:{{i}},{{value}}</li>
{{/each}}
</ul>

第二种:

<ul>
{{each list}}
<li>索引:{{$index}},{{$value}}</li>
{{/each}}
</ul>

效果是一样的。

helper

定义helper:

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

使用helper

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

也可以嵌套使用:

{{time | say:'cd' | ubb | link}}

发表评论

电子邮件地址不会被公开。 必填项已用*标注