【jquery Ajax 】art-template 模板引擎的概念与使用
模板引擎的基本概念 渲染 UI 结构时遇到的问题 $.each(res.data, function (i, item) {var str = <li class="list-group-item"> <span class="badge" style="background-color: #5bc0de;">评论时间：${item.time}</span> <span class="badge" style="background-color: #5bc0de;;">评论名称：${item.username}</span> ${item.content} </li>rows.push(str)})$('#cmt-list').empty().append(rows)
上述代码是通过字符串拼接的形式，来渲染 UI 结构。
如果 UI 结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套，如果需求发生变化，修改起来也非常麻烦。
什么是模板引擎模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的 HTML 界面。
模板引擎的好处减少了字符串的拼接操作使代码结构更清晰。使代码更易于阅读与维护。 art-template 简介 art-template 是一个简约，超快的模板引擎，中文官网首页为首页
art-template 安装 在浏览器中访问http://aui.github.io/art-template/zh-cn/docs/installation.html,找到下载链接后，鼠标右键，选择“链接另存外”，将 art-template 下载到本地，然后，通过<script>标签进行引入。
直接点击下载或者使用 npm 工具将其下载。
art-template 模板引擎 art-template 模板引擎的基本使用 使用传统方式渲染 UI 结构<body><div id="title"></div><div>姓名:<span id="name"></span></div><div>年龄:<span id="age"></span></div><div>会员:<span id="isVIP"></span></div><div>注册时间:<span id="regTime"></span></div><div>爱好:<ui id="hobby"><li>爱好 1</li><li>爱好 2</li></ui></div><script>data = {title: '<h3>用户信息</h3>',name: 'zd',age: 20,isVIP: true,regTime: new Date(),hobby: ['吃饭', '睡觉', '打豆豆']}('#name').html(data.name);('#age').html(data.age);('#isVIP').html(data.isVIP);('#regTime').html(data.regTime);var rows = [];('#hobby').html(rows);</script>
缺点：程序员需要经常进行手动操作进行修改。
art-template 的使用步骤导入 art-template 定义数据定义模板（1.模板 id2.模板数据）调用 template 函数渲染 html 结构 代码<!DOCTYPE html><html lang="en">
</html>
art-template 标准语法 什么是标准语法 art-template 提供了{{}}这种语法格式，在大括号中可以进行变量输出，或循环数组等操作，这种语法在 art-template 中被称为标准语法。
标准语法——输出
变量，对象属性，三元表达式，逻辑，加减乘除等表达式。
标准语法——原文输出{{@ value}}
如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。
增加一个 test 属性 进行输出
test: '<h3>测试原文输出</h3>'
<h1>{{name}}.........{{test}}</h1>
使用 @ 进行输出
<h1>{{name}}.........{{@test}}</h1>
标准语法——条件输出如果要实现条件输出，则可以在{{}}中使用 if ...elseif..../if 的方式，进行条件输出。
新添属性
flag: 1
页面调用
<div>{{if flag == 0}}flag 等于 0{{else if flag==1}}flag 不等于 0 等于 1{{/if}}</div>
标准语法——循环输出如果要实现循环输出，则可以在{{}}内，通过 each 语法循环数组，当前循环的索引使用value 进行访问。
在模板数据中再次定义一个新属性 hobby。
hobby: ['吃饭', '电动', '睡觉']
使用页面内容进行调用模板数据
<ul>{{each hobby}}<li> 索引是：{{index}},循环项是：{{value}}</li>{{/each}}</ul>
标准语法——过滤器
过滤器的本质，就是一个 function 处理函数。
定义一个格式化时间的过滤器
在模板数据中再次定义一个事件属性。
regTime: new Date(),
定义过滤器
template.defaults.imports.dateFormat = function (data) {let Y = data.getFullYear();let M = data.getMonth();let D = data.getDate();
页面调用模板并启用过滤器
<h3>{{regTime |dateFormat}}</h3>
结果
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论