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方法的第二個參數和遍歷表達式中須要被遍歷的數據很容易寫錯，但願同窗能夠注意這一點。

　　若是有不明白或者寫錯的地方，能夠給我留言。