轉(zhuǎn)載：js模板引擎art template數(shù)組渲染的方法

JavaScript 模板引擎作為數(shù)據(jù)與界面分離工作中最重要一環(huán)，越來(lái)越受開發(fā)者關(guān)注，模板引擎種類也是五花八門，我就說(shuō)幾個(gè)安全性高、錯(cuò)誤處理調(diào)試優(yōu)，執(zhí)行速度快的有artTemplate(騰訊 14k)、juicer(國(guó)外 12k)這倆個(gè)，doT除了錯(cuò)誤處理調(diào)試差以外其他的都和這兩個(gè)一樣,他有一個(gè)優(yōu)點(diǎn)是小(4k)，扯遠(yuǎn)啦。

art-template 是一個(gè)簡(jiǎn)約、超快的模板引擎。

它采用作用域預(yù)聲明的技術(shù)來(lái)優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運(yùn)行性能，并且同時(shí)支持 NodeJS 和瀏覽器。在線速度測(cè)試。

我們就講一下講簡(jiǎn)潔語(yǔ)法的渲染方式，template(filename, content)根據(jù)模板名渲染模板。前提是你已經(jīng)對(duì)artTemplate有所了解，

今天我們就講一下數(shù)組渲染的方法

數(shù)組渲染有數(shù)組對(duì)象和純數(shù)組兩種形式，我們先說(shuō)數(shù)組對(duì)象，如后端返回我們接口，收到的就是一個(gè)數(shù)組。比如：

const res = [ {"name":"小明", "age":16, "marry":"單身"}, {"name":"小花","age":15, "marry":"有男朋友"}, {"name":"小胖","age":15, "marry":"有女朋友"}, {"name":"小麗","age":15, "marry":"單身"} ];

用artTemplate有個(gè)好處就是除了你的數(shù)據(jù)需要重組，其他的完全可以拿來(lái)直接用。如下

html

<div id="person"></div>

js

<script> const res = [ {"name":"小明", "age":16, "marry":"單身"}, {"name":"小花","age":15, "marry":"有男朋友"}, {"name":"小胖","age":15, "marry":"有女朋友"}, {"name":"小麗","age":15, "marry":"單身"} ]; document.getElementById('person').innerHTML = template('personTemp', {data:res}); // 其實(shí)這里是把數(shù)組轉(zhuǎn)為對(duì)象的形式傳進(jìn)的 </scrtip>

template

<script type="text/html" id="personTemp"> //寫法一 {{each data}} <li>{{$index}}索引 我叫{{$value.name}}，今年{{$value.age}}歲，{{$value.marry}}</li> {{/each}}//寫法二 {{each data item index}} <li>{{index}}索引 我叫{{item.name}}，今年{{item.age}}歲，{{item.marry}}</li> {{/each}} </script>

下面在看數(shù)組渲染，這是一個(gè)數(shù)組

const res = ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'];

html

<div id="interest"></div>

js

<script> const res = ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']; document.getElementById('interest').innerHTML = template('interestTemp', {data:res}); // 其實(shí)這里是把數(shù)組轉(zhuǎn)為對(duì)象的形式傳進(jìn)的 </scrtip>

template

<script type="text/html" id="interestTemp"> //寫法一 {{each data}} <li>{{$index}}索引 我喜歡{{$value.name}}</li> {{/each}}//寫法二 {{each data item index}} <li>{{index}}索引 我喜歡{{item}}</li> {{/each}} </script>

就說(shuō)這么多吧，其實(shí)這種模板用著挺簡(jiǎn)單的很順手。

轉(zhuǎn)載：js模板引擎art template數(shù)組渲染的方法

總結(jié)

以上是生活随笔為你收集整理的js模板引擎art template数组渲染的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。