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

时间:2013-10-02 21:30:02

标签: javascript templates handlebars.js

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

handlebar.runtime.js是什么意思?

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

1 个答案:

答案 0 :(得分:59)

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

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

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

例如,这......

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

...将在预编译后转换为以下内容(截至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});
})();

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