私はJavaScriptが初めてです。
関数を外部スクリプトに分割するにはどうすればよいですか? グッドプラクティスとは何ですか？.jsすべての関数を 1 つの外部ファイルに詰め込む必要がありますか、それとも同様の関数をグループ化する必要がありますか?
ファイルが増えるということは、スクリプトを取得するための HTTP リクエストが増えることを意味し、パフォーマンスが低下する可能性があると思いますか? ただし、より多くのファイルが物事を整理します。たとえば、onload.jsロード時に物事を初期化data.jsし、サーバーからデータを取得し、ui.jsUI ハンドラーを参照します...
これに関するプロのアドバイスは何ですか？
ありがとう！
製品をリリースするときは、通常、ページをロードするためのHTTPリクエストをできるだけ少なくする必要があります（したがって、たとえば、画像スプライト）
したがって、リリース用に.jsを連結することをお勧めしますが、開発中は、それらを適切に機能するように分離してください。
"use strict"スクリプトを連結すると、エラーが発生する可能性があることに注意してください。
（js strictモードの詳細はこちら）
それは、スクリプトのサイズ、数、およびいつでも使用するスクリプトの数によって異なります。
多くのパフォーマンス グッド プラクティスは、JavaScript が十分に小さい場合はインライン化するのが良いと主張しています (これには適切な論理があります)。これにより、HTTP リクエストの数が減りますが、ブラウザが JavaScript をキャッシュできなくなるため、十分に注意する必要があります。そのため、いくつかの特殊なケースでは (base64 エンコーディングを使用して) 画像をインライン化する方法もあります (たとえば、Bing.com を見てください。すべての JavaScript がインライン化されています)。
大量の JavaScript ファイルがあり、いつでもそれらのほんの一部を (カウントとしてだけでなくサイズとして) 使用している場合は、それらを非同期で読み込むことができます (たとえば、require.js を使用)。ただし、最初に考慮していなければ、アプリケーション設計に多くの変更が必要になります (また、アプリケーションの複雑さも大きくなります)。
CSS/JavaScript を localStorage にキャッシュする方法もあります。詳細については、Web Performance Daybookを参照してください。
では、簡単な振り返りのようなものを作りましょう。JavaScript をインラインにすると、ページの最初の読み込みが減ります。インライン JavaScript はブラウザーによってキャッシュされないため、外部ファイルを使用した場合よりもページの次回の読み込みが遅くなります。
別の外部ファイルを使用している場合は、実際には不要に読み込まれているファイルに対して冗長な HTTP 要求が発生する可能性があるため、それらのすべてまたは少なくとも大部分を使用していることを確認してください。これにより、コードの構成が改善されますが、おそらく読み込み時間が長くなります (それでも役立つブラウザー キャッシュを忘れないでください)。
すべてを 1 つのファイルに入れると、HTTP 要求は減りますが、ファイルが完全に読み込まれるまで (JS ファイルの同期読み込みを使用している場合) ページの読み込みをブロックする 1 つの大きなファイルができてしまいます。このような場合は、この大きなファイルを本文の最後に配置することをお勧めします。
パフォーマンスの追跡には、YSlow などのツールを使用できます。
グッド プラクティスについて考えるとき、MVC パターンを思い浮かべます。これが開発の進むべき道であるかどうかについて議論する人もいるかもしれませんが、多くの人は達成したいことを構造化するためにそれを使用しています。通常、プロジェクトが小さすぎる場合、MVC を使用することはまったくお勧めできません。たとえば、for ループを含む単純な C プログラムが必要な場合に完全な C++ Windows アプリを作成するのと同じです。
いずれにせよ、javascript の MVC または MV* は、すべてのアクションがコントローラーの一部であり、オブジェクト プロパティがモデルに格納される程度までコードを構造化するのに役立ちます。ビューは表示のみを目的としており、特別なリクエストまたはレンダリング エンジンを介してユーザーにレンダリングされます。私が MV* を使い始めたとき、私は BackboneJS と、 Addy Osmaniのガイド「Developing BackboneJS Applications」に注目しました。もちろん、コードの構造化に使用できるフレームワークは他にも多数あります。これらはTodoMVC ウェブサイトで見つけることができます。
また、アプリから独自の構造を導き出し、そのディレクトリ構造を開発に使用することもできます (ただし、MV* フレームワークは使用しません)。
このような構造を使用するとファイルが増え、HTTP リクエストが増えるというあなたの懸念には同意しません。もちろん、これは開発中に当てはまりますが、ユーザーはパフォーマンスが強化された (つまり、コンパイルされた) 縮小されたバージョンをスクリプトとして取得する必要があることを覚えておいてください。したがって、このように組織化された方法で開発している場合でも、Google のクロージャ コンパイラを使用してスクリプトを縮小/醜くし、コンパイルする方が理にかなっています。