模板引擎artTemplate 介绍

快来打我* 2021-09-14 09:48 604阅读 0赞

一.介绍

(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>

![20171121141603415][]

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

[20171121141603415]: /images/20210813/6d19830bc80f402daff436ce9f4cf640.png