首先給個(gè)art-template.js中文文檔

一、基本使用

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

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

2、編寫(xiě)模板和渲染的容器

<div id="test-wrapper"></div>
<script id="test-template" type="text/html">
    <h1>{{title}}</h1>
</script>

3、獲取模板并往模板里插入數(shù)據(jù)

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

4、把模板渲染到頁(yè)面

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

或者用jQuery：

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

完成代碼如下圖：

template1.png

二、輸出

標(biāo)準(zhǔn)語(yǔ)法 {{ 變量名 }}

{{title}}

原始語(yǔ)法 <%= 變量名 %>

<%= title %>

標(biāo)準(zhǔn)語(yǔ)法支持基本模板語(yǔ)法以及基本 JavaScript 表達(dá)式；原始語(yǔ)法支持任意 JavaScript 語(yǔ)句，這和 EJS 一樣。

三、原文輸出

標(biāo)準(zhǔn)語(yǔ)法 {{@ 變量名 }}

{{@ title }}

原始語(yǔ)法 <%- 變量名 %>

<%- title %>

輸出與原文輸出的區(qū)別在于：原文輸出語(yǔ)句不會(huì)對(duì) HTML 內(nèi)容進(jìn)行轉(zhuǎn)義處理，例如：

圖片.png

渲染結(jié)果如下圖：

結(jié)果很明顯，原文輸出將標(biāo)簽解析出來(lái)了，而輸出將標(biāo)簽進(jìn)行轉(zhuǎn)義了。原文輸出可能存在安全風(fēng)險(xiǎn)，請(qǐng)謹(jǐn)慎使用。

四、循環(huán)

循環(huán)可以是Arrray或者Object，語(yǔ)法為：

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

例如： [圖片上傳失敗...(image-149333-1599533198402)]

渲染結(jié)果如下圖： [圖片上傳失敗...(image-33b951-1599533198402)]

這里的$index和$value是默認(rèn)的，也可以自定義：

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

五、條件

語(yǔ)法為：

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

六、過(guò)濾器（自定義函數(shù)）

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

使用：

{{num | show}}

或者：

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

第一種方法只能傳入一個(gè)參數(shù)即 '|' 前面這個(gè)參數(shù)，第二種沒(méi)有限制，跟普通函數(shù)一樣。