web-dev-qa-db-fra.com

Quelle est la différence entre handlebar.js et handlebar.runtime.js?

Je l'ai trouvé handlebar.runtime.js n'a pas de méthode compile. Je n'ai donc pas téléchargé la bonne version pour simplement utiliser le moteur de modèle.

Mais quel est le handlebar.runtime.js est pour?

Il serait plus agréable que Download: runtime-1.0.0 serait plus imperceptible sur la page de téléchargement?

javascripttemplateshandlebars.js
51
static

Le guidon utilise des balises qui ressemblent à {{this}} et qui ne peuvent pas être comprises nativement par le navigateur. Pour que le navigateur affiche ces balises, elles doivent être compilées. La compilation peut se produire avant ou après le chargement de la page.

Pour accélérer les choses, vous pouvez précompiler vos modèles. Plus d'infos sur le site du guidon . Si vous procédez ainsi, il vous suffit d'inclure le script d'exécution du guidon sur votre page. Il est plus petit que le script complet du guidon car il n'a pas besoin de se soucier de la compilation de modèles. Il suppose que vous les avez précompilés.

Lorsqu'un modèle est compilé, il est converti en une fonction qui, une fois appelée, renverra du vrai HTML dans lequel les balises d'accolade ont été converties en valeurs que le navigateur comprend.

Par exemple, cela ...

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

... sera converti en ce qui suit (à partir de juin 2014) après avoir été précompilé:

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

Le point important à retenir ici est qu'à un moment donné, le modèle de guidon doit être converti en cette fonction afin que le vrai HTML puisse être généré. Le script d'exécution du guidon ne contient pas le compilateur, ce qui le rend plus petit. Et en précompilant vos modèles, il y aura une étape de moins que le JavaScript doit franchir avant de rendre la page.

59
rescuecreative