art-template模板引擎详解

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;

art-template模板引擎详解相关推荐

JavaScript模板引擎详解
JavaScript模板引擎是一种用于生成HTML.XML和其他文本格式的工具,它将特定的模板语法转换为相应的文本输出,通常用于前端开发中动态生成页面内容.下面是一个JavaScript模板引擎的详细 ...
Flask HTML模板引擎详解
模板引擎说明: 模板文件就是按照一定的规则书写的展示效果的HTML文件模板引擎就是负责按照指定规则进行替换的工具模板引擎选择jinja2. 一.渲染模板的方法 1.将渲染的模板进行返回 1 rende ...
twig模板引擎详解（下集：开发者篇）【twig模板引擎中文使用教程】
上集重点介绍了twig模板的使用,供模板设计者阅读,下集供php开发者阅读,讲解如何调用和扩展twig,这一篇安装和采用版本将衔接上集内容. Twig_Environment: 该类的实例是twig模 ...
thymeleaf模板引擎详解1
做了几年的java web开发,我使用最多的模板引擎应该是freemarket和JSP了,不过最近公司开始引入springboot作为开发的框架,这让我接触到了一个新的模板引擎,也就是thymelea ...
Thymeleaf模板引擎详解
Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发.能够处理html xml css cs等内容.此外,在Java体系下,还有类似的模板引擎如jsp,FreeMarker等. ...
flask中jinjia2模板引擎详解3
接上文模板继承 Jinji2中的模板继承是jinjia2比较强大的功能之一. 模板继承可以定义一个父级公共的模板,把同一类的模板框架定义出来共享. 这样做一方面可以提取共享代码,减少代码冗余和重复的 ...
php ci框架模板引擎,详解CodeIgniter框架实现的整合Smarty引擎DEMO
CodeIgniter框架实现的整合Smarty引擎DEMO示例本文实例讲述了CodeIgniter框架实现的整合Smarty引擎.分享给大家供大家参考,具体如下: Smarty的模板机制很强大,一 ...
Django框架的模板层详解
目录一.模板简介二.模板语法之变量三.模板之过滤器四.模板之标签 for标签 for ... empty if 标签 with 五.自定义标签和过滤器六.模板导入和继承模板导入: 模板继承 ...
模板模式详解、模板模式怎么用、模板模式模板代码
模板模式详解.模板模式怎么用.模板模式模板代码文章目录模板模式详解.模板模式怎么用.模板模式模板代码 @[toc] 模板模式定义使用场景优点代码实操模板模式定义在模板模式(Templat ...

art-template模板引擎详解

1. 模板引擎

1.1 Ajax 项目中存在的问题

1.2 模板引擎的作用

1.3 模板渲染

2. 模板语法

2.1 输出

2.2 原文输出

2.3 条件判断

2.4 循环

2.5 导入模板变量

art-template模板引擎详解相关推荐

最新文章

热门文章