JavaScript模板引擎 art-template.js 的使用

首先给个art-template.js中文文档

一、基本使用

1、引入模板引擎（版本为4.13.2）

2、编写模板和渲染的容器

3、获取模板并往模板里插入数据

var data = {
    title: "hello world",
    desc: "
这是一段描述
"
};
var html = template("test-template",data);

4、把模板渲染到页面

document.getElementById('test-wrapper').innerHTML = html;

或者用jQuery：

$('#test-wrapper').html(html)

完成代码如下图：

template1.png

二、输出

标准语法 {{ 变量名 }}

{{title}}

原始语法 <%= 变量名 %>

<%= title %>

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

三、原文输出

标准语法 {{@ 变量名 }}

{{@ title }}

原始语法 <%- 变量名 %>

<%- title %>

输出与原文输出的区别在于：原文输出语句不会对 HTML 内容进行转义处理，例如：

图片.png

渲染结果如下图：

结果很明显，原文输出将标签解析出来了，而输出将标签进行转义了。原文输出可能存在安全风险，请谨慎使用。

四、循环

循环可以是Arrray或者Object，语法为：

{{each target}}
    {{$index}} {{$value}}
{{/each}}

例如： [图片上传失败...(image-149333-1599533198402)]

渲染结果如下图： [图片上传失败...(image-33b951-1599533198402)]

这里的$index和$value是默认的，也可以自定义：

{{each target val key}}
    {{key}} {{val}}
{{/each}}

五、条件

语法为：

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

六、过滤器（自定义函数）

template.defaults.imports.show = function(num,str){
    console.log(num, str)
    return num*666
}

使用：

{{num | show}}

或者：

{{ show(num,'hello') }}

第一种方法只能传入一个参数即 '|' 前面这个参数，第二种没有限制，跟普通函数一样。