一则文章学通模板引擎——art-template_Try Tomato
air-template模板引擎也是一个JS文件，使我们开发更加的便捷，它应用的范围是渲染UI界面的，是一款较为出名，排名靠前的模板引擎了，快玩起来吧
目录
一.了解模板引擎
二.使用art-template模板引擎
1.首先我们应该下载上JS文件并且引入到我们的HTML页面中
?2.定义我们需要渲染的数据
3.定义模板
4.调用函数方法
三.完成一个小案例
?四.art-template标准常用语法
1.标准语法——输出
2.标准语法——原文输出
?3.标准语法——条件输出
??4.标准语法——循环输出
5.标准语法——过滤器
五.总结案例?
******************************************art-template文档链接*******************************************
介绍 - art-template
http://aui.github.io/art-template/zh-cn/docs/?
一.了解模板引擎
在我们使用字符串拼接的形式来渲染UI界面时，如果UI界面非常的复杂，那拼接字符串时不亚于在cmd命令界面存储数据库数据，真的能逼疯人，需求如果再变化了需要我们去修改，那把代码吃了的心都有了，所以，我们的模板引擎就轻松的帮我们解决了这个问题，更加的逻辑化，便捷化，可以根据我们指定的模板结构以及数据来自动生成渲染UI界面
?
二.使用art-template模板引擎
我们了解了模板引擎接下来我们来学习怎样使用它为我们工作
1.首先我们应该下载上JS文件并且引入到我们的HTML页面中
下载地址如下：
安装 - art-templateNpmnpm install art-template --save 在浏览器中实时编译下载：template-web.js（gzip: 6kb） 兼容 IE8+（IE8 需要补丁才能运行。示例） 差异 因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHThttp://aui.github.io/art-template/zh-cn/docs/installation.html导入了art-template的JS文件之后，我们的全局中就多了一个template（）函数
template("模板的ID值","需要渲染的数据对象")；
?2.定义我们需要渲染的数据
我们已经引入完成JS文件，接下来定义我们的数据
var data = {name:"王麻子"}就先定义一个王麻子吧（我认识王麻子），暂时想不出来其他名字了，这样我们的数据就定义完成了（在我们自己的JS文件中定义）
3.定义模板
定义模板就需要我们了解一下<script>标签的属性type了，我们的JS文件可以不写type属性，默认值为text/javascript
<script type="text/javascript"></script>但是还有另外一种格式，专门用来书写HTML标签，我们总不能把HTML标签写到JS里吧，它也不会识别，只会报错
<script type="text/html" id="XXX">
<div>{{}}</div>
//{{}}表示占位符，表示这里将来要添加数据
</script>这样我们就可以将HTML标签写到JS文件里了
4.调用函数方法
调用函数方法就用到我们之前说的全局新增函数template()了
template("XXX",data);
//XXX为上一步定义好的模板的ID
//data为第二步定义好的数据这样我们就完成的整个逻辑渲染的程序了
这里有一个需要注意的点：*我们在template（）函数中获取ID值不需要加#，这是模板引擎为我们提供的单独的函数，并不是jQuery函数
三.完成一个小案例
这里我们使用上述知识点来完成一个渲染UI页面的小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery-min.js"></script>
<!-- 导入模板引擎 -->
<script src="./template-web.js"></script>
</head>
<body>
<!-- 定义一个元素，接下来我们渲染它 -->
<div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="art-temp">
<h1>姓名:{{name}}</h1>
<h1>年龄:{{age}} 喜欢的数字:{{9}}</h1>
</script>
<script>
// 定义数据
var data = {
name:"张三",
age:20,
likenum:9
}
// 调用
var htmlStr = template("art-temp",data);
$("#con").html(htmlStr);
</script>
</html>
?四.art-template标准常用语法
art-template提供了{{}}这样的语法格式，在{{}}我们可以进行变量的输出、循环数组的输出等等
1.标准语法——输出
{{value}}：直接输出变量（value）值
{{obj.key}}：如果变量是一个对象，那么也可以输出对象的某一个属性
{{obj['key']}}：输出对象的另一种形式，用哪一种都可以?
{{a ? b : c}}：三元表达式也可以实现，通过判断a是否为true来执行输出b或者是c?
{{a || b}}：执行输出a或b?
{{a + b}}：拼接/相加?
2.标准语法——原文输出
?{{@value}}：如果要输出的value值中，包含了HTML标签结构，我们如果正常输出的话，会把标签也渲染到页面上，功能非但实现不了，更加丑了，也影响了用户的体验，所以我们使用原文输出语法，保证HTML标签被正常的渲染出来
我们来举一个例子：?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery-min.js"></script>
<!-- 导入模板引擎 -->
<script src="./template-web.js"></script>
</head>
<body>
<!-- 定义一个元素，接下来我们渲染它 -->
<div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="art-temp">
<h1>姓名:</h1>{{momo}}
</script>
<script>
// 定义数据
var data = {
momo:"<h1>测试</h1>"
}
// 调用
var htmlStr = template("art-temp",data);
$("#con").html(htmlStr);
</script>
</html>
?
?
?当我们使用原文输出语法{{@value}}之后：
<script type="text/html" id="art-temp">
<h1>姓名:</h1>{{@momo}}
</script>
?3.标准语法——条件输出
{{if value1}}符合上述条件输出的内容{{else if value2}}符合上述条件输出的内容{{/if}}
通过我的标识不难看出，这不就是if...else语句吗，是的，就是如果满足了前面的条件，就会执行其后面的语句，不满住继续往下执行，{{/if}}结束当前语句
<body>
<!-- 定义一个元素，接下来我们渲染它 -->
<div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="art-temp">
{{if flag === 0}}
我等于零
{{else if flag === 1}}
我等于1
{{/if}}
</script>
<script>
// 定义数据
var data = {
flag:1
}
// 调用
var htmlStr = template("art-temp",data);
$("#con").html(htmlStr);
</script>?
?4.标准语法——循环输出
不是特别好理解，如果我们要实现循环的语法，可以在{{}}内执行each语法循环数组，当前的索引号使用$index访问,当前的循环项使用$value访问，我们直接看语法，然后代码实现一下：
{{each arr}}
????????{{$index}} {{$value}}
{{/each}}
我们利用代码实现一下就较好理解了：
<body>
<!-- 定义一个元素，接下来我们渲染它 -->
<div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="art-temp">
{{each hobby}}
<li index="{{$index}}">{{$value}}</li>
{{/each}}
</script>
<script>
// 定义数据
var data = {
hobby:[
"打游戏",
"睡觉",
"打代码"
]
}
// 调用
var htmlStr = template("art-temp",data);
$("#con").html(htmlStr);
</script>?
?我们发现，不仅将内容依次输出渲染到了UI页面，并且我们利用{{$index}}给每一个li都添加上了自定义索引，是不是很方便呀
5.标准语法——过滤器
我们通过图解来了解一下过滤器是一个什么东西：
首先我们来看一下过滤器的调用：?
调用： {{value | filterName}}
?语法中现在的value值并不是我们想要的值，我们可以理解为：把value当作一个参数传给了后面的函数方法，函数处理完毕之后输出的值是一个"过滤"完的值，是我们想要的值，它的语法类似管道操作符，上一个输出的值作为下一个输入
定义过滤器：
template.defaults.imports.filterName = function(value);
最后我们return处理输出最后的结果
五.总结案例?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery-min.js"></script>
<!-- 导入模板引擎 -->
<script src="./template-web.js"></script>
</head>
<body>
<div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="mo">
<h1>姓名:{{name}}</h1>
<h1>年龄:{{name}} 喜欢的数字:{{9}}</h1>
{{@test}}
{{if flag === 0}}
我等于零
{{else if flag === 1}}
我等于1
{{/if}}
{{each hobby}}
<li index="{{$index}}">{{$value}}</li>
{{/each}}
<h1>{{regtime | dateFormat}}</h1>
</script>
<script>
//过滤时间
template.defaults.imports.dateFormat = function(date){
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + "年" + month + "月" + day + "日"
}
// 定义数据
var data = {
name:"张三",
age:20,
likenum:9,
test:"<h1>看看我是多大的字体</h1>",
flag:1,
hobby:[
"睡觉",
"玩游戏",
"写代码"
],
regtime:new Date()
}
// 调用
var htmlStr = template("mo",data);
$("#con").html(htmlStr);
</script>
</html>
?我们的过滤器也利用输出时间的案例做了例子，利用我们之前所有的知识点总结简单的示例。
如果我们想要了解更多，可以在标题下面的链接进入文档查看
相关文章
- 前端项目中遇到的最大问题是什么，该如何回答_M-Codes_前端项目中遇到的最大困难,怎么解决的
- 超详细Eclipse配置Tomcat配置教程_极小白_eclipse配置tomcat
- 【JavaWeb】Tomcat的入门使用_黑洞晓威
- 【GRU时序预测】基于卷积神经网络结合门控循环单元CNN-GRU实现时间序列预测附matlab代码_Matlab科研工作室
- H5跳转小程序（详）_一碗云吞面_h5跳转小程序
- uni-app轮播图实现之swiper_-耿瑞-_uniapp swiper
- Intellij IDEA2021.1创建Java web项目（超详细）_十九舟_idea2021创建web项目
- 计算机网络题库---第六章应用层_尘 关
- jsp登录注册代码（增删改查+网页+数据库）_天蝎座的程序媛_登录注册代码
- 微信小程序自定义组件数据、方法和属性_chengqiuming_小程序properties
- javaweb-Servlet的使用_萧寂173
- JavaWeb项目(登录注册页面)全过程详细总结_chenzhiyuan09_登录注册页面的项目描述
- MongoDB下载安装教程（Windows）_「已注销」_mongodb下载
- SpringBoot整合MongoDB_落魄实习生_springboot整合mongodb
- 耗时一个月，前端开发之小程序实战-----虎牙小程序_落春只在无意间_在虎牙开发一个软件
- avm.js跨端框架全介绍_海阔凭鱼跃_api