4

これまでに、私のプロジェクトには、複数の Web ページで使用される関数はごくわずかしかない、大量の関数を含む JavaScript ファイルが 1 つしかありませんでした。関連するコードの量が増えると、ファイルが乱雑になり、あまりにも多くなることがわかります。長いです。次のように、Webページごとに個別のjavascriptファイルを作成することを考えています。

  1. ほとんど使用しないページであっても、1 つの巨大な JavaScript ファイルをロードする必要はありません。
  2. ファイルがさらに乱雑になることはありません

しかし、これが私が気付いていないマイナス面を持っているかどうかはわかりません.

4

4 に答える 4

2

ファイルが少なくなると、コードがきれいではなくなり、コーディングが遅くなり、デバッグが難しくなります。ファイルが増えると、HTTP リクエストが増え、Web サイトが遅くなります。そのため、コードを整理し、開発を管理しやすくするために、必要な数のファイルを開発してください。

于 2013-10-28T11:27:20.630 に答える
2

ここには多くのオプションがあり、ファイルを整理するという側面だけに焦点を当てています。作業しているものがかなり大きい場合は、require.jsのようなライブラリを使用することを検討する価値があります。 ただし、これはアプリケーション向けであり、他の目的にも簡単に使用できますが、アイデアは、コードをスタンドアロンのモジュールに再構築することです。これは、場合によっては賢明かもしれません。

ただし、私たちが話している JavaScript がページのコンテンツと密接に結びついており、他のページで再利用できない設定になっている場合<script>は、外部の JavaScript ファイルではなくインライン タグを使用する方が適切な場合があります。

最後に、require.js または複数の JavaScript を使用するセットアップでは、http リクエストに関してわずかなオーバーヘッドが発生しますが、それについてはあまり心配する必要はありません。Require.js または同様のライブラリは、この非同期をロードすることもできるため、全体として、特定の訪問者の大部分に使用されない可能性のある 1 つの巨大なファイルよりも、おそらく少し効率的です (訪問者がアクセスするかどうかによって異なります)。最終的にすべてのページにアクセスするかどうか）。

于 2013-10-28T11:31:14.883 に答える
1

複数のファイルを持つことは確かに物事を整理するのに役立ちますが、同時にブラウザがサーバーに複数のリクエストを行う必要があり、サイトの読み込み時間に影響を与える可能性があります.

これが、多くの人が最近RequireJSなどのツールを使用する理由です。

簡単に言えば、必要な数の小さなモジュールを (それぞれ別のファイルで) 定義できるようにし、それらを非同期的にロードします。

Grunt などのビルド ツールと組み合わせると、2 つのファイル (RequireJS ライブラリと JS ファイル、つまりmain.js)のみをロードする Web ページを作成できますmain.jsが、多くの小さなモジュールを連結した結果になります。

このようにして、リクエストの数を最小限に抑えると同時に、コードを整理して小さなモジュールに分割します コストは？追加のビルド ステップを導入します。ただし、このビルド手順は、 などのツールを使用してさらに自動化できますgrunt-contrib-watch。

main.js以下は、1 つのファイルを使用し、Google CDN から読み込まれる jQuery に依存するサイトのスニペットです。

まず、main.js : これは RequireJS モジュール (AMD モジュール) であり、次のようになります。

// Tell RequireJS that jQuery dependency should be loaded from the given URL.
// Without this, RequireJS would try to find jQuery.js file locally.
requirejs.config({
  paths: {
    'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
  },
  shim: {
    'jQuery': {'exports': 'jQuery'},
  }
});

// You define that the module below depends on jQuery and two custom modules.
define(['jQuery', 'module1', 'module2'], function ($, Module1, Module2) {
  // Here you can access $, Module1 and Module2
});

次に、Grunt のgrunt-contrib-requirejsプラグインを ( Gruntfile.js )のような構成で使用します。

requirejs: {
  compile: {
    options: {
      baseUrl: 'src/js',         // modules dir, which contains main.js, module1.js etc.
      out: 'static/js/main.js',  // output file
      name: 'main',
      paths: {
        'jQuery': 'http://lorem.ipsum1'  // jQuery will be loaded separately from CDN
      },
      optimize: 'uglify2'        // minify output file
    }
  }
}

最後に、RequireJS スクリプトをロードし、main.jsファイルをサイトのエントリ ポイント ( index.html )として使用するように指示します。

<script src="js/require.min.js" data-main="js/main.js"></script>
于 2013-10-28T11:27:29.653 に答える