Introduction to commonly used JavaScript template engines_javascript skills

Recently, my work content is gradually approaching my ideal (web front-end), so I pay more attention to front-end performance! Colleagues in the background introduced the use of ajax template engine to improve rendering speed!

The following introduces several JavaScript template engines

1. Mustache

A template engine based on javascript, similar to Microsoft's jQuery template plugin, but 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 server sides

5. jade

Jade is a high-performance template engine for node implemented in JavaScript influenced by Haml.

6. Hogan.js

JavaScript templating 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 the well-known engines Mustache and micro tmpl respectively. The engine supports debugging. If an error is encountered during rendering, the debugger can pinpoint the template statement that generated the exception, solving the problem of difficult debugging of front-end templates.

The unique template compilation tool can compile the front-end template into a JS file that does not rely on the template engine to run, so that the front-end template can break through the limitations of the browser and be organized by files and directories like the back-end template. Need to load, include nesting, etc. All this in 2kb(gzip)!

Maybe you think this plug-in name looks familiar, yes! This is also the author of artDialog Sugar Cookie

Blog address: http://www.planeart.cn/

Quotation Engine

Copy code The code is as follows:

Write template

Copy code The code is as follows:

Rendering Template

Copy code The code is as follows:

var data = {
Title: 'Label',
list: ['Art', 'Blog', 'Photography', 'Film', 'Folk', 'Travel', 'Guitar']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;