巧用模板引擎事半功倍

目錄

一，前言

二，對比一般渲染數據方式及缺點

三，模板引擎

模板引擎的本質，優點

模板引擎artTemplate的下載地址

artTemplate使用步驟   

 易出錯的地方

 四，更多學習資源

---

一，前言

不論是使用Ajax獲取同源策略下的數據,還是跨域獲取數據，獲取數據之後將前端界面進行渲染。怎麼渲染前端界面呢?

---

 

二，對比一般渲染數據方式及缺點

• 前端界面都是由標籤構成的,所以前端界面的渲染主要做的就是生成html標籤。一般我們插入html標籤都是通過創建，複製，插入，再用字符串連接這幾個步驟實現將html標籤渲染到頁面

•        缺點：這種方式在標籤結構比較複雜的情況之下很不好操作和後期的維護,並且容易出錯，因此更好的模板引擎技術應運而生。

                 	var liTag = "";
                	for(var i=0;i<data.s.length;i++){
                		var temp = data.s[i];

                		liTag += "<li>"+temp+"</li>";
                	}

                	var ulTag = document.querySelector("ul");
                	ulTag.innerHTML = liTag;

---

 

三，模板引擎

• 模板引擎的本質，優點

模板引擎的本質:將數據和模板結合起來生成html片段。所以模板引擎需要兩個組成部分:模板和數據，通過數據，將模板指定的標籤動態生成，方便維護。

• 模板引擎artTemplate的下載地址

常見的模板引擎有很多，常用的模板引擎有tpl.js、baiduTemplate、doT.js、art-template等等這裏介紹效率最高的模板引擎            下面是各類模板引擎速度對比       artTemplate下載地址

• artTemplate使用步驟   

第一步：引入js文件

 <script type="text/javascript" src="template.js"></script>

第二步：編寫HTML模板 

    <script type="text/html" id='templatebook'>
        <!--只能用id命名-->
    </script>

第三步：向模板插入數據（模擬後端傳入的數據），並輸出到頁面

    <script type="text/javascript">
        window.onload = function() {
            var data = {
                title: '這是title',
                books: ['百事可樂', '可口可樂', '雪碧', '芬達']
            };
            var html = template('templatebook', data);
            //不需要加#
            var div = document.querySelector('#container');
            div.innerHTML = html;
        }
    </script>

第四步：將html片段渲染到頁面 

    <script type="text/html" id='templatebook'>
        <h4>{{title}}</h4>
        <ul>
            {{each books as value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>

• 常見語法

1,輸出表達式： 對內容編碼輸出： {{content}}     不編碼輸出： {{#content}} 

 <script id="test" type="text/html">
        {{msg}}
        <!--不識別html代碼-->
        {{#msg}}
        <!--識別html代碼-->
    </script>

    <script>
        window.onload = function() {
            var obj = {};
            obj.msg = '<h2 style="color:red">一些文字</h2>';
            var html = template('test', obj);
            document.querySelector('#content').innerHTML = html;

        }
    </script>

2,遍歷表達式 ：each 循環傳進來數據裏面的數組，要是傳進來數據本身就是數組就要進行簡單處理，value是值，i是索引

    <script id="test" type="text/html">
        <ul>
            {{each arr as value i}}
            <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>

    <script>
        window.onload = function() {
            var data = ['百事可樂', '可口可樂', '雪碧', '芬達'];
            var obj = {};
            obj.arr = data; //data數據複製到arr中
            var html = template('test', obj); //直接下data話 傳過去的數值就是data.data會報錯
            //定義個對象 將數據放到對象裏進行簡單處理
            document.querySelector('#content').innerHTML = html;
        }
    </script>

3，判斷語句 

    <script type="text/html" id='text'>
        {{if isFlag}}
        <!--如果是true纔會生成html片段-->
        <h1>
            {{title}}
        </h1>
        <ul>
            {{each list as value i}}
            <li>索引：{{i}} 值：{{value}}</li>
            <!--循環遍歷data中的數組，循環幾次產生幾個li-->
            {{/each}}
        </ul>
        {{/if}} {{if !isFlag}}
        <h1>沒有數據</h1>
        {{/if}}
    </script>

    <script>
        window.onload = function() {
            var data = {
                title: '條件判斷',
                isFlag: true,
                list: ['百事可樂', '可口可樂', '雪碧', '芬達']
            };
            var html = template('text', data);
            document.querySelector("#content").innerHTML = html;
        }
    </script>

•  易出錯的地方

分享一下我在學習過程中出錯的地方

1.  編寫html模板的時候一定是 type="text/html" 不要寫成了 <script type="text/javascript">
2. 給html模板命名的時候用id來命名，在template()函數中，不需要#
3. 如果傳入的數據data僅僅是,就是一個數組，那麼在html模塊中用 {{each data as value}} 報錯，因爲他默認回去data             裏面找data數組來遍歷，所以這裏要進行簡單的數據處理，在上面的語法中的遍歷代碼將的就是這個問題
4. each中html元素纔是要循環多次生成的，如上面語法中第3點  我只要一個ul，需要循環產生多個li，就不要把ul也放到            each中了，而是放在外面

---

 四，更多學習資源

1.  art-template中文文檔
2. art-template完整文檔