12.模板引擎art-template

[toc]

模板引擎art-template

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

art-template是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。由腾讯公司研发的，市面上有很多类似的模板引擎技术，但是这个应用相对较多。

优点：执行效率高，兼容所有浏览器，使用方便。

有两种语法形式：

简洁语法结构。 类似 vue, angularjs, freemarker,valocity;

原生JavaScript语法结构。类似jsp;

art-template

1. 简洁语法结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>简洁语法结构</title>
    <style>
    </style>
    <script src="art-template/template.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var data = {"name": "喵喵", "age": "17", "hobby": ["哈哈", "嘻嘻", "啦啦"]};
            var str = template("art1", data);
            $("#container").html(str);
        });
    </script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <ul>
        {{each hobby as value i}}
        <li>{{i+1}}{{value}}</li>
        {{/each}}
    </ul>
</script>
</body>
</html>

2. 原生JS语法结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>原生js语法结构</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
    </style>
    <script src="art-template/template-native.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var data={"name":"喵喵","age":"17","hobby":["哈哈","嘻嘻","啦啦"]};
            var str = template("art1",data);
            console.log(str);
            $("#container").html(str);
        });
    </script>


</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
    <!--template 错误是因为喵喵少了"" 也就是模板错误，检查模板格式  调试代码方法：通过小范围复制源代码来查看代码出错的区域-->
    <% if(name=="喵喵"){ %>
        <h2><%=name%></h2>
        <h2><%=age%></h2>
        <ul>
            <% for(var i=0;i< hobby.length;i++){ %>
            <li><%=i+1%><%=hobby[i]%></li>
            <%}%>
        </ul>
    <%}%>
</script>
</body>
</html>

3. 核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立即执行
template.render(source, data, options);