2

サーバーの負荷を最適化するために単一の大きなファイルに統合したいいくつかの外部 JavaScript ファイルを含む非常に大きなプロジェクトがあります。

問題は、これらのスクリプトの多くが、そのページでのみ使用可能な要素を対象とする (document).read() イベントを所有していることです。

すべてを統合すると、多くの (異なる) (document).read() が 1 つのファイルに入れられ、それらのほとんどはページ上にない要素をターゲットにします。これは問題ですか?

これにアプローチする正しい方法は何ですか？

編集: 明確化: 独自のタグに含まれる何百もの JavaScript ファイルを 1 つのファイルに統合することを意味するので、縮小することができます。

4

4 に答える 4

3

各ページに異なる JavaScript ファイルが含まれていて、それらを統合したいようです。

それがあなたがやろうとしていることである場合、最も簡単な方法は、すべての JavaScript を単一のファイルに連結することです。同じファイルに複数の Ready コールを含めることは問題ありません。また、jQuery メソッドを使用して処理を行う限り、要素がページに存在しない場合でも jQuery はエラーになりません (たとえば、要素がそのページに存在しない場合はエラー$('.element').show()になり$('.element')[0].style.display = 'block';ます。

特定のページにのみ適用したいものがある場合は、それらをすべてまとめると予期しない結果が生じる可能性があります. これを処理する 1 つの方法は、特定のイベントを添付する前に、現在のページを確認することです。これを行うには、次のようなページ上の特定の要素をチェックします

// check if element is present and visible
if ($('.element').is(':visible')) {
    // now we are on this specific page so let's do everything 
    // specific to this page here
}

また

// checks for presence of element
if ($('.element').length) {
}

または、id やその他の手段を使用して区別することもできます。

これで、javascript の最後で1 つの$(document).ready(init);呼び出しを行うことができ、init 関数はそのページに対して何を初期化する必要があるかを決定できます。

お役に立てれば！

于 2013-01-09T04:21:46.893 に答える
3

質問 (一部の要素がページにない) についてはよくわかりませんが、jQuery は、ページに複数の$(function () {})(ドキュメント準備のショートカット) 呼び出しを持ち、それらを正しい時間に実行するように特別に設計されています。

于 2013-01-09T04:12:01.947 に答える
1

私は、jQuery でやり取りしたい要素が実際に存在するかどうかを確認するために、それらを使用する前にチェックインを追加する傾向があります。

そうは言っても、多くの標準的なjQueryのものは、操作対象の要素がそこにない場合、黙って失敗します。これは通常、望ましい動作です。ただし、失敗した場合にコンソールに警告を出力するプラグインがいくつかあります。最新のブラウザではこれは問題ではありませんが、デバッグ バーがインストールされていない IE では完全なエラーが発生し、明らかに望ましくありません。

于 2013-01-09T10:38:54.630 に答える
0

複数のブロックを用意する必要はありません。すべてのコードを1つのブロック(document).ready()内に収めることができるはずです。(document).ready()コードはセレクターに対応するアイテムのみを対象としているため、問題はありません。

ちなみに、同じID、クラス、またはその他の属性を持つ異なるページからの異なるオブジェクトがないことを確認する必要があります-単一のJSファイルがこれらのすべてのページに対応し、異なるページに複数の要素がある場合JSセレクターが一致する属性を持つ場合、望ましくない（プロジェクトが複雑すぎて識別が難しい場合）副作用が発生します。

于 2013-01-09T04:24:16.400 に答える