javascriptコードグループ化のテクニック

Question

私は、サイト全体のさまざまなページに含まれている複数のjavascriptファイルに分割された多数の関数とイベントハンドラを持っています。

パフォーマンス上の理由から、これらのファイルはすべて、サイト全体でグローバルな1つのファイルにまとめる必要があります。

問題は、必ずしも存在しない要素関数と同じ関数名で呼び出されるイベントハンドラがあることです。

これは、一般的なJavaScriptのファイルの例です...

$(document).ready(function(){ 
    $('#blah').keypress(function(e){ 
     if (e.which == 13) { 
      checkMap(); 
      return false; 
     } 
    }); 
}); 

function checkMap() { 
    // code 
} 

function loadMap() { 
    // code 
} 

私は、その特定のページに呼び出されたオブジェクトにこのコードを区切る必要があるだろう。私は次のようにイベントハンドラを宣言するだろうか、その後

(function($) { 
    $.homepage = { 
     checkMap: function(){ 
      // code 
     }, 
     loadMap: function(){ 
      //code 
     } 
    }; 
})(jQuery); 

をし、それを必要とするページに、私は$.homepage.checkMap()など

を呼び出すことができます。しかし：

私の考えは、私はこのようにそれを再作成することもできますdocument.readyそれ自体の機能には含まれていませんか？

ベストプラクティスに関するアドバイスはすばらしいでしょう。ありがとうございます！

Answer 1

あなたが必要とするのは、アプリケーション用の名前空間です。名前空間は、次のようになりますシンプルなJSONオブジェクトです：

var myApp = { 
    homepage : { 
     showHeader : function(){}, 
     hideHeader : function(){}, 
     animationDelay : 3400, 
     start : function(){} // the function that start the entire homepage logic 
    }, 
    about : { 
    .... 
    } 
} 

あなたが複数のファイルでそれを分割することができます。

1. MyAppのは多分のようないくつかの便利なユーティリティで、て、myApp = {}オブジェクトが含まれていますあなたは何を持っていますか？
2. Homepage.jsには、ホームページのすべてのメソッドでmyApp.homepage = {...}が含まれます。
3. リストは他のページと続けています。

パッケージと考える。メインオブジェクトとして$を使用する必要はありません。

<script src="myapp.js"></script> 
<script src="homepage.js"></script> 
<-....-> 
<script> 
    myApp.homepage.start(); 
</script> 

私はホームページオブジェクトを使用する方法でしょうか。 YUIに圧縮するとき

は、あなたが持っている必要があります。

<script src="scripts.min.js"></script> 
<script> 
    myApp.homepage.start(); 
</script> 

Answer 2

あなたが正しく理解していることを確認するには、すべてのコードを含む1つのjsファイルがありますが、特定のページで実行されるものを引き続き制御したいと思っていますか？

この場合、Terrific JS frameworkにお気軽にお問い合わせください。それはあなたがモジュールにjavascript機能を適用することを可能にします。モジュールは、ナビゲーション、ヘッダー、通貨コンバータなど、ウェブページ上のコンポーネントです。 Terrific JSはdomをスキャンし、見つかったモジュールのjsを実行するので、実行を心配する必要はありません。 Terrific JSはモジュールを識別するためにOOCSS命名規則を要求します。それはあなたの問題への迅速な解決策ではありませんが、あなたが時間をかけて喜んでいるなら、それは助けになります。

Hello Worldの例： http://jsfiddle.net/brunschgi/uzjSM/

ブログ投稿使用に：ここであなたが役に立つかもしれないいくつかのより多くのリンクがある http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Answer 3

まず第一に：あなたが持っているどのくらいのコードによっては、あなたが考慮しなければなりません、 1つのファイルにすべてのコードを記述するのが良い考えです。 HTTPリクエストを保存するのは問題ありませんが、1ページに5％を使用する膨大なコードをロードすると、これらのjsファイルを分離しておくほうが良いでしょう（特にモバイル環境では！）。 ブラウザにこれらのファイルをキャッシュさせることができます。コードの変更頻度やソースの変更量に応じて、特別な目的のためにコードを安定したコア機能と追加の.jsパッケージに分けたい場合があります。この方法でトラフィックやメンテナンスに賢明になるかもしれません。

関数を異なるオブジェクトにカプセル化することは、不必要な関数の巻き上げやグローバルな名前空間の汚染を防ぐための良い考えです。

最後に、あなたがいずれかの方法で不要なイベントハンドラを呼び出す防ぐことができます：あなたは必要な機能のみを呼び出すかを助けますページタイプのいくつかの種類を紹介

。

または

は、あなたのJSをスピードアップするために、このif($("specialelement").length > 0){ callhandlers}

のように特定の要素が存在するかどうかを確認するには、Googleの閉鎖コンパイラを使用することができます。コードを縮小して最適化します。

Answer 4

私は、すべてのファイルを1つのmin.jsファイルにマージして、それを縮小したものを使用します。マージとミニフィーニングの両方を行っている場合は、パフォーマンスをお探しの場合は、行く方法です。 http://developer.yahoo.com/yui/compressor/

例： Javascriptを入力ファイル：jquery.js、jquery.js、ads.js、support.js出力とads.js support.js

実行YUIそれはmin.js

へJavascript出力ファイル：min.js

HTMLコードでmin.jsを使用します。 http://www.youtube.com/watch?v=HifKkERVtVs

Answer 5

は、彼らがヤフー（YUI）でそれを行う方法についてのプレゼンテーションがあります。このWebサイトは、フレームワークの選択に役立つよう設計されています。

Answer 6

この男web siteを見て、presentation関連：ここ