art-template分别在前端和node中的使用

最新推荐文章于 2025-03-25 19:36:27 发布

叨唠

最新推荐文章于 2025-03-25 19:36:27 发布

阅读量445

点赞数

分类专栏：前端web 文章标签： template art-template.js

本文链接：https://blog.youkuaiyun.com/zyz00000000/article/details/108843340

版权

前端web 专栏收录该内容

66 篇文章

订阅专栏

官网：http://aui.github.io/art-template/zh-cn/docs/

三个核心方法

1、template(templateId, data)

templateId：模板id，通过模板id找到对应的模板。

data：传入的数据；数据类型决定了template方法的返回值类型

（1）如果data是Object类型，template方法返回html字符串

模板：模板中使用的变量是传入模板对象的每个属性；

  <script type="template" id="template1">
    <div>
      {{name}}{{value}}
    </div>
  </script

调用template方法，需要根据templateID来找到对应的模板

var htmlStr = template('template1', {
    name: "temp",
    value: "12"
});
console.log(htmlStr);

得到结果：得到字符串

    <div>
      temp12
    </div>

（2）如果data是String类型，template方法返回function

生成的函数如下，跟模板id没有关系，该函数的返回值是传入的字符串。

得到的函数，可接受对象数据，进行渲染。

var templateHtmlStr = `<div>
    <span>{{name}}</span>
    <span>{{value}}</span>
</div>`
var func = template("",templateHtmlStr);
var htmlStr = func({name: "zhu", value: 24})
console.log(htmlStr);

2、template.compile(templateStr)

templateStr：模板字符串

返回值：一个函数，该函数接收一个对象，渲染模板

var templateHtmlStr = `<div>
    <span>{{name}}</span>
    <span>{{value}}</span>
</div>`
var func = template.compile(templateHtmlStr);
var htmlStr = func({name:"temp",value:"123"});
console.log(func.toString());
console.log(htmlStr);

templateHtmlStr是模板字符串；

var func = template.compile(templateHtmlStr); 由模板字符串得到一个函数，该函数可接收不同的数据进行渲染！

var htmlStr = func({name:"temp",value:"123"}); 接收数据，渲染模板，得到html字符串

结果：

function f($data) {
    'use strict'
    $data = $data || {}
    var $$out = '', $escape = $imports.$escape, name = $data.name, value = $data.value
    $$out += "<div>\n    <span>"
    $$out += $escape(name)
    $$out += "</span>\n    <span>"
    $$out += $escape(value)
    $$out += "</span>\n</div>"
    return $$out
}
<div>
    <span>temp</span>
    <span>123</span>
</div>

3、template.render(templateStr, data)

templateStr：模板字符串

data：传入的数据

传入数据，渲染模板，直接得到html字符串

var templateHtmlStr = `<div>
    <span>{{name}}</span>
    <span>{{value}}</span>
</div>`
var htmlStr = template.render(templateHtmlStr,{name:"temp",value:"123"});
console.log(htmlStr);

结果：

<div>
    <span>temp</span>
    <span>123</span>
</div>

小结：

template方法，可以渲染script模板或者字符串模板

template.compile方法，渲染字符串得到模板函数

tempate.render方法，传入数据渲染字符串模板直接得到html字符串。

语法

1、标准语法和原始语法

两种语法书写方式，本人只关注标准语法的书写

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

{{ }} 在模板中，不管是在哪个位置，都可以被模板识别解析

var templateHtmlStr = `<div id="{{id}}" style="width:{{ width }}px;height:{{height}}px;">
    <span>{{name}}</span>
    <span>{{value}}</span>
</div>`
var htmlStr = template.render(templateHtmlStr, { id: "wrapper", name: "zhu", value: 24, width: 200, height: 100 });
console.log(htmlStr);

结果：

<div id="wrapper" style="width:200px;height:100px;">
    <span>zhu</span>
    <span>24</span>
</div>

模板一级特殊变量可以使用 $data 加下标的方式访问

即：$data代表传入的数据对象；$data['prop']数据对象的属性值

