111

JSON でオブジェクトの配列を返す Web サービスを呼び出しています。これらのオブジェクトを取得して、div に HTML を設定したいと考えています。各オブジェクトに URL と名前が含まれているとします。

オブジェクトごとに次の HTML を生成したい場合:

<div><img src="the url" />the name</div>

これに対するベストプラクティスはありますか? 私はそれを行ういくつかの方法を見ることができます：

  1. 文字列を連結する
  2. 要素を作成する
  3. テンプレートプラグインを使用する
  4. サーバー上で html を生成し、JSON 経由で提供します。
4

8 に答える 8

69

オプション 1 と 2 は最も直接的なオプションですが、どちらのオプションでも、文字列を作成するか DOM オブジェクトを作成することで、パフォーマンスとメンテナンスの影響を感じることができます。

テンプレート化はそれほど未熟ではなく、主要な Javascript フレームワークのほとんどでポップアップ表示されています。

JQuery Template Pluginの例を次に示します。これにより、パフォーマンスの低下を抑えることができ、非常に簡単です。

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

私はクールな道を進み（そしてパフォーマンスが向上し、保守しやすく）、テンプレートを使用すると言います。

于 2008-10-21T03:01:27.723 に答える
14

通常の代わりに、絶対に文字列を連結する必要がある場合:

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

一時配列を使用します。

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

特に IE では、配列を使用する方がはるかに高速です。少し前に、IE7、Opera、および FF で文字列のテストを行いました。Opera はテストを実行するのに 0.4 秒しかかかりませんでしたが、IE7 は 20 分経っても終了しませんでした !!!! (いいえ、冗談ではありません。) 配列を使用した場合、IE は非常に高速でした。

于 2008-11-20T09:43:43.603 に答える
9

最初の 2 つのオプションのいずれかが一般的であり、受け入れられます。

Prototypeでそれぞれの例を示します。

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

アプローチ #1:

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

アプローチ #2:

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom
于 2008-10-21T02:56:01.947 に答える
7

おそらく、より現代的なアプローチは、JavaScript を含む多くの言語で実装されているMustacheなどのテンプレート言語を使用することです。例えば：

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

サーバー側など、他の場所で同じテンプレートを再利用できるという追加の利点もあります。

より複雑なテンプレート (if ステートメント、ループなど) が必要な場合は、より多くの機能を持ち、Mustache と互換性のあるハンドルバーを使用できます。

于 2014-05-15T06:25:30.963 に答える
7

以下は、jQuery 用のSimple Templatesプラグインを使用した例です。

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);
于 2008-10-21T03:32:35.693 に答える
4

開示: 私は BOB のメンテナーです。

このプロセスをはるかに簡単にするBOBと呼ばれる JavaScript ライブラリがあります。

あなたの特定の例について：

<div><img src="the url" />the name</div>

これは、次のコードによって BOB で生成できます。

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

または短い構文で

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

このライブラリは非常に強力で、データ挿入 (d3 と同様) を使用して非常に複雑な構造を作成するために使用できます。

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

BOB は現在、DOM へのデータの挿入をサポートしていません。これは todolist にあります。今のところ、出力を通常の JS または jQuery と一緒に使用して、好きな場所に置くことができます。

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

このライブラリを作成したのは、jquery や d3 などの代替手段に満足できなかったからです。コードが非常に複雑で読みにくい。私の意見では、BOB と一緒に仕事をするのは明らかに偏っていますが、ずっと楽しいものです。

BOB はBowerで利用できるので、 を実行して取得できますbower install BOB。

于 2015-04-03T14:43:00.063 に答える
4

非表示の div 内のページにテンプレート HTML を追加してから、cloneNode とお気に入りのライブラリのクエリ機能を使用して入力することができます。

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})
于 2008-10-21T22:32:57.560 に答える
2

これに対するベストプラクティスはありますか? 私はそれを行ういくつかの方法を見ることができます：

  1. 文字列を連結する
  2. 要素を作成する
  3. テンプレートプラグインを使用する
  4. サーバー上で html を生成し、JSON 経由で提供します。

1)これはオプションです。クライアント側で JavaScript を使用して html を構築し、それを DOM 全体に挿入します。

このアプローチの背後にはパラダイムがあることに注意してください。サーバーはデータのみを出力し、(相互作用の場合) AJAX 要求で非同期的にクライアントからデータを受信します。クライアント側のコードは、スタンドアロンの JavaScript Web アプリケーションとして動作します。

Web アプリケーションは、サーバーが稼働していなくても動作し、インターフェースをレンダリングすることができます (もちろん、データを表示したり、何らかの対話を提供したりすることはありません)。

このパラダイムは最近頻繁に採用されており、フレームワーク全体がこのアプローチに基づいて構築されています (たとえば、backbone.js を参照)。

2)パフォーマンス上の理由から、可能な場合は、html を文字列で構築し、それを全体としてページに挿入することをお勧めします。

3)これは、Web アプリケーション フレームワークの採用と同様に、別のオプションです。他のユーザーは、利用可能なさまざまなテンプレート エンジンを投稿しています。それらを評価し、この道を進むかどうかを判断するスキルを持っている印象があります。

4)別のオプション。ただし、プレーンテキスト/html として提供します。なぜJSON？PHP（サーバー言語）とHtmlが混在しているため、このアプローチは好きではありません。しかし、オプション1と4の間の妥当な妥協点として、私はしばしばそれを採用します。

私の答え：あなたはすでに正しい方向を見ています。

私のように、 1から4の間のアプローチを採用することをお勧めします。それ以外の場合は、Web フレームワークまたはテンプレート エンジンを採用します。

あくまで私の経験に基づいた私見ですが…

于 2014-05-15T07:02:55.030 に答える