Introduction to common JavaScript template Engines

Introduction to common JavaScript template Engines
This article mainly introduces common JavaScript template engines. This article introduces eight common JavaScript template engines and focuses on artTemplate template engines. For more information, see

 

 

Recently, my work is slowly approaching my idealization (web Front-end), So I pay more attention to front-end performance! Background colleagues introduced how to use the ajax template engine to improve rendering speed!

The following describes several JavaScript template engines.

1. Mustache

The template engine based on javascript is similar to Microsoft's jQuery template plugin, but it is easier to use!

2. doT. js

DoT. js contains the JavaScript template engine for browsers and Node. js.

3. jSmart

JSmart is the JavaScript port version of the famous PHP template engine Smarty.

4. dom. js

Dom. js is a JavaScript template engine available on the client and server.

5. jade

Jade is a high-performance template engine that uses JavaScript to implement node Based on Haml.

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 is close to the javascript performance limit. In chrome's rendering efficiency test, it is 25 or 32 times that of the well-known engine Mustache and micro tmpl. The engine supports debugging. If an error occurs during rendering, the debugger can precisely locate the template statements that generate exceptions to solve the problem that the front-end template is difficult to debug.

A unique template compilation tool that can compile front-end templates into JS files that do not depend on the template engine, so that front-end templates can break through browser restrictions, implement file-and directory-based organization, on-demand loading, and include nesting like back-end templates. All of this is implemented in 2 kb (gzip!

Maybe you may think this plug-in name is familiar. That's right! This is also the sugar pie prepared by artDialog.

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

Reference Engine

 

The Code is as follows:

<Script src = "js/template. js"> </script>

 

Compile a template

 

The Code is as follows:

<Script id = "test" type = "text/html">
// Use a script tag of type = "text/html" to store the template:
<H1> <% = title %> <Ul>
<%
For (I = 0; I <list. length; I ++) {%>
<Li> itemL <% = I + 1% >:< % = list [I] %> </li>
<% }%>
</Ul>
// The template Logical Syntax start and end are defined as <% and %>. If <% follows the = sign, the variable content is output.
</Script>

 

Rendering Template

 

The Code is as follows:

Var data = {
Title: 'tag ',
List: ['literature and art ', 'blog', 'Photography ', 'cine', 'folk songs ', 'travel', 'guitar']
};
Var html = template. render ("test", data );
Document. getElementById ('content'). innerHTML = html;