JavaScriptテンプレートエンジン

私たちの時代には、すでにそれらのかなりの数がありますよね？ たとえば、100分の1秒でHTMLを生成する必要がある場合、彼らは自分の作業にもうまく対処します。これは非常に高速であり、ユーザーはこの遅延を感じません。 そして、なぜ私たち全員が、mightとmainを使用してクライアント側のテンプレートを急いで使用しないのですか？ さて、例えば、いくつかのポイント：

-ページの生成（そのほとんど）はすでに高価になっています。

-混合テンプレート（javascriptとお気に入りのスクリプト言語の両方のテンプレート）を使用する場合、それらを複製するときに状況が発生します。



2番目の点についてお話したいと思います。その解決策は、最初の問題の解決策であるパフォーマンスに直接影響します。



テンプレートの複製が悪いという事実について、説明する必要はありませんか？ アイデア自体は新しいものではありませんが、実装の重要な性質のため、一般的ではありません（少なくとも、この方法については、サーバー言語のテンプレートエンジンほど多くはありません）。

そのため、javascriptとお気に入りのperl / php / python /の両方をキャッチできるテンプレートを作成しています。 すべては論理的です、私たちは皆これを理解しています、私たちは望んでいますが、既製のオプションは数十ドルではありません。おそらく自分で書く必要がありますが、今は少しの時間があり、それから何とか忘れられます。



プログラマーの仕事は、設計の90％が設計、試行テストの実行であり、10％の時間は誰も私たちに気づかず、気にしないまでコードを書くことです。 テンプレートエンジンに必要なものについて話しましょう。その後、自分で作成します。



簡単な例で、図全体を見てみましょう。





テンプレート：

< ul >

{%topics}

< li class ="{?#id == 1}first{|}other{/?}" > {#title} </ li >

{/%topics}

</ ul >



* This source code was highlighted with Source Code Highlighter .

JSONとしてのデータ：

[{title: '' ,id: 1},{title: '' ,id: 2},{title: '' ,id: 3},{title: '' ,id: 4},{title: '' ,id: 5}]



* This source code was highlighted with Source Code Highlighter .

結果のhtml

< ul >

< li class ="first" > </ li >

< li class ="other" > </ li >

< li class ="other" > </ li >

< li class ="other" > </ li >

< li class ="other" > </ li >

</ ul >



* This source code was highlighted with Source Code Highlighter .

テンプレートをテンプレートパーサーで処理した結果、出力はjsライブラリとスクリプト言語のモジュールになります。

私たちのお気に入りのスクリプト言語に対するコードのあり方に関する部分は省略します。ハッシュ配列にフィードする場合、すぐにhtmlを生成することに注意してください。



そして今、JavaScriptライブラリについて。 これに似たものを取得する場合（これはテンプレートエンジンの結果のコードであり、原則として、私たちにとっての読みやすさは、何が起こっていたかを思い出します）：

( function (){



zTpl = function (options) {

this .init(options);

return this ;

};



zTpl.prototype = {

init: function (options) {

this .opt = options

},

topics: function (data) {

var out = '<ul>' ;

for ( var i=0; i< data.length; i++) {

out += '<li class="' ;

if (data[i].id == 1) {

out += 'first' ;

} else {

out += 'other' ;

}

out += '">' +data[i].title+ '</li>' ;

}

out += '</ul>' ;

return out ;

}

};



})();



* This source code was highlighted with Source Code Highlighter .

これはすでにクライアント側で行われているため、これを行います。

var d = [{title: '' ,id: 1},{title: '' ,id: 2},{title: '' ,id: 3},{title: '' ,id: 4},{title: '' ,id: 5}];

var tpl = new zTpl();

var html = tpl.topics(d);



* This source code was highlighted with Source Code Highlighter .

そして、私たちは望んでいたものを手に入れました。

-テンプレートおよび入力JSONによるHTML生成。

-テンプレートはスクリプト言語とjavascriptの両方で使用されているため、重複はありません。

-テンプレートがネイティブコード（スクリプト言語とjavascript）に変わるという事実により、可能な限り最大の生成速度が得られます。



注：

-生成は、テンプレートの交互の変数と静的データ（本質的に行）の連結により発生します。

-上記のテンプレートとコードは、将来のテンプレートエンジンの可能性の氷山の一角です。 ここでは、可能な限り、サーバーテンプレートエンジンのすべての利点とオーバーフローがあります。たとえば、変数のマルチレベルネスト、再帰、キャッシングのようなものです。



紳士はこの開発についてどう思いますか？ この行動の都合は？