jQueryコードの構成(その他のヒント)

私は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
}
1
「どこでコードをレイアウトできますか」とはどういう意味ですか?
追加された 著者 Dave Newton,

4 答え

私はどうしているのですか?

// 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
};

私はいくつかの構造体のjsonオブジェクトにソートしていません.click(function(){})を次に次に実行しないでください。

If you wan't to learn more about jQuery structure and making your own plugins, read the following URL http://docs.jquery.com/Plugins/Authoring

1
追加された

詳細については、モジュールパターンを参照してください。 javascript。そのトピックについては、ダグラス・クロフォードの「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()
})

いくつか注意すべき点:

  • 「return」の下にあるものはすべてpublicです(他の人が呼び出すことができます) オブジェクト)とその上にあるすべてのものは非公開です(アクセスできない このオブジェクトの外側)

  • すべてのバインディングを1つのコードブロックにまとめます.bind( "click"、 doCoolStuff) 'を使用すると、すべてのDOM要素を一目で見ることができます モジュールがリッスンしています。

  • イベントハンドラに、定義するのではなく説明的な名前を付けます inline '.bind( "click"、function(){}'。

  • ユーザーのバインド(「クリック」、...)ではなく、「.click」ではなく 同じこと。これは、jQueryにも 'unbind'メソッドがあるためです これは有用で、私は鏡像のような名前を持つのが好きです。 しかし、もっと大きな理由は、名前空間関数を使うことができるということです。あなた バインド( "click.customNamespace、...)"を行うことができます。これを行う理由は次のとおりです。 後で '.trigger( "click.customNamespace")を実行すると すべてのクリックイベントではなく、名前空間付きのイベントのみをトリガーします。

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

1
追加された

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

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

関数ジェネレータを使用してクリック処理関数を作成し、コードの重複を減らすことができます。

0
追加された
ですから、$(document).ready()関数の外に.click()ハンドラ関数を置くべきですか?
追加された 著者 mary_berry,
@broomgbは完全に依存します。ニールズの答えのように、あなたはできます。または、それらをDOM準備関数の中の関数として持つことができます。他の機能を上書きしないようにすることが最も重要な部分です。
追加された 著者 Dave Newton,

非常に単純なアプローチです:

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

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

function assignSomeOtherClicks() {
    ...
}

もちろん、純粋主義者たちは泣くだろうし、ジャック人はそれを見て死ぬだろう。

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

最近では、ハンドラを扱う "init"関数で "modules"(プラグイン)を使用しています。

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

アントーラーのjsファイル

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

クラス名などのいくつかの標準と前提条件が必要であることに注意してください。

"new function"という構文を使用していますが、オブジェクトも使用できます( var fileExplorer = {init:function(){...}、...} )。私は "new Function"の構文が一番簡単ですが、これは次のように書かれています: var fileExplorer = function(){return {init:function(){...}、...};}私の意見では、私的なものと公的なものがあります。

jqueryプラグインを使用する場合は、簡単です。プラグイン自体の中に自分のものをバインドすることができます。

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

0
追加された