artTemplate模板引擎学习实战

时间 2019-11-10

标签 arttemplate 模板引擎学习实战繁體版

原文原文链接

如下对artTemplate模板引擎的介绍会分为以下几部份内容：javascript

　　1.artTemplate模板引擎的基本语法结构html

　　2.artTemplate模板引擎的基本使用方法前端

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

　　　　2.2：在javascript中存放模板git

　　　　2.3：嵌入子模板(include)github

　　3.artTemplate模板引擎使用实战数据库

1.artTemplate基本语法结构
json

　　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>

　　　　渲染的页面以下：

　　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>

　　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数据代码。

basketBallShoes.json

　　上面代码中，是一段须要被Ajax异步加载数据的商品数据。

　　再放上使用一个type="text/html"的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对象。

　　artTemplate使用实战就介绍完了。在template方法的第二个参数和遍历表达式中须要被遍历的数据很容易写错，但愿同窗能够注意这一点。

　　若是有不明白或者写错的地方，能够给我留言。