我們在用H5+Css3布局頁面的時候，通過接口展示數據到頁面的時候，如果數據少還好，有時候ul -> li有多個的時候 只能循環接口返回的數據然后一個一個去展示。
更通俗的說就是以前通過js append到 dom 元素中現在直接用模板在html頁面中直接展示，便於閱讀，性能更快
前段時間在無意中學習到一個新東西 art-template 前端模板引擎 這個東西可以像vue展示數據一樣很方便的進行數據展示 還有一個叫 thymeleaf (我還沒用過)
1.介紹
art-template 是一個簡約、超快的模板引擎。它采用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。
特性：
擁有接近JavaScript渲染極限的性能
調試友好：語法、運行時報錯日志精准到模板所在行；支持在模板文件上打斷點
支持壓縮輸出頁面中的HTML，CSS、JS代碼
支持 Express，Koa，Webpack
支持模板繼承和子模版
支持JS語句與模板語法混合寫法
瀏覽器版本僅6KB大小
2. 安裝
1.直接去官網下載或者點擊這個鏈接 https://unpkg.com/art-template@4.13.2/lib/template-web.js
2.npm安裝
npm install art-template --save-dev
3.語法
1.art-template 支持標准語法與原始語法。標准語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。
下面只說標准語法
輸出用 {{}}
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
條件判斷 {{if}} ... {{/if}}
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
循環語法
第一種 {{each datalit value i}} ... {{/each}} ** value 和 i 的位置不能互換
{{each datalist value i}}
{{i + 1}} {{value}}
{{/each}}
第二種 {{each datalist}} ... {{/each}}
{{each datalist}}
{{$index}} {{$value}}
{{/each}}
兩個模板交互：{{include 'id名' '要傳遞的值'}}
4.案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="./js/art-template.js"></script> </head> <body> <div id="content"> <script type="text/html" id="test"> <!-- type="text/html"表示模板 id用於在js中將數據與模板做關聯 --> <!-- 1. 先看看數據的渲染吧 --> <h2>{{ title }} </h2> <!-- 2.語法中的循環寫法 --> <ul> {{each list value i }} <li>索引 {{ i+1 }} : {{ value }} </li> {{/each}} </ul> <ul> {{each list }} <li>索引 {{ $index+1 }}: {{ $value }} </li> {{/each}} </ul> <!-- 3. if判斷語法 --> <ul> <!-- 語法中的if判斷 --> {{if c == 100 }} {{each person }} <li> 編號：{{ $index +1 }} -- 姓名：{{ $value.name }} -- 年齡：{{ $value.age }} </li> {{include 'test2', $value}} {{include 'test3', $value}} {{/each}} {{/if}} </ul> </script> <div class="center"> <script type="text/html" id="test2"> <ol> {{each like}} <li> {{ $value }} </li> {{/each}} </ol> </script> </div> <div class="action"> <script type="text/html" id="test3"> <div style="color: red;"> <div>{{ fruit.one }} and {{ fruit.two }} </div> </div> </script> </div> </div> </body> </html> <script> var data = { title: 'Hello Family', list: ['文藝', '博客', '攝影', '電影', '明耀', '旅行', '吉他'], c: 100, person: [ { name: 'jack', age: 18, like: ['sleep1', 'play1', 'piano1'], fruit: { one: 'apple1', two: 'banana1' } }, { name: 'tom', age: 19, like: ['sleep2', 'play2', 'piano2'], fruit: { one: 'apple2', two: 'banana2' } }, { name: 'jerry', age: 20, like: ['sleep3', 'play3', 'piano3'], fruit: { one: 'apple3', two: 'banana3' } }, { name: 'kid', age: 21, like: ['sleep4', 'play4', 'piano4'], fruit: { one: 'apple4', two: 'banana4' } }, { name: 'jade', age: 22, like: ['sleep5', 'play5', 'piano5'], fruit: { one: 'apple5', two: 'banana5' } } ] } var htmlDemo = template('test', data); $('#content').html(htmlDemo); </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="./art-template.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#article> .title {
margin-top: 20px;
}
#article> ul {
margin-top: 15px;
}
#article> ul li {
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<h2>PLEASE HIGHLIGHT YOUR ANSWER</h2>
<div id="article">
<script type="text/html" id="test">
{{each request value i}}
<div class="title">{{i+1}}. {{ value.title}} </div>
{{include 'answer' value}}
{{/each}}
</script>
<script type="text/html" id="answer">
{{if answer.length !== 0}}
<ul>
{{each answer}}
<li>{{ $value }} </li>
{{/each}}
</ul>
{{/if}}
</script>
</div>
</div>
</body>
</html>
<script>
var data = {
request: [{
title: 'What is the style name of first pair of Vans shoes?',
answer: ['The Authentic', 'The Old Skool', 'The Era', 'The Slip-On']
}, {
title: 'What is the original name of Vans when it started its business?',
answer: ['Van Doren Anaheim Factory', 'Vans Doren Shoe Company', 'Van Doren Rubber Company', 'Vans Doren shoe shop']
}, {
title: 'What is the originality of Vans’“Off the Wall?',
answer: ['Slogan from TV commercial', 'Name of a skate trick', 'Slang from southern California', 'Name of a song']
}, {
title: 'Name the skateboarders who created the Era with Vans?',
answer: ['Steve Caballero', 'Tony Alva', 'Stacy Peralta', 'Christian Hosoi']
}, {
title: 'What is the style number of Old Skool?',
answer: ['Style #54', 'Style #76', 'Style #36', 'Style #52']
}]
}
var requestData = template('test', data);
$('#article').html(requestData);
</script>
自我感覺還是很方便，很實用的一個模板，大家有機會可以試試