What is the difference between handlebar.js and handlebar.runtime.js?

Question

I found that handlebar.runtime.js does not have a compile method. So I downloaded the wrong version to just use the template engine.

But why is handlebar.runtime.js needed?

Would it be better that Download: runtime-1.0.0 would be more invisible on the download page?

Answer 1

Handlebars uses tags that look like {{this}} that the browser cannot understand. For the browser to display these tags, they must be compiled. Compilation can occur either before or after the page loads.

To speed things up, you can precompile your templates. Additional information on the steering unit . If you do this, you will only need to enable the manual script working environment on your page. It is smaller than the full script descriptor because it does not need to worry about compiling templates. It is assumed that you precompiled them.

When the template is compiled, it is converted to a function that, when called, returns real HTML in which curly braces were converted to values ​​that the browser understands.

For example, this is ...

 <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> 

... will be converted to the following (as of June 2014) after preliminary compilation:

 (function() { var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; templates['test.hbs'] = template({"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) { var helper, functionType="function", escapeExpression=this.escapeExpression; return "<div class=\"entry\">\n <h1>" + escapeExpression(((helper = helpers.title || (depth0 && depth0.title)),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper))) + "</h1>\n <div class=\"body\">\n " + escapeExpression(((helper = helpers.body || (depth0 && depth0.body)),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper))) + "\n </div>\n</div>\n"; },"useData":true}); })(); 

The important conclusion here is that at some point the handlebars template must be converted to this function so that real HTML can be created. The runtime runtime script does not contain a compiler, which makes it smaller. And, after compiling your templates beforehand, there will be one less difficult step that JavaScript must go through before displaying the page.