前端模板引擎 artTemplate

artTemplate是新一代 javascript 模板引擎

特性：性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）

支持运行时调试，可精确定位异常模板所在语句（演示）
对 NodeJS Express 友好支持
安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
支持include语句，可在浏览器端实现按路径加载模板
支持预编译，可将模板转换成为非常精简的 js 文件
模板语句简洁，无需前缀引用数据
支持所有流行的浏览器

表达式

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

编写模板

使用一个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;

简洁语法

推荐使用，语法简单实用，利于读写。

{{if admin}}{{include 'admin_content'}}{{each list}}<div>{{$index}}. {{$value.user}}</div>{{/each}}
{{/if}}

输出表达式

对内容编码输出：

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

获取更多的文章，欢迎关注微信公众号

前端模板引擎 artTemplate相关推荐

前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...
前端模板引擎 -- art-template
art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器. 1.可以 ...
art-template前端模板引擎
目录内容介绍一.使用方法二.主要API 1.原文输出 2.逻辑判断 3.循环语句三.代码四.页面显示五.其他 1.pre标签 2.code标签内容介绍今天我们要了解的是一款高性能的 ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...
swig模板 PHP,如何使用nodejs前端模板引擎swig
这次给大家带来如何使用nodejs前端模板引擎swig,使用nodejs前端模板引擎swig的注意事项有哪些,下面就是实战案例,一起来看一下. 相对于jade,我还是更喜欢swig前端模板引擎,jad ...
模板引擎artTemplate
模板引擎artTemplate 1. 基础概念 1.1 模板引擎★★★ 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的 ...