這篇文章主要介紹js模板引擎art template數(shù)組渲染的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元臨潁做網(wǎng)站,已為上家服務(wù),為臨潁各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

什么是art-template

art-template 是一個(gè)簡(jiǎn)約、超快的模板引擎。它采用作用域預(yù)聲明的技術(shù)來(lái)優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運(yùn)行性能，并且同時(shí)支持 NodeJS 和瀏覽器。使用art-template也便于維護(hù)代碼，以前我們渲染數(shù)據(jù)是以模板字符串的形式在js文件中寫入的html內(nèi)容，如果html內(nèi)容需要修改，我們需要在js中修改。而用了模板引擎以后，我們只需要html文件中修改html內(nèi)容。還有使用了模板引擎以后DOM操作的效率也會(huì)更高一點(diǎn)。

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

art-template特性

1. 擁有接近 JavaScript 渲染極限的的性能

2. 調(diào)試友好：語(yǔ)法、運(yùn)行時(shí)錯(cuò)誤日志精確到模板所在行；支持在模板文件上打斷點(diǎn)(Webpack Loader)

3. 支持 Express、Koa、Webpack

4. 支持模板繼承與子模板

5. 瀏覽器版本僅 6KB 大小

我們就講一下講簡(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

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