jQueryコードの構成（その他のヒント）

Question

jQueryの使用を開始しました。コードの構成方法と使用方法を理解するのには苦労しています。現時点では私はのようなコードを使用しています：

$(document).ready(function(){ 
    alert('all of the jquery goodness here'); 
    $('#div1').click(function(){ 
    /* some manipulation stuff here */ 
    }) 
}) 

DOMがロードされた後にクリックハンドラの負荷を持っていることのより良い方法はありますか？

また、私はjqueryの内のコードのレイアウトに関する情報を得ることができる場所へのリンクがありますか？私は、ソースコードの周りに見てきたけど...役に立つ何かを見つける

みんなありがとう

[編集]

私は覚えていながら、別の簡単な質問ができない - それは同様のものを使用することは悪い習慣です：

は

function clickedevent(){ 
    $('').toggle or other random jquery function 
} 

Answer 1

何よりも良いですか？それはあなたがそれらを添付したいときです。

クリックハンドラ関数自体をインライン展開するのではなく、名前付き関数に移動することができます。

時には、リファクタリング、クリック処理関数を作成し、コードの重複を減らすために、関数発生器を使用することができます。

それはこのようなものであるどのように私は

Answer 2

：私はあなたがあるため、その後、いくつかの構造のためのJSONオブジェクトにそれを並べ替えて、次の後に次の.click（関数（）{}）を行ういけない

// Short notation for document ready 
$(function(){ 
    // Bind the button to the method 
    $(".button").click(methods.handlers.clickhandler1); 
}); 

var methods = { 
    handlers : { 
     clickhandler1 : function(){ 
      alert("Y"); 
     } 
    }, 
    method1 : function(){ 

    } 
    // ETC 
}; 

あなたの実際の拘束力が文書の準備が整っているか、より多くの概要を見つけることができない。

あなたは非常に単純なアプローチjQueryの構造についての詳細を学ぶためにwan'tと、独自のプラグインの作成を行うには、次のURLを読んhttp://docs.jquery.com/Plugins/Authoring

Answer 3

場合：もちろん

$(document).ready(function() { 
    assignSomeClicks(); 
    assignSomeOtherClicks(); 
}); 

function assignSomeClicks() { 
    $('#div1').click(function(){ 
     ... 
    }); 
} 

function assignSomeOtherClicks() { 
    ... 
} 

を純粋主義者は泣くだろう、とjavaの人はそれを見て死ぬでしょう。あなたのJSコードを整理したいを開始したときに

しかし、あなたは基本的に2つのオプションがあります。スタイルがシンプルで一貫性を保つように、または完全なオブジェクトアプローチになるようにします。

、これらの日、私はハンドラを扱う「初期化」機能と「モジュール」（プラグイン）を使用します。 antoher jsの中

$(document).ready(function() { 
    fileExplorer.init(); 
    fileViewer.init(); 
    taskAssignation.init(); 
}); 

それはクラス名と、そのようなのような、いくつかの基準および仮定が必要であることを

var fileExplorer = new function() { 
    // local stuff 
    var thing; 
    function buggify() {...}; 
    // public stuff 
    this.init = function() { 
     $('.fileExplorer').click(function() {...}); 
    } 
} 

注意を提出。

それは私の意見では、最も簡単だと私は、「新機能」のシンタックス1が好きです。私は、構文「新機能」を使用していますが（var fileExplorer = { init: function() {...}, ... }または他の方法（var fileExplorer = function() { return {init: function() {...}, ...}; }のような）あまりにもオブジェクトを使用することができますあまりにもなお、ここでは、プライベートとパブリックのものを持っている。

あなたはjQueryのプラグインを行う場合、それは簡単です、あなたはプラグイン自体の内側に自分のものをバインドすることができます。

次に（function（）{}）（）を使い始めることができますが、私はクロージャのコンセプトを十分に理解していないので、それらを使用するのに十分な快適性を感じていません。

Answer 4

Module Patternを参照して、オブジェクト指向のjavascriptをより詳しく記述してください。そのトピックについては、優れた読書はDouglas Crawford's 'Javascript: The Good Parts'です。ここではjQueryを使ってモジュールのパターンの例である：

window.MyCoolModule= (function(){ 
    var doCoolStuff = function(){ 
     alert("badumpumbishh") 
    } 
    var otherCoolStuff = function(){ 
     alert("someone..moved their..mouse.. all over me"); 
    } 

    var superSecretPrivateFunction = function(){ 
     // come at me bro 
    } 

    return{ 
     somePublicFunction: function(){ 
      //hello, i can be called by other people 
     }, 

     init: function(){ 
      $("#div1") 
        .bind("click", doCoolStuff) 
        .bind("mouseover", otherCoolStuff) 

      $("#div2") 
       .bind("click", superSecretPrivateFunction) 
     } 
    } 
}()) 

$(function(){ 
    MyCoolModule.init() 
}) 

注意すべきいくつかのポイント：「リターン」の下

• すべては、公共（それは他の のオブジェクトで呼び出すことができます）と、上記のすべてです一目ですべて見ることができるようにそれは、プライベート（このオブジェクトの外側 をアクセスすることはできません）

• 私は、コードの1つのブロックにすべての私のバインディングをしこり「.bind（、 doCoolStuffを 『クリック』）」ですあなたの モジュールがリッスンしているDOM要素

• 私は '（、 "クリック" 機能（）{} .bind' イベントハンドラに、むしろそれらを インラインを定義するより説明的な名前を付けます。

• ユーザーズバインド（ "クリック"、...）jQueryにも 'アンバインド'メソッドがあるので、便利です。 しかし、もっと大きな理由は、あなたは後で '.trigger（ "click.customNamespace"）を実行することができる です。これはですは、すべてのクリックイベントではなく、名前空間付きのイベントのみをトリガーします。

• 外部の代わりにinitの内部で$ .readyチェックを行うことができます - コーディングスタイルの問題。