JavaScript template engine Overview

We will have a general understanding of JavaScript templates through this article. Before I learn more about some of the more popular template engines, I'll start by describing what JavaScript templates are and when to use and how to use them. I'll focus on Mustache,handlebars and jquery templates.

What is a JavaScript template?

A JavaScript template is a means of separating the HTML structure from its specific content. The template system usually introduces some new syntax, but the syntax is very handy, especially if the template system is used elsewhere (eg. PHP's twig). But it's interesting to note that token substitution is usually identified by double brackets ({...}} The names of Mustanche and handlebars are the result of this (compare them to one).

When should we use JavaScript templates?

Once the HTML is found to be in JavaScript text, we should consider whether the JavaScript template will bring any benefit. One of the most important things when building maintainable code libraries is the separation of concerns (note: SOC), so any useful method should be explored. In the area of front-end development, separating HTML from JavaScript is a major part of the Soc. (also we should not put JavaScript code in HTML).

Real-time web apps that often use the same format to display different content (such as news Feeds) or internationalization (i18n) products are a common benefit from javascrippt templates.

How do we use javascript templates?

I'll elaborate on some specific libraries authoring here, but essentially, templates, including our library, are simple. Try adding some data to these templates.

Mustache.js

Mustache is a multi-lingual, non-logical templating system. Mustache.js is just one of them, so as long as you learn its syntax (fairly simple), it can be used in many other programming languages.

Points:

• 9Kb Volume (small)
• Simple
• No dependencies
• No logic
• No pre-compiled templates
• Regardless of programming language

Cases:

1. <script id= "template" type= "X-tmpl-mustache" >
2. <p>< Span class= "Typ" >use the <strong>{{ power}}</strong> {{name}}!</p>
3. </SCRIPT>

2. Grab the inline template
4. var template = document. getElementById(' template '). InnerHTML;
8. Parse It (optional, necessary if template is used again)
10. Mustache. Parse(template);
14. Render the data into the template
16. var rendered = mustache. Render(template, {name: "Luke", power: "force "});
20. Overwrite the contents of #target with the rendered HTML
22. Document. getElementById(' target '). InnerHTML = rendered;

Demo

As you can see from the example, the Mustache.render function receives two parameters: the mustache template, a view object that contains data and code that needs to be used in the template. In this example, we use some simple characters instead of name and power variables, but it does more than that. For example: Traversing an array, or having a special render function that uses the current view as the view parameter.

The mustache.js is suitable for smaller projects and quick prototypes that do not require too many templates. It is important to note that we can start a project with Mustache.js and then easily upgrade to Handblebars.js. Think most of these templates are the same.

Handlebars.js

Handlebars.js is written on the basis of mustache, so it can be compatible with most mustache templates. In short, it provides everything mustache provides, and adds support for block expressions and precompiled templates. Precompiling a template is a great thing, because it dramatically improves performance. (In a Limit performance test, the precompiled template renders only half the time of the mustache template). Block expressions allow you to add logic to a template, and the most common examples are advanced iterations-such as creating a <ul> list iterator with <li> wrapper for each entry. You can get more information about block expressions here.

Points:

• 86KB Volume (Large), using pre-compiled template 18kb
• Block expression (secondary)
• Pre-compiled templates
• Non-independent

Cases:

1. <script id= "template" type= "text/x-handlebars-template" >
2. <p >use the <strong >{{power}}</strong >, {{name}}!</< Span class= "PLN" >p>
3. </ Script>

2. Grab the inline template
4. var template = document. getElementById(' template '). InnerHTML;
8. Compile the template
10. var compiled_template = handlebars. Compile(template);
14. Render the data into the template
16. var rendered = compiled_template({name: "Luke", power: "Force"});
20. Overwrite the contents of #target with the renderer HTML
22. Document. getElementById(' target '). InnerHTML = rendered;

I see the demo link again.

The handlebars.js is ideal for projects that do not need to worry about adding additional 18kb content to the page while performing at the same time. This is also a solution when you need block expressions.

Note that if you want to experience the performance benefits of Handlebars.js, we must use precompiled templates (which also greatly reduces file volume). For efficient implementation purposes, we need to add Handlebars,js template editing attachments (Grunt have a great plug-in for this) in the project.

If you want to know more about handlebars, look here: A Beginner ' s Guide to handlebars.

JQuery templates

The jquery template is not as popular as mustache.js and Handlebars.js. But we should also look (I don't think I can). This template is somewhat different from the mustache template because it is just plain HTML and there is no new syntax. Unlike token substitution, it uses the Data property to indicate where the data needs to be inserted in the HTML skeleton.

Points:

• 7KB Volume (small)
• Rely on jquery (+82KB)
• Simple, but not the same as mustache and handlebars.js.
• No pre-compiled templates

Cases:

2. <script id="template" type="text/html">
4. <p>
6. Use the <strong data-content="Power"></strong;
8. <span data-content="name"></span>!
10. </P>
12. </script>

2. Call. LoadTemplate () on the target container
4. $(' #target '). LoadTemplate(
6. //specify the template container (or file name of external template)
8. $(' #template '),
12. //specify the data to render
14. {
16. Name: "Luke",
18. Power: "Force"
20. }
22. );

Again to my least favorite link (point I see demo)

The jquery template is for projects that already use jquery because it has a small file size. But if you don't have jquery in your project, God, then you have to think about how big the total volume is.

Other options

There are, of course, many other solutions that cannot be described in this article. Let's just make a hasty mention:

Underscore.js

Underscore is a popular JavaScript library, and the template feature is just one of its many features. Unlike mustache, which uses double curly braces, it defaults to the Erb-style delimiter (<%...% >).

Embedded JS teamplates (EJS)

Like underscore.js,embedded js templates use Erb-style template syntax. One thing Ejs need to be aware of is that it must be an external file--they can't have inline templates.

Conclusion

So which one is the best? As with many development problems, there is no good idea. The answer depends on many aspects:

• Have you already used jquery in your project?
• What template system have you used before?
• Do you want to separate the template from the logic
• How worried you are about total file volume
• How much do you worry about performance issues/Does your site need to support low performance devices?

Once these questions are answered, we can make a choice in the list above. However, as mentioned earlier, a flexible strategy is to use Mustache.js first and then upgrade to handlebars.js when functionality or performance is required.

Original link: http://www.gbtags.com/gb/share/9662.htm

JavaScript template engine Overview