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

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

但是， handlebar.runtime.js是什么？

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

Answer 1

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

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

当一个模板被编译时，它被转换成一个函数，当被调用时，它将返回真正的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}); })(); 

这里重要的是，在某些时候，把手模板必须被转换成这个function，以便能够生成真正的HTML。 handlebars运行时脚本不包含编译器，从而使其更小。 通过预编译模板，在呈现页面之前JavaScript将经历一个较less的步骤。