模板引擎artTemplate 介绍

一.介绍

(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 来获取模板

来源：CSDN

作者：面条请不要欺负汉堡

链接：https://blog.csdn.net/gao_xu_520/article/details/78591829

标签

artTemplate

arttemplate语法