模板引擎artTemplate 介绍

来源：互联网发布：螺栓连接计算软件编辑：程序博客网时间：2024/05/20 06:56

一.介绍

(1).介绍

art-template 是一个简约、超快的模板引擎。artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

(2).性能

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

二.模板

(1).模板

artTemplate的库分为两种，一个是template.js，一个是template-native.js,第一个是标准语法（简洁语法版），第二个是原生语法（感觉像JSP）版，两个库的语法是不一样的，大家不要混用，否则会报错的。

标准语法：

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

原始语法：

<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>

注意：原始语法兼容 EJS、Underscore、LoDash 模板。

(2).渲染模板

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
user: {
name: 'aui'
}
});

(3).核心方法

a.template(filename, data);// 基于模板名渲染模板
b.template.compile(source, options);// 将模板源代码编译成函数
c.template.render(source, data, options);// 将模板源代码编译成函数并立刻执行

三.简单的使用

直接引用template.js

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>basic-demo</title><script src="../dist/template.js"></script></head><body><div id="content"></div><script id="test" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>    {{each list as value i}}        <li>索引 {{i + 1}} ：{{value}}</li>    {{/each}}</ul>{{/if}}</script><script>var data = {title: '基本例子',isAdmin: true,list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template('test', data);document.getElementById('content').innerHTML = html;</script></body></html>

注意：因为浏览器不支持文件系统，所以 template(‘test’, data) 不支持传入文件路径，它内部使用 document.getElementById('content').innerHTML 来获取模板

阅读全文

0 0