2009-08-18 3 views
1

HTMLでインラインJavaScriptを生成すると、私はいつも汚い気分になりました。YUIをちょっと使った後、HTML要素を代わりに利用するのが最良だという感覚があります。 <ul>を使用して、インラインJavaScriptではなく<ul>が見つかったときにのみ動作する静的JavaScriptで使用されるキーと値を格納するのは難しいですか?動的に生成されたインラインJavaScriptを追加する代わりの方法

インラインJavaScriptの回避に関して、どのようなプラクティスが一般的であり、どのようなプラクティスが最もメリットがありますか?

+1

私は質問を理解していますか分かりません。キーと値をULに保存する理由なぜあなたのスクリプトファイルのJavaScriptデータ構造にないのですか? –

+0

カルーセルの画像やCMSのページのように、データが動的であるとします。 – camomileCase

答えて

3

可能な限り私がやっていることの1つは、後で私のJSコードで使用されるSCRIPTタグの中に何かJSONを(PHPから)出力することです。このようなもの:

私は、Flickrが検索のためにこのようなものを使用していると考えています。

+0

これは興味深いアプローチです。 – camomileCase

0

質問が分かりません。動的なJavaScript配列をサーバー側から追加してページに挿入しようとしていますか?

もしそうなら、いくつかのAjaxを使用してJSONを返す方が簡単でしょうか?

+0

これは確かに実行可能な解決策です。私は解決すべき特定の問題を持っていない私はちょうどいくつかの新しいアイデアを聞くことに興味があります。この戦略の欠点は余分な要求だと思います。 – camomileCase

0

.html(または何でも)ファイルを動的に生成するのと同じように、.jsファイルを動的に生成することもできます。

+1

これらの.jsファイルは、CDNまたはキャッシングを利用して配信することができず、別のファイルに移動する目的を無効にします。 –

+0

これは、インラインのスクリプトブロックを使用してHTMLを汚染する(受け入れられた回答が示唆しているように)よりやや清潔です。 – Domenic

1

動的に生成されるJavaScriptの性質によっては、インラインに配置する必要はありません。いくつかのパラメータを取り、JavaScriptコードを生成するPHPファイルを作成して、ヘッダー内のscriptタグ(<script src="foo.js.php?a=b&c=d&x=y&foo=bar">など)を使用してPHPファイルを必要なパラメータで呼び出すだけです。そういうわけで私は動的なJavaScript生成のニーズに対応しています。

0

JavaScriptを文書に挿入するのは妥当で、特にページで動的に変化するデータを挿入する場合は特にそうです。インラインスクリプトを置くのではなく、HTMLタグにそのデータを格納する利点はないと思います。

あなたがすべきことは、別のJavaScriptファイルに移動できるコードをファクタリングすることによって必要とされるインラインスクリプトの量を最小限に抑えることです。

0

サーバー側のアプリケーションからJavaScriptにデータを取得する必要がある場合は、Ajaxを使用するのがベストだとわかりました。

確かに、それをHTML要素に入れることはできますが、これは気が利いたものであり、HTMLの意味が間違っています。また、Lynxを使っている人はあなたのページの一部としてそれを見るでしょう。

JavaScript自体を動的に生成することもできますが、それによって防御しなければならない問題が他にもたくさんあります。

+0

場合によってはこれが有効ですが(たとえば、元の投稿のようなCMSのページなど)、多くの場合、過剰なものです。 JSに現在のユーザ名を知らせる。 Ajaxは理にかなっていますが、「サーバー側だけが知っているデータ」のために、私はむしろJavaScriptに書き出したいと考えています。 – Domenic

2

要素に属性を追加してから、非静的または静的なJSを探してそれらを検索できます。

<div id="..." extraAttribute="whatever"> 
</div> 

JQueryを使用すると、これは簡単に見つかります。

var extraDivs = $('div[extraAttribute]'); 

(この種のコーディングにはJQueryを強くお勧めします。)

+0

属性を 'data-'で始めると、それは有効なHTML5です!ローカリゼーションのためにこれを常に使用しています。 '

"> ...
'となります。 – Domenic

関連する問題