web-dev-qa-db-ja.com

JavaScriptでHTMLを生成するためのベストプラクティスはありますか

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

各オブジェクトに対して次のHTMLを生成する場合：

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

これにベストプラクティスはありますか？いくつかの方法があります。

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

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

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

JQueryテンプレートプラグイン の例を次に示します。これにより、パフォーマンスの低下を防ぐことができます。

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

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

クールなルート（およびパフォーマンスの向上、メンテナンス性の向上）に進み、テンプレートを使用すると言います。

64
Jim Fiorato

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

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では非常に高速でした。

13
some

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

プロトタイプ でそれぞれの例を示します。

// 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
8
savetheclocktower

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

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

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

追加の利点も得られます-サーバー側などの他の場所で同じテンプレートを再利用できます。

より複雑なテンプレート（ifステートメント、ループなど）が必要な場合は、 Handlebars を使用できます。これには、より多くの機能があり、Mustacheと互換性があります。

7
Tzach

次に、jQueryのmySimple Templatesプラグインを使用した例を示します。

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);
6
Andrew Hedges

テンプレートHTMLを非表示のdivのページに追加してから、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*/})
4
Leo

開示：私は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へのデータの挿入をサポートしていません。これはトドリストに載っています。今のところ、通常の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を実行して取得できます。

3
Automatico

これにベストプラクティスはありますか？いくつかの方法があります。

  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フレームワークまたはテンプレートエンジンを採用します。

私の経験に基づく私の意見...

2
Paolo