28

特に Ajax ベースのアプリケーションで、その場で HTML を生成する最善の方法について人々が強い意見を持っているかどうかについて、私は疑問に思っていました。

サーバー側のスクリプトを使用して HTML コードを作成し、それをページに送信するだけですか、それとも単に JSON 文字列を返して Javascript に任せますか。

私の個人的な意見では、最初の方法はプレゼンテーション層をロジックに結び付けすぎて、変更が難しくなり、維持するのが困難になります。2 番目の方法は、私の好みの方法ですが、プロジェクトの複雑さが増すと維持するのも悪夢になります。

Javascript テンプレート システムを別のレイヤーとして使用することを考えていました。これは、コードをより堅牢にし、柔軟性を低くするためです。軽量で本当に優れた JS テンプレート システムのアイデアを持っている人はいますか?

4

5 に答える 5

16

http://ejohn.org/blog/javascript-micro-templating/は、これに対する非常に優れたハックです。最終結果は非常にきれいです。

于 2010-01-22T00:30:50.940 に答える
10

私も、クライアント側の HTML 作成ロジックを使用した JSON 応答を好みます。

残念ながら、実際のクライアント側の HTML 書き込みスクリプトのほとんどは破損しており、クロスサイト スクリプティングのセキュリティ ホールになりやすい HTML インジェクションの欠陥が多数含まれています。敵対的なユーザーと直接話すのではなく、自分のサーバーと話しているので、どういうわけか「安全」であり、文字列を HTML に補間するときに正しく文字列がなくても逃げることができるという信念があると思います。これはもちろんナンセンスです。

私はいつも次のようなものを見ます：

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

また：

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

または実際には、デフォルトで行われる HTML エスケープがない Resig のマイクロテンプレート ハックです。さあ、みんな！サーバー側の XSS を提供する壊れた PHP スクリプトのレガシーのクリーンアップを開始したばかりですが、クライアント側の XSS エクスプロイトのまったく新しい大規模な範囲を導入したいとお考えですか?

はぁ。それがルアーオブストリングスです。私たちはそれらを理解していると思います。しかし、文字列は危険であり、コンテキストが隠され、要件を回避します。クライアント側で HTML を生成する必要がある場合は、次のような関数が必要になります。

function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;

でも個人的にはDOMメソッドの方が好きです。SQL のパラメータ化と同様に、DOM メソッドを使用すると、生の文字列をコンポーネントに直接伝えることで、式から文字列のスリングを取り除くことができます。OK、DOM の問題は、かなり冗長なことです。

var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

しかし、ヘルパー関数をいつでも定義して、それを削減できます。例:

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(jQuery 1.4 の新しい要素の作成は、同様のスタイルを使用します。)

于 2010-01-22T00:55:26.357 に答える
3

+1年前、新しいWebアプリを開始し、ブラウザーでJSONデータからHTMLをレンダリングする方法が必要でした。
XML/XSLT変換と同じくらい高速にしたかったのです。

それに対する私たちの答えは、JSテンプレートエンジンPUREでした。

ほとんどのJSテンプレートライブラリとは異なり、HTMLはそのままで（奇妙なタグはまったくありません）、いくつかの表記法を除いて、新しい言語を学習することはなく、JSとHTMLのみを使用します。

私の使い方：

  • ページに直接静的HTMLを作成します
  • 次に、JSロジックを段階的に追加すると、HTMLが徐々に有効になります。
  • 慣れれば、HTMLとJSの両方で安全な個別の開発ライフを実現でき、デザイナーとJS開発者の仕事に分割できます。
于 2010-01-22T01:59:32.627 に答える
1

多くのデータがサーバーから JSON として渡され、クライアント側の JavaScript テンプレート エンジンを介して処理されるシステムがありました。.Net 4.0 (おそらく 3.5 sp1 でさえ、よくわかりません) では、これはClient Templatesを使用して実行できます。

HTMLを送信するよりもJSONを渡すことをお勧めします。データとビューを別々に保つことは常に良いことです。

于 2010-01-22T00:35:19.793 に答える
0

MVC フレームワークを維持したい場合は、テンプレート フレームワークにテンプレート化を行わせる必要があります。AJAX はサーバー リクエストのみを実行する必要があります。サーバー リクエストはすべての DB とビジネス ロジックを実行し、ロードする必要があるテンプレートに URL を返します。

于 2010-01-22T00:31:11.297 に答える