詳解js模板引擎art template數(shù)組渲染的方法

更新時間：2018年10月09日 14:32:22 作者：Tom

art-template 是一個簡約、超快的模板引擎。這篇文章主要介紹了詳解js模板引擎art template數(shù)組渲染的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

art-template 是一個簡約、超快的模板引擎。

什么是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

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

<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ù)組轉(zhuǎ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ù)組渲染，這是一個數(shù)組

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

html

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

<script>
const res = ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'];
document.getElementById('interest').innerHTML = template('interestTemp', {data:res}); // 其實這里是把數(shù)組轉(zhuǎ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>

就說這么多吧，其實這種模板用著挺簡單的很順手。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: