0

html を javascript に入れるか、html ファイルに入れる方がよいか疑問に思っています。

たとえば、私のjsファイルにこれを持たせる

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

VS

私のhtmlファイルは次のようになります

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

jsファイルには次のものがあります。

$('.test').show();

4

5 に答える 5

1

これは、単純なWebページの場合はおそらく問題ありませんが、Webアプリケーションの場合は、mustache.js（https://github.com/janl/mustache.js）やHandlebars.js（http://handlebarsjs.com/などのテンプレートシステムを実際に調べる必要があります。 ）。

このようにして、HTMLを外部テンプレートファイルに保持し、Javascriptオブジェクトと配列を使用してそれらをデータで埋めることができます。たとえば、口ひげのテンプレートは次のようになります。

<div id="{{id}}"></div>
<div class="{{class}}">
    <p>{{name}}</p>
    <span>{{prop1}}</span>
    <span>{{prop2}}</span>
</div>

そして、あなたはそれを埋めるためにこのように見えるオブジェクトを持っているでしょう：

var obj = {
    id: "myID",
    class: "some classes",
    name: "Martin Brennan",
    prop1: "whatever",
    prop2: 22
}

そして、次のようなオブジェクトでテンプレートを使用します（テンプレートを変数にロードした後）：

Mustache.render(template, obj)

Jeremy J Starcherが言ったように、これは非常に主観的なものであり、テンプレートシステムをプロジェクトで使用することの価値を確認できるかどうか試してみることをお勧めします。

于 2012-09-09T22:44:34.520 に答える
1

非常に主観的で、もちろん文脈に依存します。

Web ページでは、ほとんどのコンテンツが既に知られています。コンテンツを HTML に配置し、CSS (本当に必要な場合は Javascript) を使用してスタイルを設定しない理由はありません。

ただし、Web アプリケーションでは、物事はあまり知られていません。ドキュメントはより動的であり、JavaScript を使用して要素を追加/削除する必要があります。

ところで、あなたの 2 つのコードは 2 つの異なることを行います。最初の例ではclassoftestを指定し、2 番目の例ではIDofを指定しています#test1。これは無効IDであり、 である必要がありますtest1。そのselectorID#test1の は、混乱を引き起こしている可能性があります。

于 2012-09-09T21:35:08.027 に答える
0

2 番目のハードコーディングされた HTML メソッドを使用する最大の利点の 1 つは、JavaScript が無効になっているユーザーにも表示されることです。JS を有効にしていないユーザーの数を正確に確認することは困難ですが (ほとんどのトラッカーは JS を使用しているため..)、私が最後に聞いた推定では、インターネット ユーザーの約 5% でした。

教訓 - JavaScript を使わずにサイトを機能させましょう。次に、JavaScript を追加して見栄えを良くしたり、追加の (必須ではない) 機能を追加したりします。

于 2012-09-09T21:19:44.287 に答える
0

もちろん、2 番目のオプションの方がはるかに優れており、高速です。

使用する場合

$('<div>').addClass('test').append(
                        $('<p>').text('test1'),
                        $('<span>').text('test2'),
                        $('<span>').text('test3')
                      ).insertAfter( $('#test1') );

ブラウザは JavaScript を解析する必要があります。そして、使用するたびに、$()使用しない（役に立たない！）多くのプロパティとメソッドを持つオブジェクトを作成しています。もちろん、ブラウザも HTML を解析する必要があります。

しかし、あなたが使用する場合

<div id="#test1"></div>
<div class="test">
    <p>test1</p>
    <span>test2</span>
    <span>test3</span>
</div>

ブラウザは HTML を解析するだけでよく、はるかに高速です。

于 2012-09-09T21:14:57.127 に答える
0

簡単な答えは、静的コンテンツは通常のマークアップを使用して作成する必要があり、動的コンテンツには Javascript を使用する必要があるということです。

また、多くの場合、両方を使用できます。で静的な HTML マークアップを作成しstyle="display:none"、Javascript を使用してスタイルを変更し、必要に応じて表示または非表示にすることができます。

于 2012-09-09T22:35:55.430 に答える