Detailed explanation of the method of rendering art template array in js template engine

As the most important part of the separation of data and interfaces, JavaScript template engines are increasingly attracting attention from developers. The types of template engines are also diverse. I will say that there are two high security, excellent error handling and debugging, and fast execution speeds include artTemplate (Tencent 14k) and juicer (foreign 12k). In addition to poor error handling and debugging, doT has the same other like these two. One advantage is that it is small (4k), which is far from the way it goes.

art-template is a simple and super fast template engine.

What is art-template

art-template is a simple and super fast template engine. It uses scoped pre-declaration techniques to optimize template rendering speeds, achieving operational performance close to the limits of JavaScript, and supports both NodeJS and browsers. Using art-template is also convenient for maintaining the code. In the past, we rendered data as html content written in the js file in the form of a template string. If the html content needs to be modified, we need to modify it in js. After using the template engine, we only need to modify the html content in the html file. In addition, the DOM operation efficiency will be higher after using the template engine.

It uses scoped pre-declaration techniques to optimize template rendering speeds, achieving operational performance close to the limits of JavaScript, and supports both NodeJS and browsers.Online speed test。

art-template feature

1. Have performance close to the limit of JavaScript rendering
2. Debug-friendly: syntax and runtime error logs are accurate to the line where the template is located; support breaking points on template files (Webpack Loader)
3. Support Express, Koa, Webpack
4. Support template inheritance and sub-template
5. Browser version is only 6KB in size

Let’s talk about the rendering method of concise syntax, template (filename, content) renders the template according to the template name. The premise is that you already have some understanding of artTemplate.

Today we will talk about the method of array rendering

Array rendering has two forms: array objects and pure arrays. Let’s talk about array objects first. If the backend returns to our interface, the received array is an array. for example:

const res = [
{"name":"Xiao Ming", "age":16, "marry":"single"},
{"name":"Little Flower","age":15, "marry":"Have a boyfriend"},
{"name":"Little fat","age":15, "marry":"Have a girlfriend"},
{"name":"Xiaoli","age":15, "marry":"single"}
];

One advantage of using artTemplate is that except for your data that needs to be reorganized, the rest can be used directly. as follows

html

<div ></div>

js

<script>
const res = [
{"name":"Xiao Ming", "age":16, "marry":"single"},
{"name":"Little Flower","age":15, "marry":"Have a boyfriend"},
{"name":"Little fat","age":15, "marry":"Have a girlfriend"},
{"name":"Xiaoli","age":15, "marry":"single"}
];
('person').innerHTML = template('personTemp', {data:res}); // In fact, here is the array converted into an object.</scrtip>

template

<script type="text/html" >
//Writing method 1{{each data}}
<li>{{$index}}index My name is{{$}}，This year{{$}}age，{{$}}</li>
{{/each}}
 
//Writing method two{{each data item index}}
<li>{{index}}index My name is{{}}，This year{{}}age，{{}}</li>
{{/each}}
</script>

Let's look at the array rendering below, this is an array

const res = ['Literary', 'blog', 'photography', 'Movie', 'ballad', 'travel', 'Guitar'];

html

<div ></div>

js

<script>
const res = ['Literary', 'blog', 'photography', 'Movie', 'ballad', 'travel', 'Guitar'];
('interest').innerHTML = template('interestTemp', {data:res}); // In fact, here is the array converted into an object.</scrtip>

template

<script type="text/html" >
//Writing method 1{{each data}}
<li>{{$index}}index I like{{$}}</li>
{{/each}}
 
//Writing method two{{each data item index}}
<li>{{index}}index I like{{item}}</li>
{{/each}}
</script>

That’s all, this kind of template is actually quite simple and easy to use.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.