模板引擎

时间 2020-11-30

标签 javascript css html 前端 java jquery git github web ajax 栏目 JavaScript 繁體版

原文原文链接

这里只引入一种模板引擎的介绍,更多方法能够查询文档javascript

art-Template 模板引擎介绍
简介：css

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是后端都有极其出色的表现。

特性：html

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

模板：前端

art-template 同时支持两种模板语法。标准语法能够让模板更容易读写；原始语法具备强大的逻辑处理能力。

模板引擎的使用：
1.首先须要引入插件：java

能够在官网（http://aui.github.io/art-template/zh-cn/）去下载‘template-web.js’
引入方式： <script src="./template-web.js"></script>

2.语法:jquery

输出:
- 标准语法

{{value}}
            {{data.key}}
            {{data['key']}}
            {{a ? b : c}}
            {{a || b}}
            {{a + b}}

- 原始语法

<%= value %>
            <%= data.key %>
            <%= data['key'] %>
            <%= a ? b : c %>
            <%= a || b %>
            <%= a + b %>

条件：
- 标准语法

{{if value}} ... {{/if}}
            {{if v1}} ... {{else if v2}} ... {{/if}}

- 原始语法

<% if (value) { %> ... <% } %>
            <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环：
- 标准语法

{{each target}}
                {{$index}} {{$value}}
            {{/each}}

- 原始语法

<% for(var i = 0; i < target.length; i++){ %>
                <%= i %> <%= target[i] %>
            <% } %>

注：另有其余语法能够查看官网（http://aui.github.io/art-template/zh-cn/）文档

核心方法:
template(filename, content): 根据模板名渲染模板。返回动态生成的页面结构git

案例：使用模板引擎简写语法渲染首页github

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hero - Admin</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        .hero-list img {
            width: 50px;
            height: 50px;
            display: block
        }

        .hero-list td {
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <header>
        <div class="page-header container">
            <h1>王者荣耀 <small>英雄管理器</small></h1>
        </div>
    </header>
    <div class="container hero-list">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>操做</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>jack</td>
                    <td>男</td>
                    <td><img src="http://127.0.0.1:3002/images/1.jpg"></td>
                    <td><a href="#">查看</a> <a href="javascript:;">修改</a>
                        <a href="javascript:;">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 下面建立页面动态结构所须要的模板 -->
    <!--type属性就是规范了里面的代码以何种语法进行解析 ，script默认的type为text/javascript,script有默认的type,若是设置类型为text/template，那么浏览器知道这不是js,也不会按js语法进行解析，
            同时它还知道这是一个模板结构，因此会按模板结构的语法处理 -->
    <script type="text/template" id='listTemp'>
        {{each data as value index}}
            <tr>
                <td>{{i+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.gender}}</td>
                <td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td>
                <td><a href="#">查看</a> <a href="javascript:;">修改</a>
                    <a href="javascript:;">删除</a></td>
            </tr>
        {{/each}}
    </script>
    <!-- 引入jq -->
    <script src="./js/jquery.min.js"></script>
    <!-- 引入模板引擎 -->
    <script src="./js/template-web.js"></script>
    <script>
        $(function () {
            // 页面一加载就发起ajax请求
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3002/getalldata',
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    if (result.code == 200) {
                        // 调用模板引擎，生成动态结构
                        var html = template('listTemp', result)
                        // 将动态结构填充到页面指定结构
                        $('#tbody').html(html)
                    }
                }
            })
        })
    </script>
</body>
</html>