javascript handlebar.js 和 handlebar.runtime.js 有什么区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19147161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 14:33:00  来源:igfitidea点击:

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

javascripttemplateshandlebars.js

提问by static

I found that handlebar.runtime.jshas no compilemethod. So I downloaded not the right version to just use the template engine.

我发现handlebar.runtime.js没有compile方法。所以我下载了不正确的版本来使用模板引擎。

But what is the handlebar.runtime.jsis for?

但这handlebar.runtime.js是为了什么?

It would be nicer that Download: runtime-1.0.0would be more unnoticeable on the download page?

Download: runtime-1.0.0在下载页面上更不明显会更好吗?

回答by rescuecreative

Handlebars uses tags that look like {{this}} that can not be natively understood by the browser. In order for the browser to render these tags, they have to be compiled. Compilation can happen either before or after you load the page.

Handlebars 使用看起来像 {{this}} 的标签,浏览器本身无法理解。为了让浏览器呈现这些标签,它们必须被编译。编译可以在加载页面之前或之后进行。

To speed things up, you can precompile your templates. More info at the handlebars site. If you do this, you only need to include the handlebars runtime script on your page. It's smaller than the full handlebars script because it doesn't need to worry about compiling templates. It assumes you have precompiled them.

为了加快速度,您可以预编译模板。车把网站上的更多信息。如果您这样做,您只需要在您的页面上包含把手运行时脚本。它比完整的把手脚本小,因为它不需要担心编译模板。它假定您已预编译它们。

When a template is compiled, it is converted into a function that, when called, will return real HTML wherein curly brace tags have been converted into values the browser understands.

当模板被编译时,它被转换成一个函数,当调用该函数时,将返回真正的 HTML,其中大括号标记已转换为浏览器可以理解的值。

For example, this...

例如,这...

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

...will be converted into the following (as of June 2014) after being precompiled:

...预编译后将转换为以下内容(截至 2014 年 6 月):

(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 takeaway here is that at some point, the handlebars template has to be converted into this function so that real HTML can be generated. The handlebars runtime script doesn't contain the compiler thus making it smaller. And by precompiling your templates, there will be one less heavy step the JavaScript has to go through before rendering the page.

这里重要的一点是,在某些时候,必须将把手模板转换为该函数,以便生成真正的 HTML。把手运行时脚本不包含编译器,因此使其更小。通过预编译您的模板,JavaScript 在呈现页面之前必须执行的步骤将减少。