在我们使用字符串拼接的形式来渲染UI界面时，如果UI界面非常的复杂，那拼接字符串时不亚于在cmd命令界面存储数据库数据，真的能逼疯人，需求如果再变化了需要我们去修改，那把代码吃了的心都有了，所以，我们的模板引擎就轻松的帮我们解决了这个问题，更加的逻辑化，便捷化，可以根据我们指定的模板结构以及数据来自动生成渲染UI界面

二.使用art-template模板引擎

我们了解了模板引擎接下来我们来学习怎样使用它为我们工作

1.首先我们应该下载上JS文件并且引入到我们的HTML页面中

下载地址如下：

安装 - art-templateNpmnpm install art-template --save 在浏览器中实时编译下载：template-web.js（gzip: 6kb）兼容 IE8+（IE8 需要补丁才能运行。示例）差异因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHThttp://aui.github.io/art-template/zh-cn/docs/installation.html导入了art-template的JS文件之后，我们的全局中就多了一个template（）函数

2.定义我们需要渲染的数据

我们已经引入完成JS文件，接下来定义我们的数据

var data = {name:"王麻子"}

就先定义一个王麻子吧（我认识王麻子），暂时想不出来其他名字了，这样我们的数据就定义完成了（在我们自己的JS文件中定义）

3.定义模板

定义模板就需要我们了解一下<script>标签的属性type了，我们的JS文件可以不写type属性，默认值为text/javascript

<script type="text/javascript"></script>

但是还有另外一种格式，专门用来书写HTML标签，我们总不能把HTML标签写到JS里吧，它也不会识别，只会报错

<script type="text/html" id="XXX">
    <div>{{}}</div>
    //{{}}表示占位符，表示这里将来要添加数据
</script>

这样我们就可以将HTML标签写到JS文件里了

4.调用函数方法

调用函数方法就用到我们之前说的全局新增函数template()了

template("XXX",data);
//XXX为上一步定义好的模板的ID
//data为第二步定义好的数据

这样我们就完成的整个逻辑渲染的程序了

这里有一个需要注意的点：*我们在template（）函数中获取ID值不需要加#，这是模板引擎为我们提供的单独的函数，并不是jQuery函数

三.完成一个小案例

这里我们使用上述知识点来完成一个渲染UI页面的小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <!-- 导入模板引擎 -->
    <script src="./template-web.js"></script>
</head>
<body>
    <!-- 定义一个元素，接下来我们渲染它 -->
    <div id="con"></div>
</body>
    <!-- 定义模板 -->
    <script type="text/html" id="art-temp">
        <h1>姓名:{{name}}</h1>
        <h1>年龄:{{age}} 喜欢的数字:{{9}}</h1>
    </script>
    <script>
    // 定义数据
        var data = {
            name:"张三",
            age:20,
            likenum:9
        }

        // 调用
        var htmlStr = template("art-temp",data);
        $("#con").html(htmlStr);
    </script>
</html>

四.art-template标准常用语法

art-template提供了{{}}这样的语法格式，在{{}}我们可以进行变量的输出、循环数组的输出等等

1.标准语法——输出

2.标准语法——原文输出

我们来举一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <!-- 导入模板引擎 -->
    <script src="./template-web.js"></script>
</head>
<body>
    <!-- 定义一个元素，接下来我们渲染它 -->
    <div id="con"></div>
</body>
    <!-- 定义模板 -->
    <script type="text/html" id="art-temp">
        <h1>姓名:</h1>{{momo}}
    </script>
    <script>
    // 定义数据
        var data = {
            momo:"<h1>测试</h1>"
        }

        // 调用
        var htmlStr = template("art-temp",data);
        $("#con").html(htmlStr);
    </script>
</html>

当我们使用原文输出语法{{@value}}之后：

<script type="text/html" id="art-temp">
        <h1>姓名:</h1>{{@momo}}
</script>

3.标准语法——条件输出

通过我的标识不难看出，这不就是if...else语句吗，是的，就是如果满足了前面的条件，就会执行其后面的语句，不满住继续往下执行，{{/if}}结束当前语句

<body>
    <!-- 定义一个元素，接下来我们渲染它 -->
    <div id="con"></div>
</body>
    <!-- 定义模板 -->
    <script type="text/html" id="art-temp">
        {{if flag === 0}}
        我等于零
        {{else if flag === 1}}
        我等于1
        {{/if}}
    </script>
    <script>
    // 定义数据
        var data = {
            flag:1
        }

        // 调用
        var htmlStr = template("art-temp",data);
        $("#con").html(htmlStr);
    </script>

4.标准语法——循环输出

不是特别好理解，如果我们要实现循环的语法，可以在{{}}内执行each语法循环数组，当前的索引号使用$index访问,当前的循环项使用$value访问，我们直接看语法，然后代码实现一下：

我们利用代码实现一下就较好理解了：

<body>
    <!-- 定义一个元素，接下来我们渲染它 -->
    <div id="con"></div>
</body>
    <!-- 定义模板 -->
    <script type="text/html" id="art-temp">
        {{each hobby}}
            <li index="{{$index}}">{{$value}}</li>
        {{/each}}
    </script>
    <script>
    // 定义数据
        var data = {
            hobby:[
                "打游戏",
                "睡觉",
                "打代码"
            ]
        }

        // 调用
        var htmlStr = template("art-temp",data);
        $("#con").html(htmlStr);
    </script>

我们发现，不仅将内容依次输出渲染到了UI页面，并且我们利用{{$index}}给每一个li都添加上了自定义索引，是不是很方便呀

5.标准语法——过滤器

我们通过图解来了解一下过滤器是一个什么东西：

首先我们来看一下过滤器的调用：

语法中现在的value值并不是我们想要的值，我们可以理解为：把value当作一个参数传给了后面的函数方法，函数处理完毕之后输出的值是一个"过滤"完的值，是我们想要的值，它的语法类似管道操作符，上一个输出的值作为下一个输入

定义过滤器：

最后我们return处理输出最后的结果

五.总结案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery-min.js"></script>
    <!-- 导入模板引擎 -->
    <script src="./template-web.js"></script>
</head>
<body>
    <div id="con"></div>
</body>
<!-- 定义模板 -->
<script type="text/html" id="mo">
    <h1>姓名:{{name}}</h1>

    <h1>年龄:{{name}} 喜欢的数字:{{9}}</h1>

    {{@test}}

    {{if flag === 0}}
    我等于零
    {{else if flag === 1}}
    我等于1
    {{/if}}

    {{each hobby}}
    <li index="{{$index}}">{{$value}}</li>
    {{/each}}

    <h1>{{regtime | dateFormat}}</h1>
</script>
<script>
    //过滤时间
    template.defaults.imports.dateFormat = function(date){
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + "年" + month + "月" + day + "日"
    }

    // 定义数据
    var data = {
        name:"张三",
        age:20,
        likenum:9,
        test:"<h1>看看我是多大的字体</h1>",
        flag:1,
        hobby:[
            "睡觉",
            "玩游戏",
            "写代码"
        ],
        regtime:new Date()
    }

    // 调用
    var htmlStr = template("mo",data);
    $("#con").html(htmlStr);
</script>
</html>