簡単な管理のために複数のファイルにコードを分割する

Question

私は現在jQueryを使用してオンラインアプリケーションを作成しています。これは数行のコードから始まり、すぐに1000行以上になります。

私のコードの構造は単純です。私はjavascriptをラップするwindow.loadを持っています。その中に私のクリックイベントハンドラと私のアプリケーションを作るさまざまな関数を追加し始めます。

$(window).load(function(){ 
    // Code goes here... 
}); 

マイコード機能は間違いなくカテゴリにグループ化できます。例えば5つの関数はアニメーションを実行し、12はイベントハンドラなどです。

これらの関数をそれぞれのjsファイルにグループ化して個別にインポートしたいと思います。後でCMSエンジンを使用して、ファイルを連結して圧縮することができます。

これを実行する最善の方法は何ですか。私は多分私の機能のいくつかをもっと明快にするために自分の名前空間を与えることができると思っています。例えばすべてのアニメーション機能の先頭にANIMATION-ANIMATION.moveDiv1（）、ANIMATION.moveDiv2、MYEVENT.div1Clickedなどが付いています。

Answer 1

私は、一般的にすべての関連項目を、読みやすさのためにファイルにマッチする名前空間を持つ、独自のファイルに貼り付けます。

サンプルファイルは、次のようになります。これを行う方法の多くは実際にあります

Example.js

var Animation = {}; // create the namespace-like object 
Animation.moveDiv1 = function() {...}; 
Animation.moveDiv2 = function() {...}; 

。圧縮について言えば、圧縮するのに使うことができる素敵なツールがいくつかあります。チェックアウトYUI Compressor

モジュール性はJavascriptの優れた目標ですが、次のレベルは実際にはいくつかのJavascript OOテクニックを使用すると言います。あなたのアプリが十分にシンプルであれば、あなたはおそらくそれなしで行うことができます。

Answer 2

アプリケーション管理の観点からは良いアイデアです。ブラウザは、これらの小さなスクリプトをすべて同期して読み込む必要があります。したがって、読み込むスクリプトごとに時間がかかります。これには、メインのjQueryライブラリスクリプト、jQuery UI、そしてドキュメント内にあることを計画しているものは含まれていません。両方の前提条件をテストしてください。関数を独自のスクリプトに抽象化し、読み込むために1回の呼び出しを必要とする1つの大きなスクリプトと比較して読み込みます。それをさらに進め、 "大きなスクリプト"を1つ増やし、圧縮ファイルとして提供されることを確認してください。

Answer 3

開発中にJavaScriptファイルをクラスに分割することはできますが、スクリプトを組み合わせて運用環境で最小化する必要があります。詳細については、YUI Compressorをご覧ください。

Answer 4

1. あなたのコードファイルは、クラスを反映している必要があります。
2. クラスは良いOO設計の原則に従うべきです。ブラウザ、kekoavとクヌート内のロード時間の面では

は正しい考えを持っている - ちょうどYUIを使用するか、別のスクリプトコンプレッサー/ minifier（および難読化ツールをオプションで）、単一のファイルにそれらを結合し、それらすべてをロード1つのスクリプトincludeディレクティブから取得できます。

クラスのプロトタイププロパティJSを見てみましょう。クラスが大きくなって複数のインスタンスを作成している場合は、パブリックオプションでプライベート/特権）メソッドをクラスプロトタイプに追加します。

AJAXソリューションを使用している場合は、MicrosoftのType.registerNamespaceを使用するか、kekoavの投稿に従って独自の名前空間関数を宣言するか、または他の同様のアプローチを使用して、クラスに完全修飾名前空間を使用する必要がありますGoogleが提供する。