這篇文章主要介紹js模板引擎art template數(shù)組渲染的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)站制作,高端網(wǎng)站制作設(shè)計,重慶小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團隊竭力真誠服務(wù),采用H5網(wǎng)站設(shè)計+CSS3前端渲染技術(shù),成都響應(yīng)式網(wǎng)站建設(shè)公司,讓網(wǎng)站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組,與您實時在線互動,隨時提供解決方案,暢聊想法和感受。
什么是art-template
art-template 是一個簡約、超快的模板引擎。它采用作用域預(yù)聲明的技術(shù)來優(yōu)化模板渲染速度,從而獲得接近 JavaScript 極限的運行性能,并且同時支持 NodeJS 和瀏覽器。使用art-template也便于維護代碼,以前我們渲染數(shù)據(jù)是以模板字符串的形式在js文件中寫入的html內(nèi)容,如果html內(nèi)容需要修改,我們需要在js中修改。而用了模板引擎以后,我們只需要html文件中修改html內(nèi)容。還有使用了模板引擎以后DOM操作的效率也會更高一點。
它采用作用域預(yù)聲明的技術(shù)來優(yōu)化模板渲染速度,從而獲得接近 JavaScript 極限的運行性能,并且同時支持 NodeJS 和瀏覽器。在線速度測試。
art-template特性
擁有接近 JavaScript 渲染極限的的性能
調(diào)試友好:語法、運行時錯誤日志精確到模板所在行;支持在模板文件上打斷點(Webpack Loader)
支持 Express、Koa、Webpack
支持模板繼承與子模板
瀏覽器版本僅 6KB 大小
我們就講一下講簡潔語法的渲染方式,template(filename, content)根據(jù)模板名渲染模板。前提是你已經(jīng)對artTemplate有所了解,
今天我們就講一下數(shù)組渲染的方法
數(shù)組渲染有數(shù)組對象和純數(shù)組兩種形式,我們先說數(shù)組對象,如后端返回我們接口,收到的就是一個數(shù)組。比如:
const res = [ {"name":"小明", "age":16, "marry":"單身"}, {"name":"小花","age":15, "marry":"有男朋友"}, {"name":"小胖","age":15, "marry":"有女朋友"}, {"name":"小麗","age":15, "marry":"單身"} ];
用artTemplate有個好處就是除了你的數(shù)據(jù)需要重組,其他的完全可以拿來直接用。如下
html
js
下面在看數(shù)組渲染,這是一個數(shù)組
const res = ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'];
html
js
就說這么多吧,其實這種模板用著挺簡單的很順手。
以上是“js模板引擎art template數(shù)組渲染的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!