web-dev-qa-db-ja.com

handlebar.jsとhandlebar.runtime.jsの違いは何ですか？

見つけた handlebar.runtime.jsにはcompileメソッドがありません。そのため、テンプレートエンジンを使用するだけの適切なバージョンをダウンロードしていません。

しかし、handlebar.runtime.jsは

Download: runtime-1.0.0は、ダウンロードページで目立たないでしょうか？

javascripttemplateshandlebars.js
50
static

Handlebarsは、ブラウザがネイティブに理解できない{{this}}のようなタグを使用します。ブラウザがこれらのタグをレンダリングするには、それらをコンパイルする必要があります。コンパイルは、ページをロードする前または後に実行できます。

速度を上げるために、テンプレートをプリコンパイルできます。詳細は handlebarsサイト で。これを行う場合、ページに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});
})();

ここで重要なことは、実際のHTMLを生成するには、ある時点でハンドルバーテンプレートをこの関数に変換する必要があるということです。 handlebarsランタイムスクリプトにはコンパイラが含まれていないため、サイズが小さくなります。また、テンプレートをプリコンパイルすることにより、ページをレンダリングする前にJavaScriptが実行する必要のあるステップが1つ少なくなります。

59
rescuecreative