handlebar.js和handlebar.runtime.js有什么区别？ [英] What is the difference between handlebar.js and handlebar.runtime.js?

问题描述

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

I found that handlebar.runtime.js has no compile method. So I downloaded not the right version to just use the template engine.

但是 handlebar.runtime.js 是为了什么？

在下载页面上下载：runtime-1.0.0 会更不明显？

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

推荐答案

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

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.

为了加快速度，您可以预编译模板。更多信息，请访问车把网站。如果执行此操作，则只需在页面上包含把手运行时脚本。它比完整的手柄脚本小，因为它不需要担心编译模板。它假设你已经预编译了它们。

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.

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

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.

例如，这......

For example, this...

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

...在预编译后将转换为以下内容（截至2014年6月）：

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

(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});
})();

这里重要的一点是，在某些时候，车把模板必须转换成这个功能所以可以生成真正的HTML。把手运行时脚本不包含编译器，因此使其更小。通过预编译模板，JavaScript在呈现页面之前必须经历一个不那么沉重的步骤。

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.

这篇关于handlebar.js和handlebar.runtime.js有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！