模板引擎

這裏只引入一種模板引擎的介紹,更多方法能夠查詢文檔javascript

art-Template 模板引擎介紹
簡介:css

  • artTemplate 是新一代 javascript 模板引擎,它採用預編譯方式讓性能有了質的飛躍,而且充分利用 javascript 引擎特性,使得其性能不管在前端仍是後端都有極其出色的表現。

特性:html

  • 擁有接近 JavaScript 渲染極限的的性能
  • 調試友好:語法、運行時錯誤日誌精確到模板所在行;支持在模板文件上打斷點(Webpack Loader)
  • 支持 Express、Koa、Webpack
  • 支持模板繼承與子模板
  • 瀏覽器版本僅 6KB 大小

模板:前端

  • art-template 同時支持兩種模板語法。標準語法能夠讓模板更容易讀寫;原始語法具備強大的邏輯處理能力。

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

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] %>
            <% } %>

核心方法:
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>
相關文章
相關標籤/搜索