在我的一篇关于智能搜索框异步加载数据的文章中，有博友给我留言，认为我手写字符串拼接效率过低，容易出错。在经过一段时间的摸索和学习之后，发现现在拼接字符串的方法都不在是自己去书写了，而是使用Javascript引擎。而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。
如果有不了解的朋友，可以前往这两篇文章：
淘宝购物车页面 PC端和移动端实战
淘宝购物车页面 智能搜索框Ajax异步加载数据
源码地址：
GitHub：Uncle-Keith
回归正题，以下对artTemplate模板引擎的介绍会分为如下几部分内容：
1.artTemplate模板引擎的基本语法结构
2.artTemplate模板引擎的基本使用方法
2.1：使用一个type="text/html"的script标签存放模板
2.2：在javascript中存放模板
2.3：嵌入子模板(include)
3.artTemplate模板引擎使用实战
1.artTemplate基本语法结构
artTemplate的语法结构很简单，就是{{}}。{{}}
2.artTemplate模板引擎的使用方法
首先，需要去官网下载 简洁语法版 ,然后在body底部加载script文件。文件很小，只有2.7kb，可是功能十分强大。
2.1：使用一个type="text/html"的script标签存放模板
使用script存放模板的时候要注意两个方面。
一方面是必须给script标签定义id，而且只能是id，不能是class。因为在使用template(id,data)方法的时候，该方**根据id渲染模板，引擎内部会根据document.getElementById(id)查找模板。如果使用class作为参数，artTemplate引擎会报错。如果没有 data 参数，将返回一渲染函数。
另外一方面是在<!DOCTYPE html>script标签中的type类型默认为type/javascript。在script标签中，必须重新声明type类型为text/html，否则会没有效果。
使用方法如下
<script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引{{i+1}} : {{value}}</li> {{/each}} </ul> </script> <script> var data = { title:'My Life', list:['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script> 渲染的页面如下：
在Js中存放模板应该会很少用到，因为在前端领域有一条军规，结构样式和行为三者必须分离。如果把模板放在js文件内，会破坏这条规定。
看看例子，知道一下调用的规则。实质上就是一段拼接字符串的过程。
<script type="text/javascript"> var source ="<ul>" + "{{each list as value i}}" + "<li>索引{{i+1}}：{{value}}</li>" + "{{/each}}" + "</ul>"; var render = template.compile(source); var html = render({ list:['篮球','桌球','游泳','滑轮','读书'] }); $('.rascal').html(html); </script>
2.3：嵌入子模板(include)
嵌套模板跟第一种方法原理相同，只不过在一个模板中调用了另外一个模板而已。
<script id='test' type='text/html'> <h1>My Life</h1> {{include 'list'}} </script> <script id='list' type='text/html'> <ul> {{each list as value i}} <li>索引{{i+1}}：{{value}}</li> {{/each}} </ul> </script> <script> var data = { "list":['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script>
3.artTemplate模板引擎使用实战
artTemplate官网给出的每一个例子其实都已经很好了，可以让每一个人都很容易的明白。不过我认为唯一的缺点就是，例子中的数据完全都是自己定义的。在实际开发中，用户看到的每一个商品数据是这样来的：首先后端攻城狮通过特定语法连接数据库，然后将从数据库中获取的数据转换成JSON格式，最后前端攻城狮在通过一些方法将JSON数据渲染到页面上。所以我们的数据不能自己瞎造，而是通过Ajax异步加载。
在我的一篇 淘宝购物车页面 智能搜索框Ajax异步加载数据 文章中，一开始是使用手写拼接字符串的方法去拼接字符串，这种方法效率低，容易出错。后来全部改成了js模板引擎的方法。所以我会以淘宝购物车页面中智能搜索框Ajax异步加载商品数据的例子来说明artTemplate模板引擎。
先放上一段代码。主要还是想通过这个简单的例子说明接下来要探讨的问题。
<script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引{{i+1}} : {{value}}</li> {{/each}} </ul> </script> <script> var data = { title:'My Life', list:['篮球','桌球','游泳','滑轮','读书'] }; var html = template('test',data); $('.rascal').html(html); </script> 上面代码中，要注意几点的就是：
♥ 遍历表达式中的list必须与脚本中data对象中的list同名，而且遍历表达式中的list必须是data对象中的一个属性。循环表达式中，要循环的是每一个data对象中的list数组，而不是data对象，这点很重要。
在这个例子中，data对象中list属性是一个数组，数组中的每一个值都是简单数据类型，篮球桌球等。当然，可以往数组中传入复杂数据类型，如对象。说明这个主要是因为在循环表达式中循环的数据和给template()传入第二个参数的时候很容易出错。
♥ 使用template方法时，第一个参数必须是id，而不能是class。
放上一段json数据代码。
[ [ { "Query":"lan", "Results":[ { "Type":"AS", "Suggests":[ { "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031", "num":339, "max":764, "discount":200, "label":"liningBas", "shop":"李宁官方网店", "image":"css/images/lining-bas.png", "color":"颜色分类：荧光果粉/木梅红", "size":"鞋码：42", "nonDiscount":"￥539.00", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" }, { "Txt":" adidas阿迪达斯篮球男子篮球鞋Regulate", "num":419, "max":18, "discount":120, "label":"adidas", "nonDiscount":"￥539.00", "image":"css/images/adidas.png", "color":"颜色分类：银金属/深藏青蓝", "shop":"adidas官方旗舰店", "size":"鞋码：43.5", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" } ] } ] } ], [ { "Query":"音速3", "Results":[ { "Type":"AS", "Suggests":[ { "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031", "num":339, "max":764, "label":"liningBas", "shop":"李宁官方网店", "image":"css/images/lining-bas.png", "color":"颜色分类：荧光果粉/木梅红", "size":"鞋码：42", "nonDiscount":"￥539.00", "bandCard":"css/images/bankCard.png", "sevenDay":"css/images/sevenDay.png", "guarantee":"css/images/guarantee.png" } ] } ] } ]]basketBallShoes.json
上面代码中，是一段需要被Ajax异步加载数据的商品数据。
再放上使用一个type="text/html"的script标签存放模板的代码。
<script id='basketBallShoes' type="text/html"> {{each Suggests as value i}} <div > <div > <div > <input type="checkbox" name="shopMsg" id='{{value.label}}' class='shopMsg-input' autocomplete="off"> <label for="{{value.label}}">店铺： <a href="#">{{value.shop}}</a> </div> </div> <div > <ul> <li class='td-chk'> <div > <input type="checkbox" name='checkbox' autocomplete="off" > </div> </li> <li class='td-item'> <div > <a href="#" class='desImg'> <img src='/images/loading.gif' data-original="{{value.image}}" > </a> <div > <div > <a href="#">{{value.Txt}}</a> </div> <div > <div ></div> <div > <a href="#" title='支持信用卡支付'> <img src='/images/loading.gif' data-original="{{value.bandCard}}" > </a> <a href="#" class='sevenDay' title='7天无理由'> <img src='/images/loading.gif' data-original="{{value.sevenDay}}" > </a> <a href="#" title='消费者保障服务'> <img src='/images/loading.gif' data-original="{{value.guarantee}}" > </a> </div> </div> </div> </div> </li> <li class='td-info'> <div > <p>{{value.color}}</p> <p>{{value.size}}</p> </div> </li> <li class='td-price'> <div > <p class='non-discount'>{{value.nonDiscount}}</p> <p class='discount'>￥<span>{{value.num}}.00</span></p> <div > 卖家促销 <i class='promotionIcon'></i> </div> <div > <p class='newPro'>卖家促销：新品大特价</p> <p>优惠：￥200.00</p> </div> </div> </li> <li class='td-amount'> <div > <a href="#" class='amount-left amount-color'>-</a> <input type="text" name='amountNum' value='1' autocomplete="off"> <a href="#" >+</a> </div> <div > {{value.max}} </div> <div > <span >最多只能购买</span> <span class='stockNum'></span><!-- --><em>件</em> </div> </li> <li class='td-sum'> <em>￥</em><!-- --><span>{{value.num}}</span> </li> <li class='td-operation'> <p><a href="#" class='delete'>删除</a></p> </li> </ul> </div> </div> {{/each}} </script> <script id="search" type="text/html"> <ul> {{each Suggests as value i}} <li>{{value.Txt}}</li> {{/each}} </ul> </script> <script id='delete' type='text/html'> <div > <div > <p> 成功删除 <em>1</em> 件宝贝，如果有无，可 <a href="#" class='turnBack'>撤销本次删除</a> </p> </div> </div> </script>JS模板引擎
上面代码中是需要被渲染的模板。比手写拼接字符串简单很多，并且效率高，错误率低。
最后放上js实现相应功能的部分重要代码。
$.get('search.json',{'Query':$val}, function(data) { for (var i = 0; i < data.length; i++) { //如果值与json中的query字段匹配，动态加载html if ($val === data[i][0].Query) { var results = data[i][0].Results[0]; //js模板引擎 var $html = template('search',results); $('.list').html($html) } }}); 这里想说的是给template方法的第二个参数和循环表达式需要被循环的字段。
第一点是给template方法的第二个参数。第二个参数传入了results,这里的results实质上就是在上面例子中data对象。只不过在JSON数据中results是一个数组。
第二点是在JS模板引擎中。在模板中是这样写的：{{each Suggests as value i}}，这里的Suggests其实就相当于data对象中的list属性。在data对象中，list是一个数组，并且每个值都是字符串；而在results数组中，Suggests是一个数组，不过它的每一个值都是复杂数据类型，是对象。如果对数据类型不明白的，可以前往这篇文章：Javascript对象 。
我知道了 