模板引擎

時間 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>