art-template模板引擎详解

最新推荐文章于 2023-12-12 00:15:00 发布

小小白学计算机

最新推荐文章于 2023-12-12 00:15:00 发布

阅读量334

点赞数

文章标签： html js art-template 模板引擎 nodejs

本文链接：https://blog.csdn.net/weixin_44827418/article/details/115940714

版权

Node.js 专栏收录该内容

60 篇文章 5 订阅

订阅专栏

1. 模板引擎

art-template中文文档：https://www.kancloud.cn/lanju/art-template/1500276

1.1 Ajax 项目中存在的问题

数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。
业务逻辑和用户界面混合，代码不易维护。

for (var i = 0; i < result.length; i++) {
	html += '<!DOCTYPE html>\
		 <html lang="en">\
			<head>\
				<meta charset="UTF-8">\
				<title>'+ title +'</title>\
			</head>\
			<body>\
				<h1 οnclick="sayHi('+name+')">你好,'+name+' 我今年 '+age+'岁</h1>\
				<ul>\
					<li title="'+hobbies[0]+'">'+hobbies[0]+'</li>\
				</ul>\
			</body>\
		</html>';
}

1.2 模板引擎的作用

使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。
模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。
使用模板引擎可以提高开发效率。

<h1>你好, {{name}}, 我今年{{age}}岁</h1>
<ul>	
    {{each}}
    <li>{{$value.hobbies}}</li>
    {{/each}}
</ul>

1.3 模板渲染

<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
 	<div>
		 <span>{{name}}</span>
		 <span>{{age}}</span>
    </div>
</script>

 // 将特定模板与特定数据进行拼接
 const html = template('tpl',{
	name: '张三',
    age: 20
 });

2. 模板语法

模板语法的作用是告诉模板引擎数据和模板要如何进行拼接。

2.1 输出

将数据显示在模板中。

 <h2>{{value}}</h2>
 <h2>{{a ? b : c}}</h2>
 <h2>{{a + b}}</h2>

2.2 原文输出

如果数据中携带HTML标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出。

<h2>{{@ value }}</h2>

2.3 条件判断

 {{if 条件}} ... {{/if}}
 {{if v1}} ... {{else if v2}} ... {{/if}}

{{if 条件}}
	<div>条件成立 显示我</div>
{{else}}
	<div>条件不成立 显示我</div>
{{/if}}

2.4 循环

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

2.5 导入模板变量

<div>$imports.dataFormat(time)</div>

template.defaults.imports.变量名 = 变量值;
$imports.变量名称

function dateFormat（未格式化的原始时间）{
    return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;

小小白学计算机

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
art-template模板引擎详解

1. 模板引擎art-template中文文档：https://www.kancloud.cn/lanju/art-template/15002761.1 Ajax 项目中存在的问题数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。业务逻辑和用户界面混合，代码不易维护。for (var i = 0; i < result.length; i++) { html += '<!DOCTYPE html>\ <html lang="en"&gt
复制链接

扫一扫