4

読んだ後Mustache.jsとHandlebars.jsの違いは何ですか？私は質問に戸惑いました：

javascriptテンプレートのプリコンパイルとはどういう意味ですか？

以前は、単純なクライアント側のキャッシュを使用していました。これは次のように機能していました。

var tmpCache = {};
if (tmpIneed is in tmpCache){
  use it
} else {
  take it from DOM / upload from external file
  put save it in tmpCache
  use it
}

これは私のテクニックと根本的にどう違うのですか？

4

2 に答える 2

5

Handlebars.jsはテンプレート内で異なる式/レンダリングロジックを持つことができるため、これらの式は通常、実行時に処理されます。パフォーマンスを向上させ、依存関係を小さくするために、展開前にテンプレートをプリコンパイルできます。たとえば、次のような単純なハンドルバーテンプレートがあります。

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

そして、これがプリコンパイルされた出力です

(function() {
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['test.handlebar'] = template(function (Handlebars,depth0,helpers,partials,data) {
helpers = helpers || Handlebars.helpers;
var buffer = "", stack1, foundHelper, functionType="function",   escapeExpression=this.escapeExpression;


buffer += "<div class=\"entry\">\r\n  <h1>";
foundHelper = helpers.title;
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
else { stack1 = depth0.title; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
buffer += escapeExpression(stack1) + "</h1>\r\n <div class=\"body\">\r\n    ";
foundHelper = helpers.body;
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
else { stack1 = depth0.body; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
buffer += escapeExpression(stack1) + "\r\n  </div>\r\n</div>";
return buffer;});
})();

事前コンパイルの詳細については、こちらをご覧ください。

于 2012-11-12T10:15:00.390 に答える
1

簡単に言うと、テンプレートを評価/適用するには、最初にJavaScript関数に変換する必要があります。そのプロセスはコンパイルであり、生のテンプレートコードをダウンロードまたは保存することとは別です（つまり、<div....><h1>{{var}}</h1></div>事前に）。

于 2012-11-12T10:24:05.057 に答える