В чем разница между handlebar.js и handlebar.runtime.js?

Я обнаружил, что handlebar.runtime.js не имеет метода compile. Поэтому я загрузил не правильную версию, чтобы просто использовать механизм шаблонов.

Но для чего нужен handlebar.runtime.js?

Было бы лучше, что Download: runtime-1.0.0 будет более незаметным на странице загрузки?

ОТВЕТЫ

Ответ 1

Handlebars использует теги, которые выглядят как {{this}}, которые не могут быть понятны браузеру. Чтобы браузер отображал эти теги, они должны быть скомпилированы. Компиляция может произойти либо до, либо после загрузки страницы.

Чтобы ускорить работу, вы можете предварительно скомпилировать свои шаблоны. Дополнительная информация на узле руля. Если вы это сделаете, вам нужно будет включить только ручную рабочую среду script на вашей странице. Он меньше, чем полный дескриптор script, потому что ему не нужно беспокоиться о компиляции шаблонов. Предполагается, что вы предварительно скомпилировали их.

Когда шаблон скомпилирован, он преобразуется в функцию, которая при вызове возвращает реальный HTML, в котором фигурные фигурные скобки были преобразованы в значения, которые браузер понимает.

Например, это...

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

... будет преобразован в следующее (по состоянию на июнь 2014 года) после предварительной компиляции:

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

Важным выводом здесь является то, что в какой-то момент шаблон handlebars должен быть преобразован в эту функцию, чтобы можно было создать реальный HTML. В runtime runtime script не содержится компилятор, что делает его меньше. И, предварительно скомпилировав ваши шаблоны, будет один менее тяжелый шаг, который должен пройти JavaScript, прежде чем отображать страницу.