超快的模板引擎 artTemplate.js

时间 2019-11-17

标签快的模板引擎 arttemplate.js arttemplate 栏目 JavaScript 繁體版

原文原文链接

<!DOCTYPE html>        
<html lang="en">        
<head>        
    <meta charset="UTF-8">        
    <title>超快的模板引擎 artTemplate.js</title>      
    <style type="text/css">  
    </style>       
</head>        
<body>  
  <div id="content"></div>
  
  <script id="test" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
    </ul>
  </script>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
  <script type="text/javascript"> 
    var data = {
        title: '标签',
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    $('#content').html(html);
  </script>  
</body>        
</html>

若是后端给的数据是一个数组，数据里包含一个对象，前端页面须要把这个对象里的每个字段以及字段对应的内容都展现出来，且这个对象里有多少字段有哪些字段都不是已知的，能够参考下面的代码：javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>超快的模板引擎 artTemplate.js</title>
    <style type="text/css">
    .m-list-item {
        position: relative;
        padding: 19px 18px 28px;
        background: #2C355D;
        border-bottom: 1px solid #5C70B0;
        list-style-type: none;
    }

    .m-list-item {
        list-style-type: none;
    }

    .m-right-row {
        line-height: 30px;
    }

    .m-right-label {
        display: inline-block;
        font-size: 14px;
        color: #FFFFFF;
        vertical-align: top;
    }

    .m-right-text {
        display: inline-block;
        margin: 0 0 0 10px;
        max-width: 500px;
        font-size: 14px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }
    </style>
</head>

<body>
    <ul id="m-list"></ul>
    <script id="m-list-tpl" type="text/html">
        {{each data as info i}}
        <li class="m-list-item">
            {{each info as item j}}
                <div class="m-right-row">
                    <span class="m-right-label">{{item.label}}:</span>
                    <span class="m-right-text">{{item.content}}</span>
                </div>
            {{/each}}
        </li>
        {{/each}}
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
    <script type="text/javascript">
    var data = {
        protocols: [{
            'title': '80/HTTP',
            'Status Line': '200 OK',
            'Page Title': 'Core Databases',
            'Server': 'Apache httpd'
        }, {
            'title': '443/HTTPS',
            'Cipher Suite': 'TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xC02F)',
            'Version': 'TLSv1.2',
            'Heartbleed': 'Heartbeat Enabled. Immune to Heartbleed.',
            'Trusted': 'True'
        }]
    };
    var result = [];
    for (var i = 0; i < data.protocols.length; i++) {
        var itemArr = [];
        for (var item in data.protocols[i]) {
            var temp = {};
            temp.label = item;
            temp.content = data.protocols[i][item];
            itemArr.push(temp)
        }
        result.push(itemArr);
    }
    var data = { data: result };
    var html = template('m-list-tpl', data);
    $('#m-list').html(html);
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>超快的模板引擎 artTemplate.js</title>
    <style type="text/css">
    .m-list-item-title{line-height: 28px; font-size: 20px;color: #FFFFFF;}
    .m-list-item {
        position: relative;
        padding: 19px 18px 28px;
        background: #2C355D;
        border-bottom: 1px solid #5C70B0;
        list-style-type: none;
    }

    .m-list-item {
        list-style-type: none;
    }

    .m-right-row {
        line-height: 30px;
    }

    .m-right-label {
        display: inline-block;
        font-size: 14px;
        color: #FFFFFF;
        vertical-align: top;
    }

    .m-right-text {
        display: inline-block;
        margin: 0 0 0 10px;
        max-width: 500px;
        font-size: 14px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }
    </style>
</head>

<body>
    <ul id="m-list"></ul>
    <script id="m-list-tpl" type="text/html">
        {{each data as info i}}
        <li class="m-list-item">
            <div class="m-list-item-title">{{info.title}}</div>     
            {{each info.content as item j}}
                <div class="m-right-row">
                    <span class="m-right-label">{{item.label}}:</span>
                    <span class="m-right-text">{{item.content}}</span>
                </div>
            {{/each}}
        </li>
        {{/each}}
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
    <script type="text/javascript">
    var data = {
        protocols: [{
            'title': '80/HTTP',
            'Status Line': '200 OK',
            'Page Title': 'Core Databases',
            'Server': 'Apache httpd'
        }, {
            'title': '443/HTTPS',
            'Cipher Suite': 'TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xC02F)',
            'Version': 'TLSv1.2',
            'Heartbleed': 'Heartbeat Enabled. Immune to Heartbleed.',
            'Trusted': 'True'
        }]
    };
    var result = [];
    for (var i = 0; i < data.protocols.length; i++) {
        var itemArr = {
            title: data.protocols[i].title,
            content: []
        };
        delete data.protocols[i].title;
        for (var item in data.protocols[i]) {
            var temp = {};
            temp.label = item;
            temp.content = data.protocols[i][item];
            itemArr.content.push(temp)
        }
        result.push(itemArr);
    }
    var data = { data: result };
    var html = template('m-list-tpl', data);
    $('#m-list').html(html);
    </script>
</body>

</html>

模板中的条件判断：css

{{if info.filter}}
    <span class="m-legend-filter active js-filter" data-type="{{data[i].type}}"></span>  
{{else}}
    <span class="m-legend-filter js-filter" data-type="{{data[i].type}}"></span>  
{{/if}}

artTemplate github下载地址：https://github.com/aui/art-templatehtml

备注：欢迎加入web前端求职招聘qq群：668352707前端