30

中規模から大規模の JavaScript アプリケーションを管理するための標準的な方法は何ですか? 私の懸念は、ブラウザのダウンロード速度と、開発の容易さと保守性の両方です。

私たちの JavaScript コードは、大まかに次のように「名前空間化」されています。

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

現時点では、Web アプリケーションのすべてのビジネス ロジックを処理するための 1 つの (アンパックされ、ストリップされていない、非常に読みやすい) JavaScript ファイルがあります。さらに、jQuery といくつかの jQuery 拡張機能があります。私たちが直面している問題は、JavaScript コード内の何かを見つけるのに永遠に時間がかかり、ブラウザにはダウンロードするファイルがまだたくさんあるということです。

1 つの最終的な圧縮 JavaScript ファイルに「コンパイル」される少数の「ソース」JavaScript ファイルがあるのは一般的ですか? その他の便利なヒントやベスト プラクティスはありますか?

4

7 に答える 7

12

私が見つけたアプローチは、クラスごとに個別の JS ファイルを用意することです (Java、C# などで行うのと同じように)。または、ナビゲートしやすい場合は、JS をアプリケーションの機能領域にグループ化することもできます。

すべての JS ファイルを 1 つのディレクトリに配置すると、サーバー側の環境 (PHP など) がそのディレクトリ内の各ファイルをループし<script src='/path/to/js/$file.js' type='text/javascript'>、すべての UI ページに含まれるヘッダー ファイルに出力することができます。JS ファイルを定期的に作成および削除している場合は、この自動読み込みが特に便利です。

本番環境にデプロイするときは、それらすべてを 1 つの JS ファイルに結合し、それを「縮小」してサイズを抑えるスクリプトが必要です。

于 2008-08-19T00:02:42.913 に答える
8

また、外部ライブラリをロードするためにGoogle のAJAX Libraries APIを使用することをお勧めします。

これは、主要な JavaScript ライブラリをバンドルし、常に圧縮バージョンを使用することで展開、アップグレード、軽量化を容易にする Google 開発者ツールです。

また、プロジェクトでこれらのライブラリ ファイルをダウンロード、コピー、および維持する必要がないため、プロジェクトがよりシンプルで軽量になります。

このように使用します：

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
于 2008-09-02T08:18:15.777 に答える
4

単なるサイドノード-スティーブはすでに指摘しています。JSファイルを実際に「縮小」する必要があります。JSでは、空白が実際に重要です。JSの行が数千行あり、不要な改行のみを削除した場合、すでに約1K節約できます。私はあなたがポイントを得ると思います。

この仕事のためのツールがあります。また、「縮小」/削除/難読化されたJSを手動で変更しないでください。一度もない！

于 2008-08-19T00:42:51.833 に答える
3

私たちの大きな JavaScript アプリケーションでは、すべてのコードを小さな個別のファイルに記述します。Java に似た名前空間/ディレクトリ構造を使用して、「クラス」または機能グループごとに 1 つのファイルです。次に、次のようになります。

  • ダウンロード サイズを縮小するために、すべてのコードを (JSMin のバリアントを使用して) 縮小するコンパイル時の手順
  • サーバーへのラウンドトリップを減らすために、常にまたはほぼ常に必要なクラスを取得し、それらを大きなバンドルに連結するコンパイル時のステップ
  • 実行時にオンデマンドで残りのクラスをロードする「クラスローダー」。
于 2008-08-19T21:13:25.123 に答える
2

サーバーの効率を上げるために、すべてのJavaScriptを1つの縮小ファイルに結合するのが最善です。

コードが必要な順序を決定してから、縮小されたコードを必要な順序で1つのファイルに配置します。

重要なのは、ページの読み込みに必要なリクエストの数を減らすことです。そのため、本番環境ではすべてのJavaScriptを1つのファイルに収める必要があります。

開発のためにファイルを分割しておいてから、すべてを結合/コンパイルするビルドスクリプトを作成することをお勧めします。

また、経験則として、ページの最後にJavaScriptを含めるようにしてください。JavaScriptがヘッダー（またはページの早い段階）に含まれている場合、パイプラインがオンになっている場合でも、JavaScriptはロードされるまで他のすべてのリクエストが行われないようにします。ページの最後にある場合は、この問題は発生しません。

于 2008-08-19T00:09:03.290 に答える
1

他の (優れた) JavaScript アプリのコードを読んで、それらがどのように処理されるかを確認してください。しかし、私はクラスごとのファイルから始めます。しかし、生産の準備ができたら、ファイルを 1 つの大きなファイルに結合して縮小します。

ファイルを結合しない唯一の理由は、すべてのページのすべてのファイルが必要ない場合です。

于 2008-08-24T20:32:26.723 に答える
1

私の戦略は、AMD モジュール (多数のスクリプト タグを回避するため) とモジュール パターン (アプリケーションのパーツの密結合を回避するため) の 2 つの主要な手法で構成されています。

AMD モジュール: 非常に簡単です。ここを参照してください: http://requirejs.org/docs/api.htmlまた、アプリのすべての部分を 1 つの縮小された JS ファイルにパッケージ化することもできます: http://requirejs.org/docs/最適化.html

モジュールパターン: 私はこのライブラリを使用しました: https://github.com/flosse/scaleAppあなたは今、これは何ですか? 詳細はこちら: http://www.youtube.com/watch?v=7BGvy-S-Iag

于 2013-07-27T14:59:28.817 に答える