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

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

本文关键字：handlebar js 什么 区别 runtime      更新时间：2023-09-26

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

但是handlebar.runtime.js是干什么用的呢？

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

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

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

编译模板时，它被转换为一个函数，该函数在调用时将返回真正的 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 在呈现页面之前必须经历的繁重步骤将减少一个。

相关文章：