ローカルで使用するためのjquery連鎖関数の書き方は？

Question

連鎖可能な関数を書くにはどうしますか？$ .fnを汚染しないでください。私のプラグインの中で使うための関数を書くだけです。出来ますか？

$('.myclass').makeSomething().andOneMoreFunction().andLast(); 

正しいアプローチですか？

UPD。 私の場合は最善の解決策は、拡張メソッドです：

String.prototype.getMyLength = function(){return this.length;} 

そして今、私はこのような任意の文字列にこの機能を適用することができます。

var mystring = "test"; 
mystring.getMyLength(); 

それとも

"teststring".getMyLength() 

そして、それはチェーン可能にします：

String.prototype.getMe = function(){return this;} 
"string".getMe().getMe().getMe().getMe().getMe(); 

お返事ありがとうございます！

Answer 1

あなたは必要なものをチェーンすることができます。 $.fnを自分で定義する場合は、機能の最後にreturn thisを入力することが重要です。

自分でJavaScriptを書きたい場合は、チェーンすることもできます。それはただあなたが返すものに依存します。したがって、他のオブジェクトを返すと、そのオブジェクトからチェーンすることができます。これには戻り値が使用されます。機能上

例

var obj = { 
    test : function(){ 
     alert("Y"); 
     return this; 
    }, 
    test2 : function(){ 
     alert("2"); 
     return this; 
    } 
} 
obj.test().test2(); // And so on since it returns this 

jQueryのプラグインAPI

$.fn.test = function(){ 
    var methods = { 
     method0 : function(){ 
      alert("method0"); 
      return this; 
     } 
    }; 
    return methods; 
} 
var api = $("obj").test(); // Returns methods 
api.method0(); // Calling a function from the returned methods. 
// OR 
$("obj").test().method0(); 

jQueryのはもうチェーン可能ではありません。したがって、あなた自身のAPIを返すので、$("obj").test().addClass("test")を使用することはできません！

Answer 2

a.foo()を呼び出すと、thisをaに設定して、関数fooが呼び出されます。これをあなたの利益に利用することができます。

また、の式a.foo()は、関数内からreturn dに評価されます。

したがって、は、ちょうどthisを返します。

その後a.foo()はaに戻って評価され、(a.foo()).bar()はa上a.bar() ...つまりチェーンオペレーションを呼び出し、その後a.foo()を呼び出すのと同じになります！

$.fnは特に魔法のようなものではありません—これは、あなたがしようとしているのと同じ方法で上記のロジックを単純に使用します。

Answer 3

プラグインの関数の最初のパラメータを使用して選択方法を指定することで、汚染を回避できます。

(function() { 
    var o = { // object holding your methods 
     'bar': function() {console.log('bar', this); return this;}, 
     'foobar': function() {console.log('foobar', this); return this;} 
    }; 
    $.fn.foo = function (method /*, args*/) { 
     return o[method].apply(
      this, 
      Array.prototype.slice.call(arguments, 1) // pass your args 
     ); 
    }; 
}()); 

、その後

$('something').foo('bar').foo('foobar'); 
/* 
bar, thisobj 
foobar, thisobj 
*/ 

例えばあなたがあまりにも、通常通りjQueryオブジェクトへのアクセスを維持するこの方法です。