Recently, my work content is gradually approaching my idealization (web front-end), so I pay more attention to front-end performance! A colleague in the background introduced the use of the ajax template engine to improve rendering speed!
Here are some JavaScript template engines
1. Mustache
A template engine based on javascript, similar to Microsoft's jQuery template plugin, but is simpler and easier to use!
2. doT.js
doT.js contains a JavaScript template engine for browsers and Node.js.
3. jSmart
jSmart is a JavaScript ported version of the famous PHP template engine Smarty.
4. dom.js
dom.js is a JavaScript template engine that can be used on both the client and the server side.
5. Jade
Jade is a high-performance template engine for nodes influenced by Haml in JavaScript.
6. Hogan.js
JavaScript template engine from Twitter.
7. Handlebars
Handlebars is a JavaScript page template library
8. artTemplate
artTemplate is a new generation of JavaScript template engine. Its rendering efficiency in v8 can be close to the performance limit of JavaScript. In the rendering efficiency test under Chrome, it is 25 and 32 times that of well-known engines Mustache and micro tmpl respectively. The engine supports debugging. If an error is encountered during rendering, the debugger can accurately locate the template statement that produces an exception, solving the problem that front-end templates are difficult to debug.
The unique template compilation tool can compile front-end templates into JS files that do not rely on the template engine to run, allowing front-end templates to break through browser restrictions and realize the organization of files and directories in the same way as back-end templates, load on demand, include nesting, etc. All this is done in 2kb(gzip)!
Maybe you will think that the name of this plugin looks familiar, that's right! This is also the author of artDialog.
Blog address: http://www.planeart.cn/
Quote Engine
The code copy is as follows:
<script src="js/template.js"></script>
Write a template
The code copy is as follows:
<script id="test" type="text/html">
//Use a script tag with type="text/html" to store the template:
<h1><%=title%></h1>
<ul>
<%
for(i=0;i<list.length;i++){%>
<li>itemL <%=i+1%>:<%=list[i]%></li>
<%}%>
</ul>
//The definition symbols for the beginning and end of the template logic syntax are <% and %>. If <% is followed by the = sign, the variable content will be output.
</script>
Rendering template
The code copy is as follows:
var data = {
title: 'tag',
list: ['Literary', 'Blog', 'Photography', 'Movie', 'Folk', 'Travel', 'Guitar']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;