artTemplate模板引擎
来源:互联网 发布:2010人口普查数据 编辑:程序博客网 时间:2024/05/20 13:15
artTemplate简介
- 介绍
artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。
- 调试功能
除了性能优势外,调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句,解决了编写模板过程中无法调试的痛苦,让开发变得高效,也避免了因为单个模板出错导致整个应用崩溃的情况发生。
特性
1、性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍
2、支持运行时调试,可精确定位异常模板所在语句
3、对 NodeJS Express 友好支持
4、安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
5、支持include语句
6、可在浏览器端实现按路径加载模板
7、支持预编译,可将模板转换成为非常精简的 js 文件
8、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
9、支持所有流行的浏览器
案例说明
- 编写模板
使用一个type=”text/html”的script标签存放模板:
<script id="test" type="text/html"><h1>{{title}}</h1><ul> {{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}}</ul></script>
- 渲染模板
var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template('test', data);document.getElementById('content').innerHTML = html;
模板语法
- # artTemplate 原生 js 模板语法版
# artTemplate 原生 js 模板语法版## 使用在页面中引用模板引擎: <script src="dist/template-native.js"></script>[下载](https://raw.github.com/aui/artTemplate/master/dist/template-native.js)## 表达式``<%`` 与 ``%>`` 符号包裹起来的语句则为模板的逻辑表达式。### 输出表达式对内容编码输出: <%=content%>不编码输出: <%=#content%>编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。### 逻辑支持使用 js 原生语法 <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i ++) {%> <li>条目内容 <%=i + 1%> :<%=list[i]%></li> <%}%> </ul>> 模板不能访问全局对象,公用的方法请参见文档[辅助方法](#辅助方法)章节### 模板包含表达式用于嵌入子模板。 <% include('template_name') %>子模板默认共享当前数据,亦可以指定数据: <% include('template_name', news_list) %>## 辅助方法使用``template.helper(name, callback)``注册公用辅助方法: template.helper('dateFormat', function (date, format) { // .. return value; });模板中使用的方式: <%=dateFormat(content) %>## 演示例子* [基本例子](http://aui.github.io/artTemplate/demo/template-native/basic.html)* [不转义HTML](http://aui.github.io/artTemplate/demo/template-native/no-escape.html)* [在javascript中存放模板](http://aui.github.io/artTemplate/demo/template-native/compile.html)* [嵌入子模板(include)](http://aui.github.io/artTemplate/demo/template-native/include.html)* [访问外部公用函数(辅助方法)](http://aui.github.io/artTemplate/demo/template-native/helper.html)----------------------------------------------本文档针对 artTemplate v3.0.0 编写
- # artTemplate 简洁语法版
# artTemplate 简洁语法版## 使用引用简洁语法的引擎版本,例如: <script src="dist/template.js"></script> [下载](https://raw.github.com/aui/artTemplate/master/dist/template.js)## 表达式``{{`` 与 ``}}`` 符号包裹起来的语句则为模板的逻辑表达式。### 输出表达式对内容编码输出: {{content}}不编码输出: {{#content}}编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。### 条件表达式 {{if admin}} <p>admin</p> {{else if code > 0}} <p>master</p> {{else}} <p>error!</p> {{/if}}### 遍历表达式无论数组或者对象都可以用 each 进行遍历。 {{each list as value index}} <li>{{index}} - {{value.user}}</li> {{/each}}亦可以被简写: {{each list}} <li>{{$index}} - {{$value.user}}</li> {{/each}}### 模板包含表达式用于嵌入子模板。 {{include 'template_name'}}子模板默认共享当前数据,亦可以指定数据: {{include 'template_name' news_list}}## 辅助方法使用``template.helper(name, callback)``注册公用辅助方法:
template.helper(‘dateFormat’, function (date, format) {
// ..
return value;
});
模板中使用的方式: {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}支持传入参数与嵌套使用: {{time | say:'cd' | ubb | link}}## 演示例子* [基本例子](http://aui.github.io/artTemplate/demo/basic.html)* [不转义HTML](http://aui.github.io/artTemplate/demo/no-escape.html)* [在javascript中存放模板](http://aui.github.io/artTemplate/demo/compile.html)* [嵌入子模板(include)](http://aui.github.io/artTemplate/demo/include.html)* [访问外部公用函数(辅助方法)](http://aui.github.io/artTemplate/demo/helper.html)----------------------------------------------本文档针对 artTemplate v3.0.0+ 编写
阅读全文
0 0
- javascript模板引擎 artTemplate
- javascript模板引擎 Arttemplate
- Arttemplate 前端模板引擎
- ArtTemplate模板引擎入门
- JS模板引擎 :ArtTemplate
- JavaScript模板引擎-artTemplate
- javascript 模板引擎artTemplate
- 前端模板引擎 artTemplate
- artTemplate模板引擎
- javascript 模板引擎artTemplate
- JavaScript模板引擎-artTemplate
- 模板引擎ArtTemplate使用方法
- artTemplate模板引擎使用
- artTemplate模板引擎
- 模板引擎artTemplate 介绍
- javascript 模板引擎:artTemplate-3.0
- artTemplate模板引擎简单使用
- artTemplate模板引擎学习实战
- 【网易】射击游戏
- 3从控制台输入三个数,并输出最大值
- 信号集操作函数,信号未决、阻塞、递达
- 多种模块拔号上网驱动开发调试
- Hello World图形用户界面
- artTemplate模板引擎
- struts之采用xml来进行数据校验(二)
- java GUI 鼠标事件
- Network in Network 学习笔记
- linux命令--Crontab定时任务
- Mybatis一对多关联查询
- 输入\输出学生信息
- Xshell Linux 主要命令
- C++队列Queue基本操作