模板引擎artTemplate的使用

无论是Ajax还是跨域，目的都是为了获取服务器的数据，获取数据之后，对前端界面进行渲染。

怎么渲染前端界面呢？

前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生成html标签。

生成html标签，可以通过拼接字符串的方式来实现。但是这种方式在标签结构比较复杂的情况下，很不好操作和后期维护，并且容易出错。

通过模板引擎可以很方便地生成html标签。

模板引擎的本质：将数据和模板结合起来生成html片段。所以模板引擎需要两个组成部分：模板和数据，通过数据，将模板指定的标签动态生成，方便维护。

常见的模板引擎有很多，这里使用腾讯公司开源的模板引擎：artTemplate。

使用步骤：

1、引入template.js文件

2、定义模板

3、将数据和模板结合起来生成html片段

4、将html片段渲染到界面中

基本语法：

得到数据中的值：{{value}}

循环操作：{{each result as value i}} html片段 {{/each}}

转义：#的使用 {{#value}}

条件判断：{{if xxx}} html片段 {{/if}}

技巧：有时候可能需要对原始数据进行加工操作

案例1：基本的循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artTemplate</title>
    <!--引入js文件-->
    <script src="template.js"></script>
    <!--定义模板-->
    <script type="text/html" id="resultTemplate">
        <h1>{{title}}</h1>
        <ul>
        {{each books as value i}}
            <li>{{value}}</li>
        {{/each}}
        </ul>
    </script>
    <script>
        window.onload = function(){
            var data = {
                title:"四大名著图书信息",
                books:['西游记','水浒传','三国演义','红楼梦']
            };
            //生成html片段
            var html = template("resultTemplate",data);
            var container = document.getElementById("container");
            //将html片段渲染到界面中
            container.innerHTML = html;
        };
    </script>
</head>
<body>
<div id="container"></div>
</body>
</html>

案例2：条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artTemplate</title>
    <!--引入template.js文件-->
    <script src="template.js"></script>
    <!--创建模板：注意必须type="text/html"-->
    <script type="text/html" id="resultTemplate">
        {{if isAdmin}}
            <h1>{{title}}</h1>
            <h2>一共有{{count}}条数据</h2>
            <ul>
            {{each list as value i}}
                <li>索引{{i+1}}：{{value}}</li>
            {{/each}}
            </ul>
        {{/if}}
        {{if !isAdmin}}
            <h1>没有任何数据信息</h1>
        {{/if}}
    </script>
    <script>
        window.onload = function(){
            var data = {
                title: "条件判断基本例子",
                isAdmin: true,
                list: ["文字","博客","电影","旅游","摄影","吉他","民谣"]
            };
            //给data添加一个属性
            data.count = data.list.length;
            //生成html片段
            var html = template("resultTemplate",data);
            var content = document.querySelector(".content");
            //将html片段渲染到界面中
            content.innerHTML = html;
        };
    </script>
</head>
<body>
<div class="content"></div>
</body>
</html>

isAdmin: true

isAdmin: false

案例3：对原始数据进行加工操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artTemplate</title>
    <!--引入template.js文件-->
    <script src="template.js"></script>
    <!--创建模板：注意必须type="text/html"-->
    <script type="text/html" id="resultTemplate">
        <ul>
            {{each data as value i}}
            <li>索引{{i+1}}：{{value}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        window.onload = function(){
            var data = ["文字","博客","电影","旅游","摄影","吉他","民谣"];
            //对data进行处理，包到一个对象当中去
            var temp = {};
            temp.data = data;
            //生成html片段
            var html = template("resultTemplate",temp);
            var content = document.querySelector(".content");
            //将html片段渲染到界面中
            content.innerHTML = html;
        };
    </script>
</head>
<body>
<div class="content"></div>
</body>
</html>

注意：数据需要是一个对象中的各个属性值。单独的一个数组是无法直接用模板引擎的。

案例4：转义与非转义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>artTemplate</title>
    <!--引入template.js文件-->
    <script src="template.js"></script>
    <!--创建模板：注意必须type="text/html"-->
    <script type="text/html" id="resultTemplate">
        <p>默认转义：{{value}}</p>
        <p>不转义：{{#value}}</p>
    </script>
    <script>
        window.onload = function(){
            //数据中包含特殊字符
            var data = {
                value:'<span style="color: #78cc4c;">Hello World!</span>'
            };
            //生成html片段
            var html = template("resultTemplate",data);
            var content = document.querySelector(".content");
            //将html片段渲染到界面中
            content.innerHTML = html;
        };
    </script>
</head>
<body>
<div class="content"></div>
</body>
</html>