2009-06-25 27 views
15

私の目標は、JQueryプラグインの中にある関数を呼び出せるようにすることです。JQueryプラグインの中にネストされた関数を呼び出す方法は?

正しい構文は何ですか?

例えば、これは動作しません:

<a href="#" id="click_me">Click Me</a> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
(function($) { 
    $.fn.foo = function(options) { 
     do_stuff = function(){ 
      console.log("hello world!"); // works 
      do_other_stuff = function(){ 
      alert("who are you?"); 
      } 
     } // function 
    } // function 
})(jQuery); 

$("body").foo(); 

$("#click_me").click(function(){ 
$.fn.foo.do_stuff.do_other_stuff(); // doesn't work 
}); 

</script> 

答えて

35

あなたは、彼らがその名前のローカル変数を上書きするか、インクルードがグローバル名前空間に追加されているいずれかのvarキーワードを指定せずに変数に機能を割り当てるとき。 (あなたのdo_stuffは、あなたが望むものではないグローバル関数です)

あなたが望むことを行う方法の1つは、関数をどこに置くかを明示的に与えることです。

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 
    }; 

    $.fn.foo.do_stuff = function() { 
     console.log("hello world!"); 
    }; 

    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
})(jQuery); 

編集

JavaScriptですべての機能を使用すると、任意のプロパティに値を割り当てることができることを意味オブジェクトですので、これは動作します。

あなたが他の関数の変数にアクセスしたい場合は以下のように他のものの内部定義を移動することができます。

$.fn.foo.do_stuff = function() { 
    console.log("hello world!"); 
    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
}; 

しかし、これはあなたが他の機能を実行したら、機能のみが定義されている意味します、と関数を実行するたびに、最後の定義を上書きすることになります。

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 

     var do_stuff = function(do_stuff_args) { 
      console.log("hello world!"); 
      // do stuff with options and do_stuff_args 

      var do_other_stuff = function(other_args) { 
       alert("who are you?"); 
       // here you have access to options, do_stuff_args, and other_args 
      }; 

      return { 
       do_other_stuff: do_other_stuff 
      }; 
     }; 

     return { 
      do_stuff: do_stuff 
     } 
    }; 
})(jQuery); 

foo().do_stuff(some_options).do_other_stuff(other_options); 

又は

var a = foo(stuff).do_stuff(some_options); 
a.do_other_stuff(foo); 
a.do_other_stuff(bar); 
+0

を使用してそれを呼び出す:

おそらくより理想的な解決策は、各機能がそうのようなネストされた関数を含むオブジェクトを返す持っているだろう私は本当になぜこの作品が得られないのですか?私は$ .fn.fooがdo_stuffというプロパティを持つ関数かオブジェクトのどちらかであると思っていましたが、あなたの例ではそれは両方です。これはJavaScriptで可能ですか?この機能について読むためのポインタを教えてください。それとも私はここで何か間違っているのですか? –

+0

例のおかげで、それは動作します。私のプラグインはすでに完了しています。あなたの例は、私のプラグインの構造と一致しません。私のプラグインでは、 "do_stuff"は "foo"の中にあり、 "do_other_stuff"は "do_stuff"の中にあります。どのように私はそのネストされた構造を使用して "他のもの"にアクセスできますか?あるいは、あなたの例をどのように使うことができますか?do_stuffにfooの変数にアクセスさせます(do_other_stuffにdo_stuffのアクセス変数を渡します)? – edt

+2

ありがとうCobbal、私は私の関数構造体であなたの例を使用する方法を考え出しました。よく働く!レベルにかかわらず、すべてのネストされた関数に対して$ .fn.foo。[function_name]を使用するだけでした。 – edt

関連する問題