AjaxartTemplate模板引擎学习实战

  在我的一篇有关智能搜索框异步加载数据的文章中,有博友给自己留言,认为我手写字符串拼接功能过低,容易失误。在通过一段时间的查找和学习之后,发现现在拼接字符串的方法都不在是投机去书写了,而是利用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的语法结构很简单,就是{{}}。`{{}}“`
符号包裹起来的说话则为模板的表明式。表达式又分为
输出表达式,条件表达式,遍历表达式,模板包蕴表明式。具体的可以看看GitHub: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>

    渲染的页面如下:

    Ajax 1

  2.2:在Javascript中存放模板

    在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>

    Ajax 2

  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>

    Ajax 3

3.artTemplate模板引擎使用实战

  artTemplate官网给出的每一个例证其实都已经很好了,可以让每一个人都很不难的领悟。可是自己觉得唯一的毛病就是,例子中的数据完全都是友好定义的。在骨子里开销中,用户看到的每一个货品数量是如此来的:第一后端攻城狮通过一定语法连接数据库,然后将从数据库中得到的数码转换成JSON格式,最后前端攻城狮在经过一些办法将JSON数据渲染到页面上。所以我们的多寡不可以和谐瞎造,而是经过Ajax异步加载。

  在自己的一篇 Tmall购物车页面
智能搜索框Ajax异步加载数据

小说中,一开头是利用手写拼接字符串的方式去拼接字符串,那种措施成效低,不难出错。后来漫天改成了js模板引擎的法子。所以我会以Tmall购物车页面中智能搜索框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数据代码。

Ajax 4Ajax 5

[
    [
        {
            "Query":"lan",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "discount":200,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        },
                        {
                            "Txt":" adidas阿迪达斯篮球男子篮球鞋Regulate",
                            "num":419,
                            "max":18,
                            "discount":120,
                            "label":"adidas",
                            "nonDiscount":"¥539.00",
                            "image":"cssidas.png",
                            "color":"颜色分类:银金属/深藏青蓝",
                            "shop":"adidas官方旗舰店",
                            "size":"鞋码:43.5",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ],
    [
        {
            "Query":"音速3",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ]
]

basketBallShoes.json

  上边代码中,是一段需求被Ajax异步加载数据的货色数量。

  再放上使用一个type="text/html"script标签存放模板的代码。

Ajax 6Ajax 7

    <script id='basketBallShoes' type="text/html">
        {{each Suggests as value i}}
            <div class="mainCommodity">
                <div class="shopInfo">
                    <div class="shopMsg">
                            <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 class="commodityInfo">
                    <ul>
                        <li class='td-chk'>
                            <div class="td-inner">
                                <input type="checkbox" name='checkbox' autocomplete="off" >
                            </div>
                        </li>
                        <li class='td-item'>
                            <div class="td-inner">
                                <a href="#" class='desImg'>
                                    <img src="{{value.image}}" alt='{{value.Txt}}'>
                                </a>
                                <div class="item-info">
                                    <div class="item-basis-info">
                                        <a href="#">{{value.Txt}}</a>
                                    </div>
                                    <div class="item-other-info">
                                        <div class="item-other-space"></div>
                                        <div class="item-other-list">
                                            <a href="#" title='支持信用卡支付'>
                                                <img src="{{value.bandCard}}" alt="支持信用卡支付">
                                            </a>
                                            <a href="#" class='sevenDay' title='7天无理由'>
                                                <img src="{{value.sevenDay}}" alt="7天无理由">
                                            </a>
                                            <a href="#" title='消费者保障服务'>
                                                <img src="{{value.guarantee}}" alt="消费者保障服务">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class='td-info'>
                            <div class="td-info-msg">
                                <p>{{value.color}}</p>
                                <p>{{value.size}}</p>
                            </div>
                        </li>
                        <li class='td-price'>
                            <div class="td-inner">
                                <p class='non-discount'>{{value.nonDiscount}}</p>
                                <p class='discount'>¥{{value.num}}.00</p>
                                <div class="promotion">
                                    卖家促销
                                    <i class='promotionIcon'></i>
                                </div>
                                <div class="proSlidedown">
                                    <p class='newPro'>卖家促销:新品大特价</p>
                                    <p>优惠:¥200.00</p>
                                </div>
                            </div>
                        </li>
                        <li class='td-amount'>
                            <div class="item-amount">
                                <a href="#" class='amount-left amount-color'>-</a>
                                <input type="text" name='amountNum' value='1' autocomplete="off">
                                <a href="#" class="amount-right">+</a>
                            </div>
                            <div class="stock">
                                {{value.max}}
                            </div>
                            <div class="outNum">
                                最多只能购买
                                <!--
                                --><em>件</em>
                            </div>

                            </li>
                        <li class='td-sum'>
                            <em>¥</em><!--
                            -->{{value.num}}
                        </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 class="undo-wrapper">
            <div class="deleteCom">
                <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对象

Ajax 8

  

  artTemplate使用实战就介绍完了。在template方法的首个参数和遍历表明式中须求被遍历的数量很不难写错,希望同学可以小心那点。

  如若有不通晓或者写错的地点,可以给自己留言。

 

  参考小说

  artTemplate

  atc-前端模板预编译器

  高质量JavaScript模板引擎原理分析

  最不难易行的JavaScript模板引擎

  简单来说JavaScript模版引擎优化

  javascript模板引擎原理,几行代码的事宜

  老伯手记(7):打造友好的JavaScript模板小引擎

  基于HTML模板和JSON数据的JavaScript交互

 

  源码地址:GitHub:Uncle-Keith

  转发请声明出处:http://www.cnblogs.com/Uncle-Keith/p/5932439.html

 

  完。感谢大家的阅读。

相关文章