air-template模板引擎也是一个JS文件，使我们开发更加的便捷，它应用的范围是渲染UI界面的，是一款较为出名，排名靠前的模板引擎了，快玩起来吧
目录
一.了解模板引擎
二.使用art-template模板引擎
1.首先我们应该下载上JS文件并且引入到我们的HTML页面中
?2.定义我们需要渲染的数据
3.定义模板
4.调用函数方法
三.完成一个小案例
?四.art-template标准常用语法
1.标准语法——输出
2.标准语法——原文输出
?3.标准语法——条件输出
??4.标准语法——循环输出
5.标准语法——过滤器
五.总结案例?
******************************************art-template文档链接*******************************************
介绍 - art-templatehttp://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>
?我们的过滤器也利用输出时间的案例做了例子，利用我们之前所有的知识点总结简单的示例。
如果我们想要了解更多，可以在标题下面的链接进入文档查看
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #arttemplate
