发表更新6 分钟读完 (大约885个字)0次访问

模板引擎 art-template 记录

1. 关于

art-template 是一个简约、超快的模板引擎，相类似的还有百度模版引擎等。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

2.安装

  • 通过 npm 安装: npm install art-template --save
  • 下载安装

2.1 编译

因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 引入template-web.js -->
    <script src="./node_modules/art-template/lib/template-web.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <!-- 创建 script 标签创建模板,注意下面几点 -->
    <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
    <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id -->
    <!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 -->
    <script type="text/html" id="tpl">
      {{if user}}
      <h2>{{user.name}}</h2>
      {{/if}}
    </script>
    <script>
      var user = {
        name: "Template username",
      };
      var html = template("tpl", { user: user });
      var container = document.querySelector("#container");
      container.innerHTML = html;
    </script>
  </body>
</html>

3. 语法

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

3.1 模版绑定

1
2
3
4
5
// 标准语法 {{if user}}
<h2>{{user.name}}</h2>
{{/if}} // 原始语法 <% if (user) { %>
<h2><%= user.name %></h2>
<% } %>

3.2 自定义输出

1
2
3
// 标准语法 {{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a
+ b}} // 原始语法 <%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c
%> <%= a || b %> <%= a + b %>

3.3 原文输出

1
// 标准语法 {{@ value}} // 原始语法 <%- value %>

3.4 条件输出

1
2
3
4
5
6
7
8
9
10
11
12
13
// 标准语法

<!-- 单 if 判断 -->
{{if value}} ... {{/if}}

<!-- if ... else ... 判断 -->
{{if v1}} ... {{else if v2}} ... {{/if}} // 原始输出

<!-- 单 if 判断 -->
<% if (value) { %> ... <% } %>

<!-- if ... else ... 判断 -->
<% if (v1) { %> ... <% else if (v2) { %> ... <% } %>

3.5 循环输出

target是一个数组，each用于对数组遍历，$index  是数组的下标， $value是数组的值，并且target  支持  array  与object  的迭代，其默认值为  $data

1
2
// 标准语法 {{each target}} {{$index}} {{$value}} {{/each}} // 原始语法 <% for
(var i = 0; i < target.length; i++) { %> <%= i %> <%= target[i] %> <% } %>

3.6 自定义变量

1
2
// 标准语法 {{set temp = data.sub.content}} // 原始语法 <% var temp =
data.sub.content %>

3.7 模板继承

模板继承允许你构建一个包含站点共同元素的基本“模板骨架”

1
2
3
// 标准语法 {{extend './layout.html'}} {{block 'head'}} ... {{/block}} //
原始语法 <% extend ('./layout.html') %> <% block('head', function () { %> ... <%
}) %>

3.8 子模版

1
2
// 标准语法 {{include './header.art'}} {{include './header.art' data}} //
原始语法 <% include('./header.art') %> <% include('./header.art', data) %>

4. 调试器

art-template 内建调试器，能够捕获到语法与运行错误，并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启：process.env.NODE_ENV !== 'production'
设置 template.defaults.debug=true 后，等同于：

1
{ "cache": false, "minimize": false, "compileDebug": true }

5. 模板变量

template.defaults.imports模板通过 $imports 可以访问到模板外部的全局变量和导入的变量。

5.1 变量使用

template.defaults.imports.log = console.log;
<% $imports.log('Hello, template.defaults.imports.log') %>

5.2 内置变量清单

  • $data      传入模板的数据;
  • $imports 外部导入的变量以及全局变量；
  • print      字符串输出函数;
  • include   子模板载入函数
  • extend     模板继承模板导入函数
  • block      模板块生命函数

引用：https://www.jianshu.com/p/d8d8e19157e0

模板引擎 art-template 记录

https://blog.catooilg.com/2020/09/10/yuque/模板引擎 art-template 记录/

作者

Catooilg

发布于

2020-09-10

更新于

2023-02-05

许可协议

喜欢这篇文章？打赏一下作者吧

评论

最新文章

归档

关注我

链接

订阅更新

×