Arttemplate 超快的前端模板引擎

avatar 2015年9月5日15:17:36 评论

artTemplate-3.0
新一代 javascript 模板引擎

特性

  • 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
  • 支持运行时调试,可精确定位异常模板所在语句
  • 对 NodeJS Express 友好支持
  • 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
  • 支持include语句,可在浏览器端实现按路径加载模板
  • 支持预编译,可将模板转换成为非常精简的 js 文件
  • 模板语句简洁,无需前缀引用数据
  • 支持所有流行的浏览器

快速上手

编写模板
使用一个type="text/html"的script标签存放模板:

1
2
3
4
5
6
<h1>{{title}}</h1>  
<ul>  
    {{each list as value i}}  
        <li>索引 {{i + 1}} :{{value}}</li>  
    {{/each}}  
</ul>  

渲染模板

1
2
3
4
5
6
var data = {  
    title: '标签',  
    list: ['文艺''博客''摄影''电影''民谣''旅行''吉他']  
};  
var html = template('test', data);  
document.getElementById('content').innerHTML = html;  

模板语法
有两个版本的模板语法可以选择。
简洁语法 : 推荐使用,语法简单实用,利于读写。

1
2
3
4
5
6
7
{{if admin}}  
    {{include 'admin_content'}}  
   
    {{each list}}  
        <div>{{$index}}. {{$value.user}}</div>  
    {{/each}}  
{{/if}}  

原生语法:

1
2
3
4
5
6
<%if (admin){%>  
    <%include('admin_content')%>  
    <%for (var i=0;i<list.length;i++) {%>  
        <div><%=i%>. <%=list[i].user%></div>  
    <%}%>  
<%}%>  

详情请看 :http://aui.github.io/artTemplate

历史上的今天
九月
5
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: