プロジェクトでのJavaScriptの良好な構造化？

Question

だから、私は今私のウェブサイトでJSをかなり終わらせています。 jQuery（およびそのように.ready init）が含まれます。ページには2つの部分があり、アッパーは主にGoogleマップ、下は入力フォームです。

これらはすべて現在あります 1 .js、関数、イニット、反復、すべて。それは十分に構造であり、それはすべて、すべてが適切に行われています。

しかし、私の質問は次のとおりです。良い構造は何ですか？上半分を1つのファイルに、次のファイルを別のファイルに配置する必要がありますか？または、必要なすべての初期化を.ready（）の下に配置し、すべての機能を別のファイルに配置する必要がありますか？または、すべてを成長し続けるファイルに保管する必要がありますか？

Answer 1

パフォーマンスの観点から、他の回答で提案されているように、すべてのJSを単一のファイルで提供することは賢明です。ただし、コードをそのように構築することはそうではありません。各「クラス」は別のファイルにあり、エンティティとコントロールファイルに分割して、実際のページ呼び出しを処理するために、他の言語と同じです。これらは、事前に、または動的に供給するために1つのファイルに結合することができます - できれば最小化されます。

Answer 2

スクリプト呼び出しを最小限に抑えると、処理時間が改善されます。各スクリプトには、時間を追加する往復が含まれます。だから - ページの読み込み時間を気にしない限り、個人的な好み。

Yahoo's あなたのウェブサイトをスピードアップするためのベストプラクティス から始めます HTTPリクエストを最小化します:

エンドユーザーの応答時間の80％は、フロントエンドに費やされています。この時間のほとんどは、画像、スタイルシート、スクリプト、フラッシュなど、ページ内のすべてのコンポーネントをダウンロードする際に縛られています。コンポーネントの数を減らすと、ページのレンダリングに必要なHTTP要求の数が減少します。これは、より高速なページの鍵です。

ページ内のコンポーネントの数を減らす1つの方法は、ページの設計を簡素化することです。しかし、コンテンツが豊富なページを構築しながら、応答時間を速く達成する方法はありますか？ HTTPリクエストの数を減らすためのいくつかの手法を以下に示しますが、リッチなページデザインをサポートしています。

結合されたファイルは、すべてのスクリプトを単一のスクリプトに組み合わせ、同様にすべてのCSSを単一のスタイルシートに結合することにより、HTTP要求の数を減らす方法です。ファイルを組み合わせると、スクリプトとスタイルシートがページごとに異なる場合は、より挑戦的ですが、リリースプロセスのこの部分を作成すると応答時間が改善されます。

Answer 3

個人的には、すべてのコードを単一のファイルに保持することを好むため、ブラウザは2つ/3/4/何でも1つのファイルのみを取得する必要があります。

しかし、私はそれが個人的な好みに応じていると思います。