篮球artTemplate模板引擎学习实战

  在自家的一篇有关智能搜索框异步加载数据的稿子中,有博友给自己留言,认为我手写字符串拼接功效过低,容易失误。在通过一段时间的追寻和读书之后,发现现在拼接字符串的情势都不在是投机去书写了,而是拔取Javascript引擎。而javascript引擎的真面目就是帮大家把带有JavaScript代码的伪THTML语句编译为HTML。

篮球 1

 

图表源于网络

  若是有不了然的情侣,可以前往那两篇著作:

1、黄昏下,五个调皮的身影,蹦跳着往前,多少人合伙石头剪子布着回家,何人赢了什么人就可以往前走两步,也许放学后的时刻,就是这么没了的,又或者,许多年的欢笑,也就是这般没了的。

  Taobao购物车页面
PC端和运动端实战

他,叫小冰,而自我叫小样,可能她的双亲,希望他如凝脂白雪般冰雪聪慧,而自己的二老却只要本人活出个样来即可。

  Taobao购物车页面
智能搜索框Ajax异步加载数据

咱俩做了初中三年的知音,近年来,我们又做了两年的高中好友,我妈说,我们俩好的,就即将穿同一条裤子了。

  源码地址:

唯独,大家俩倒没那么夸张到要穿同一条裤子,不过大家俩,许是在一块儿的岁月久了,连生理期依然都准时到同一天来,我们一同牵开首,去买卫生巾,又一头牵开始,在生理期的时候吃冰糕,再然后,我们俩又一起肚子痛到生不如死,最终,我们俩又泡上只一杯的红糖水,你一口,我一口,哀嚎着喝下。

  GitHub:Uncle-Keith

实则,我们不是五个精神病,也不是外人说的塑料花姐妹,大家只是一些,如意如意,随自己心意的好闺蜜而已。

 

2、若是,我是说只要,没有他的现身,可能自己和小冰的情分,就这么天随人愿,而现在,大家却不得不风流云散,就像有一本书说的那么,她,只成了从自我的海内外路过的过客,不对,她不是途经,她是借过而已。

  回归正题,以下对artTemplate模板引擎的介绍会分为如下几局部情节:

让大家这五个女生之间,确切地就是女孩之间,反了开去的,是一个叫小新的男孩。

  1.artTemplate模板引擎的主导语法结构

当然,他也不是蜡笔小新的异常小新,他是大家高校足球队的守门员,外加篮球队的实力大前锋加大前锋,人送外号“新摇摆人”。

  2.artTemplate模板引擎的为主使用方法

他还有的过人之处,这就是,画的一手的好速写,我认同,我和小冰我们都是形容社团的,但是,大好的年龄,朗朗乾魂,灼灼其华,我们俩并且欣赏上一个男孩子,难道是我们的错吧?

    2.1:使用一个type="text/html"script标签存放模板

既生瑜何生亮的沉痛,难道,难道别人都不懂吗?

    2.2:在javascript中存放模板

篮球,3、这段时间里,我也终究知道了,为啥她会被人家冠有外号“摇摆人”了,他是在自我的社会风气里丢下了一个小火苗,又在小冰的小宇宙里放了一支二踢脚。

    2.3:嵌入子模板(include)

我的星星之火,在渐渐燎原,而小冰的小宇宙却早就炸开了。

  3.artTemplate模板引擎使用实战

本人是班里的读书委员,战表还算不错,不过胆小内向,我直接是一个极致自卑的女孩,我一连柔声细语地走自身的美人路线,我怕与人家接触,许多的悄悄话,都只和小冰说。

 

而小冰呢,却是跟真的爷们一样,她和什么人都聊得来,任和何人搭讪,她都能一来二去就和居家混熟了,所以,她的哥们儿,姐们儿遍高校,而自我,却唯有小冰。

1.artTemplate主旨语法结构

4、小新,是从高二的下半学期转来的,正好和大家同样班,很快我们就要文理分科了。

  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,否则会没有效果。

5、放学的时候,我将这件工作与小冰分享,并尝试着想从他这边拿到祝福与两肋插刀。

    使用办法如下

可她却是漠然地,安静地,沉默地,很酷地给了自身一记杀威棍,这一当头棒喝,让自家好几天都缓然则劲来。

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

自我还记得她即刻冰冷的说话:“别痴心妄想了,他是不会喜欢你的。他只是拿班里的每个人做画画的模特儿而已,当然得观望的细心了。”

    渲染的页面如下:

“可是,男生们拿这幅画给自身的时候,他看本身的眼力是不一样的。”

    篮球 2

“这是你看错了,他对什么人都是这种眼神,可想而知,你就是看错了,想多了,你要么好好学你的习得了,在意这多少个做哪些?再说了,你和自家炫耀什么?是说自家别看这么多朋友,却没人喜欢自己吗?”

  2.2:在Javascript中存放模板

“小冰,我不是这多少个意思,我…..”

    在Js中存放模板应该会很少用到,因为在前者领域有一条军规,结构体制和行事三者必须分别。如若把模版放在js文件内,会破坏这条规定。

“好了,我不想和你争执这么些了。我还有舞蹈课要去上,我先走了。”

    看看例子,知道一下调用的规则。实质上就是一段拼接字符串的历程。

6、这天的黄昏那样的美,我们却再也回不到这时候的开阔了。

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

这天未来,小冰开首躲我,当我尝试着找他讲话的时候,她就找借口走开,再后来,我和咱们这时候没吵架从前说好的这样,采用了文科。

    篮球 3

而她却和小新一起,采用了理科。

  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>

7、我的美好初恋,其实,不可以算做初恋,因为毕竟,它自然就从不初步,你想要,就心潮澎湃地拿去啊。

    篮球 4

大家的光明情谊,干嘛你也拿走了吗。

3.artTemplate模板引擎使用实战

先天,是其一春日最冷的一天,我看着路过的一对嬉笑着的青年女孩,她们笑的那么称心快意,就像大家那时候同样。

  artTemplate官网给出的每一个事例其实都早已很好了,可以让每一个人都很容易的知情。不过自己认为唯一的毛病就是,例子中的数据完全都是友好定义的。在骨子里开支中,用户观望的每一个货品数量是这般来的:先是后端攻城狮通过一定语法连接数据库,然后将从数据库中获取的多少转换成JSON格式,最后前端攻城狮在经过一些形式将JSON数据渲染到页面上。所以我们的数量无法团结瞎造,而是经过Ajax异步加载。

自身的心初步隐隐的痛了。

  在我的一篇 Taobao购物车页面
智能搜索框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>

【无戒365天创作挑衅训练营 第34天】

  下边代码中,要注意几点的就是:

  ♥
遍历表明式中的list必须与剧本中data对象中的list同名,而且遍历表达式中的list必须是data对象中的一个性质。循环表明式中,要循环的是每一个data对象中的list数组,而不是data对象,这点很重点。

  在这多少个例子中,data对象中list属性是一个数组,数组中的每一个值都是简简单单数据类型,篮球桌球等。当然,可以往数组中传入复杂数据类型,如目标。表达这多少个重如若因为在循环表明式中循环的数量和给template()传入第二个参数的时候很容易出错。

  ♥ 使用template方法时,第一个参数必须是id,而不可以是class。

  

  放上一段json数据代码。

篮球 5篮球 6

[
    [
        {
            "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标签存放模板的代码。

篮球 7篮球 8

    <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对象

篮球 9

  

  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

 

  完。感谢我们的翻阅。