var templateHtmlStr = `<div>
    <span>{{$data["name"]}}</span>
    <span>{{value}}</span>
</div>`
var htmlStr = template.render(templateHtmlStr, {name: "zhu", value: 24});
console.log(htmlStr);

结果：

<div>
    <span>zhu</span>
    <span>24</span>
</div>

2、条件

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

使用：

注意：模板字符串的书写时，防止空白行产生！

var templateHtmlStr = `{{if show}}
    <div>
        <span>{{$data["name"]}}</span>
        {{if spanShow}}<span>{{value}}</span>{{/if}}
    </div>
{{/if}}
`
var htmlStr = template.render(templateHtmlStr, {show:true, name: "zhu", value: 24, spanShow: false});
console.log(htmlStr);

结果：


    <div>
        <span>zhu</span>
        
    </div>

3、循环

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

使用：

target 支持 array 与 object 的迭代。传入数据对象的属性，是array或者object。
$value 与 $index，默认是{{each target $value $index}} 可以自定义：{{each target val key}}。

var templateHtmlStr = `
<ul>
    {{each arr val key}}
        <li>{{val}}</li>
    {{/each}}
    {{each obj}}
        <li>{{$index}}:{{$value}}</li>
    {{/each}}   
</ul>
`
var htmlStr = template.render(templateHtmlStr, {
    obj: {
        name: "zhu",
        age: 24,
        job: "programmer"
    },
    arr: ["a", "b", "c"]
});
console.log(htmlStr);

结果：

<ul>
    
        <li>a</li>
    
        <li>b</li>
    
        <li>c</li>
    
    
        <li>name:zhu</li>
    
        <li>age:24</li>
    
        <li>job:programmer</li>
       
</ul>

4、修改解析规则：（重点，后续还要研究。。。）

template.defaults.rules

art-template 可以自定义模板解析规则，默认配置了原始语法与标准语法。

默认配置：
// 原始语法的界定符规则
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;
// 标准语法的界定符规则
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;

比如：可以配置匹配{}，而非{{}}

// 标准语法的界定符规则
template.defaults.rules[1].test = /{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}/;
var templateHtmlStr = `
<ul>
    {each arr val key}
        <li>{val}</li>
    {/each}
    {if obj.name}
        <span>{obj.age}</span>
    {/if}}   
</ul>
`
var htmlStr = template.render(templateHtmlStr, {
    obj: {
        name: "zhu",
        age: 24,
        job: "programmer"
    },
    arr: ["a", "b", "c"]
});
console.log(htmlStr);

让模板引擎支持 ES6 ${name} 模板字符串的解析：

template.defaults.rules.push({
    test: /\${([\w\W]*?)}/,
    use: function(match, code) {
        return {
            code: code,
            output: 'escape'
        }
    }
});

其中 test 是匹配字符串正则，use 是匹配后的调用函数。关于 use 函数：

参数：一个参数为匹配到的字符串，其余的参数依次接收 test 正则的分组匹配内容
返回值：必须返回一个对象，包含 code 与 output 两个字段：
code 转换后的 JavaScript 语句
output 描述 code 的类型，可选值：
'escape' 编码后进行输出
'raw' 输出原始内容
false 不输出任何内容

值得一提的是，语法规则对渲染速度没有影响，模板引擎编译器会帮你优化渲染性能。

上述语法在模板的任何位置都可以被解析

比如：

<script id="historyMixTmpl" type="template">
	<li class="mix-li set-list-li no-num mt_type{mt.mtType} {if mt.online!=1}offline{/if} js-hover {if mt.black == 1}black {/if} {if mt.bcNon == 1}bcNon {/if}" id="history-mix-li-{mt.mtKey}" data-mtid="{mt.mtid}" data-mtKey = "{mt.mtKey}" data-type="{mt.mtType}" title={mt.name}>
		<label>
			<div class="clearfix" style="width:250px;left:8px;">
				<span class="avatar left clearfix">
					{if mt.portrait}
						<img src="{mt.portrait}" />
					{/if}
				</span>
				<span class="ellipsis mt-name left">{mt.name}</span>
				<span class="mute bg_url_common"></span>
			</div>
		</label>
	</li>
</script>