EasyTemplateJS Template Engine User Guide

EasyTemplateJS(EasyTemplate JavaScript) is a small, pure, high-performance JavaScript template engine.

JavaScript template engine as the data and interface separation of the most important part. Using JavaScript template functions to avoid the inconvenience and low maintenance of splicing HTML strings in JavaScript, embedding JavaScript scripts inHTML as opposed to using JSP andASP Technical programming. EasyTemplate provides an ultra-high-performance rendering engine that uses template technology in JavaScript to simplify operations and enhance program design flexibility.

The latest version: 2.1.1-RELEASE

Feature

Performance test comparison

From the rendering performance, EasyTemplate and artTemplate are using pre-static compilation principle, can be said to have close to the performance limit, is the highest performance of the template engine. Some poor engine may not only affect the customer experience, but also cause the browser to crash or abnormal termination, Baidu engine performance is poor, the implementation of the browser rendering a huge impact.

Performance test comparison

Use

1. Download

2. TemplateJS Template expression

TemplateJS supports three types of template expressions, which do not allow nesting or crossover:

  1. The script expression

    %{ JavaScript Script }%: The implementation of arbitrary JavaScript code (JSP <%%> the same small script), JS script <,> and other special symbols can also be used instead of the corresponding character entities.

  2. The output expression

    {expression}: Insert the variables to be output (the same as <%= expression%> for JSP).

  3. The escape output expression

    {-expression}: Usage is the same as {expression}, and special characters are automatically escaped as character entities when outputting data.

3. Examples

EasyTemplateJS exposes an object named Et to complete the template operation.

// 1. Execute the template directly
var result = Et.template(tmplText, data);

// 2. Template compilation
var compiled = Et.template(tmplText);
// Compiled and executed
var res2 = compiled(data);
var res3 = compiled(data2);
var res4 = compiled(data3);

4. Use out output information

You can also use the out function to output information in your JavaScript code so that you do not have to break your code block, which is sometimes easier and clearer than using {name} '.

<!--  out -->
<script id="tmpl3" type="text/tmpl">
    %{ 
        for(var i=0; i < people.length; i++){ 
            // out function
            out( "<li>"+i+ " = "+people[i]+ "</li> "); 
        } 
    }% 
</script>
var res4 = Et.template("%{ out('Hello: '+name); }%", {
        name: "JACK"
    });
console.info(res4); //Hello: JACK

5. Customization template expression closed tag

Because certain template definition and execution blocks have special meanings in some dynamic pages (JSP,ASP), the use of template symbols on some pages can cause errors. EasyTemplate allows you to change the template settings and use other symbols to embed the code.

Why do I choose% {}%, {} as a closed tag?

EasyTemplateJS did not select the commonly used <%%> or $ {} as the default closing tag of the template engine, because in the JSP, ASP and other dynamic pages, <%%>, $ {} itself is a dynamic special mark, When a page defines a template tag, it affects JSP parsing, resulting in compilation errors. So EasyTemplate chose% {}% {} that will not conflict with other languages as much as possible.

However, if you prefer to use <%%> or $ {}, the EasyTemplate template tag is external to allow customization, you can modify it to <%%> to match your old template code.

Note: If you absolutely modify the closing label of a template expression, you need to be careful to check that your definition logic is reasonable.

Et.tmplSettings Default configuration:

Et.tmplSettings={
    // Script expression %{ JS script }%
    scriptBegin:"%{",
    scriptEnd:"}%",
    // Output expression {name}
    outBegin:"{",
    outEnd:"}",
    // Escape output expression {-name}
    escapeOutBegin:"{-",
    escapeOutEnd:"}"
}

Redefine the example:

var userSettings=
{
    // Script expression  <% JS script %>
    scriptBegin:"<%",
    scriptEnd:"%>",
    // Output expression <%=name %>
    outBegin:"<%=",
    outEnd:"%>",
    // Escape output expression <%-name %>
    escapeOutBegin:"<%-",
    escapeOutEnd:"%>"
}
// Global modifications
Et.tmplSettings=userSettings;

// test
console.info(
    Et.template(
        "hello: <%= name %>, <%- name %>",  // templateText
        {name: '<MoMo>'} // data
    )
);          
// Local modification test
console.info(
    Et.template(
        "hello: <%= name %>, <%- name %>",  // templateText
        {name: '<MoMo>'},                   // data
        userSettings                        //settings
    )
);  

6. API

Et Exposing a limited number of APIs:

Module support

END

The official home page

Comments

If you have more comments, suggestions or ideas, please contact me.

官方主页

留言评论

如果您有更好意见,建议或想法,请联系我。

Email:inthinkcolor@gmail.com

http://www.easyproject.cn

We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.

Thank you donation to support the server running and encourage more community members.

PayPal