44

私はJavaで作業することに慣れています.Javaでは、（私たちが知っているように）各オブジェクトが独自のファイルで定義されています（一般的に言えば）。私はこれが好き。コードの操作と管理が容易になると思います。

私は JavaScript を使い始めており、1 つのページで使用しているさまざまなスクリプトに個別のファイルを使用したいと思っています。現在、.js ファイルを 2 つだけに制限しています。これ以上使用すると、現在予見できない何かによって将来不便になるのではないかと心配しているからです。もしかして循環参照？

要するに、スクリプトを複数のファイルに分割するのは悪い習慣ですか?

4

5 に答える 5

26

ここでは、アプリケーションのサイズと配信先（つまり、対象のデバイスなど）、およびサーバー側で実行できる作業量に応じて、正解がたくさんあります。あなたは正しいデバイスをターゲットにしています（これは、ほとんどの非企業の人間にとって100％実行可能からはまだ遠いです）。

アプリケーションを構築するとき、「クラス」は独自のファイルに存在できます。
アプリケーションをファイル間で分割する場合、または（他のクラスのインスタンス化のように）想定しすぎるコンストラクターを持つクラスを処理する場合、循環参照または行き止まりの参照が大きな懸念事項になります。
これに対処するためのパターンは複数ありますが、もちろん、循環参照が発生しないように、DI/IoCを念頭に置いてアプリを作成するのが最善の方法です。
また、require.jsまたはその他の依存関係ローダーを調べることもできます。取得する必要のある複雑さは、アプリケーションの大きさ、およびすべてをプライベートにする必要があるかどうかの関数です。

アプリケーションを提供する場合、JSを提供するためのベースラインは、必要なすべてのスクリプトを連結し（他のものが存在することを前提とするものをインスタンス化する場合は、正しい順序で）、それらを1つのファイルとして下部に提供することです。ページ。

しかし、それがベースラインです。
他の方法には、「遅延/遅延」ロードが含まれる場合があります。
ページを前もって機能させるために必要なものをすべてロードします。
一方、ページの読み込み時に機能の100％を必要としないアプレットまたはウィジェットがあり、実際には、ユーザーの操作が必要な場合、または何かを行う前に時間遅延が必要な場合は、それらのスクリプトを読み込みます。遅延イベントをウィジェット化します。ユーザーがタブをマウスダウンした時点で、タブ付きウィジェットのスクリプトをロードします。これで、必要なスクリプトだけを、必要なときにだけロードしました。ダウンロードのわずかな遅れに誰も気付かないでしょう。

これを、40,000行のアプリケーションを1つのファイルに詰め込もうとしている人々と比較してください。
HTTPリクエストは1つ、ダウンロードは1つだけですが、解析/コンパイル時間は1秒未満になります。

もちろん、遅延読み込みは、すべてのクラスを独自のファイルに残すための言い訳にはなりません。
その時点で、それらをモジュールにまとめて、ウィジェット/アプレット/その他すべてを実行するファイルを提供する必要があります（他の論理的な場所があり、後で機能が必要でなく、それがさらなる相互作用の背後に隠されている場合を除く） ）。

これらのモジュールのロードをタイマーに置くこともできます。
ベースラインアプリケーションを事前に（ページの下部にある1つのファイルに）ロードしてから、タイムアウトを0.5秒程度に設定し、他のJSファイルをロードします。
これで、ページの操作やユーザーの移動の邪魔になりません。もちろん、これは最も重要な部分です。

于 2013-03-13T23:11:35.280 に答える
26

2020 年からの更新: この回答はインターネット標準からすると非常に古く、今日の全体像には程遠いですが、まだ時折投票が見られるため、投稿後に何が変更されたかについていくつかのヒントを提供する必要があると感じています. スクリプト読み込みの優れたサポートasync、HTTP/2 のサーバー プッシュ機能、および長年にわたる読み込みプロセスに対する一般的なブラウザの最適化はすべて、Javascript を複数のファイルに分割することによる読み込みパフォーマンスへの影響に影響を与えてきました。

Javascript を始めたばかりの人への私のアドバイスは同じままです (バンドラー/ミニファイアーを使用し、デフォルトで正しいことを行うと信頼してください)。asyncローディングとサーバープッシュによってもたらされる新機能。

2013年っぽいからの元の答え：

ダウンロードに時間がかかるため、常にスクリプトを 1 つの大きなファイルにするようにしてください。ただし、ミニファイヤを使用する場合 (使用する必要があります)、複数のソース ファイルを 1 つにまとめることができます。したがって、複数のファイルで作業を続けてから、配布用にそれらを 1 つのファイルに縮小できます。

これに対する主な例外は、jQuery などのパブリック ライブラリです。これは常にパブリック CDN からロードする必要があります (ユーザーが既にそれらをロードしている可能性が高いため、再度ロードする必要はありません)。パブリック CDN を使用する場合は、失敗した場合に独自のサーバーからロードするためのフォールバックを常に用意してください。

コメントにあるように、実話はもう少し複雑です。

<script src="blah"></script>スクリプトは、同期 ( ) または非同期 ( )でロードできますs=document.createElement('script');s.async=true;...。同期スクリプトは、ロードされるまで他のリソースのロードをブロックします。たとえば、次のようになります。

<script src="a.js"></script>
<script src="b.js"></script>

a.js をリクエストし、それがロードされるのを待ってから、b.js をロードします。この場合、a.js と b.js を組み合わせて、一気にロードする方が明らかに優れています。

同様に、a.js に b.js をロードするコードがある場合、それらが非同期であるかどうかに関係なく、同じ状況になります。

しかし、それらを一度に非同期にロードし、クライアントのサーバーへの接続の状態と、プロファイリングによってのみ真に判断できるさまざまな考慮事項に応じて、より高速にロードできます。

(function(d){
    var s=d.getElementsByTagName('script')[0],f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='a.js';
    s.parentNode.insertBefore(f,s);
    f=d.createElement('script');
    f.type='text/javascript';
    f.async=true;
    f.src='b.js';
    s.parentNode.insertBefore(f,s);
})(document)

これははるかに複雑ですが、a.js と b.js の両方を、お互いをブロックしたり、その他のものをブロックしたりせずにロードします。最終的にはasync属性が適切にサポートされるようになり、同期的にロードするのと同じくらい簡単にこれを行うことができます。最終的。

于 2013-03-13T22:55:22.100 に答える
4

ここには 2 つの懸念事項があります: a) 開発の容易さ b) JS アセットのダウンロード中のクライアント側のパフォーマンス

開発に関する限り、モジュール性は決して悪いことではありません。モジュールとその依存関係を管理するために使用できるJavascript 自動ロード フレームワーク ( requireJSやAMDなど) もあります。

ただし、2 番目の点に対処するには、すべての Javascript を 1 つのファイルに結合して縮小し、クライアントがすべてのリソースをダウンロードするのに時間をかけすぎないようにすることをお勧めします。これを行うためのツール (requireJS) もあります (つまり、すべての依存関係を 1 つのファイルに結合します)。

于 2013-03-13T22:55:10.240 に答える
-4

それは本当に問題ではありません。複数のファイルで同じ JavaScript を使用する場合、取得元の JavaScript を含むファイルを用意しておくとよいでしょう。したがって、スクリプトを 1 か所から更新するだけで済みます。

于 2013-03-13T22:56:39.643 に答える