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

https://stackoverflow.com/questions/220603

03-07-2019
|

質問

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

各オブジェクトに対して次の HTML を生成したいとします。

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

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

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

解決

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

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

JQueryテンプレートプラグインの例は、パフォーマンスの低下を防ぎます。本当に、本当に簡単です：

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

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

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

他のヒント

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

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を使用すると、非常に高速でした。

最初の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

シンプルなテンプレートを使用した例を次に示します jQueryのプラグイン：

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

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

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

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

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

より複雑なテンプレート（ifステートメント、ループなど）が必要な場合は、ハンドルバーを使用できます。機能、およびMustacheと互換性があります。

非表示の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*/})

開示：私は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 install BOB.

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


文字列を連結する

要素の作成

テンプレートプラグインを使用する

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

経験に基づいて意見を述べてください...

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

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

このプロセスをはるかに簡単にする JavaScript ライブラリがあります。 ボブ.

このプロセスをはるかに簡単にする JavaScript ライブラリがあります。ボブ.