必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js、baiduTemplate、doT.js、art-template等等;
我所理解的模板引擎就是把js数据传到html中展示出来;
art-template 是一个简约、超快的模板引擎。
art-template有两种语法:
一、标准语法可以让模板更容易读写;
二、原始语法具有强大的逻辑处理能力。
![](https://upload-images.jianshu.io/upload_images/13279220-7af8dfc4f59c7c5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/586/format/webp)
引入模板
<script src="js/template-web.js" type="text/javascript" charset="utf-8"></script>
定义模板
<script id="classify" type="text/html"> {{each data}} <div class="classify"> <a href="javascript:;"> <img src="{{$value.category_image}}" alt=""> <p class="index-class-text">{{$value.name}}</p> </a> </div> {{/each}} </script> <div class="fenleibox" id="fenleibox"> </div>
上面的模板我用的循环作为例子,具体更多的语法请到官方网站文档查看
请求数据,将数据传给模板
$.ajax({ type:"post", url:"xxxxxxxx",//请求地址 dataType:"json", success:function(data){ // 调用模板引擎的方法,填充数据 var html = template("classify",data); var divResult = document.querySelector("#classifybox"); //这是模板循环外面的div divResult.innerHTML = html; }, });
json数据
![](https://upload-images.jianshu.io/upload_images/13279220-0a162363b7644d13.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/882/format/webp)
最终效果
![](https://upload-images.jianshu.io/upload_images/13279220-6e838a02d5a570d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/411/format/webp)