web-dev-qa-db-ja.com

jqueryチェーンはどのように機能しますか？

チェーンに適切な構文は何かを尋ねているのではなく、次のようなものであることを知っています。

$('myDiv').removeClass('off').addClass('on');

しかし、チェーンが他の有名なフレームワークに対する利点の1つであると知っている限り、その内部の仕組みを理解したいのですが、私のような初心者のプログラマにとっては抽象化が必要ですチェーンがどのように機能するかを理解できる説明を提供できます。

ありがとう！

javascriptjqueryframeworks
54
isJustMe

特定のメソッドを持つオブジェクトがあり、各メソッドがメソッドを持つオブジェクトを返す場合、返されたオブジェクトからメソッドを呼び出すことができます。

var obj = {   // every method returns obj---------v
    first: function() { alert('first');   return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third');   return obj; }
}

obj.first().second().third();

デモ：http://jsfiddle.net/5kkCh/

63
user113716

メソッドが完了すると、thisへの参照を返すだけです。例として、この単純なオブジェクトを取り上げます。

 var sampleObj = function()
 {
 };

 sampleObj.prototype.Foo = function()
 {
     return this;
 };

thisへの参照を返すため、これらの呼び出しを終日連鎖させることができます。

var obj = new sampleObj();
obj.Foo().Foo().Foo().Foo() // and so on

jQueryは単純に操作を実行し、thisを返します。

25
Tejs

基本的に、最初の関数呼び出し$('myDiv')はjQueryオブジェクトを返し、その後の各呼び出しは同じものを返します。

ゆるく、

var $ = function(selector) {
   return new jQuery(selector);
};

jQuery.prototype.removeClass = function(className) {
   // magic
   return this;
}
6
Daniel A. White
return $this;

各jQuery関数は、jQueryクラスのインスタンスを返します。jQueryクラスには、メソッドを呼び出すことができます。あなたはそれを分解することができ、そしてこのコードは同じ効果を持つでしょう。

jQuery_obj = $('myDiv');
jQuery_obj = jQuery_obj.removeClass('off');
jQuery_obj = jQuery_obj.addClass('on');
4
GSto

ポイントは、関数が「親」関数に評価される必要があるということです。例えば.

_foo().bar().test();
_

評価する必要があります：

_foo().test();
_

foo()で別の関数を呼び出すことができます。これを行うには、_return this_を使用できます。

_function foo() {
    // empty, nothing interesting here
}

foo.prototype.bar = function() {
    return this;
}

foo.prototype.test = function() {
    return this;
}
_

次に、

_var something = new foo();
something.bar() === something; // true
_

そしてこのため：

_something.bar().test() === something.test(); // true
_

したがって、something.bar()はsomethingに評価されるため、すぐに2番目の関数を呼び出すことができます。

4
pimvdb

親関数/メソッドを連鎖させると、オブジェクトが返され、そのオブジェクトが子関数/メソッドによって使用され、物事はそのように進みます。要するに、jQueryまたは$は、チェーンを許可する自身（オブジェクト）を返します。

以下と同じメカニズムです

var obj=$('input');    //returns jQuery object
var obj1=obj.val('a'); //returns jQuery object
var obj2=obj1.fadeOut();//returns jQuery object

チェーンで行うと、このように見えます

$('input').val('a').fadeOut();
4
Muhammad Usman

$.ajax jQuery関数で使用されるような、条件付きコールバックチェーンの例を次に示します。

// conditional callback function example
myFunction = function () {

    // define event callback prototypes without function parameter
    var callback_f = new Object;
    callback_f.callback1 = function () { return callback_f; };
    callback_f.callback2 = function () { return callback_f; };

    if ([condition]){
        // redefine the callback with function parameter 
        // so it will run the user code passed in
        callback_f.ReturnPlayer = function (f) { f(); return callback_f; };
    }else{ 
        callback_f.NewPlayer = function (f) { f(); return callback_f; };
    }

    return callback_f;
}
0
Matthew.Lothian

連鎖する方法の1つである demo を確認してください。

test("element").f1().f2().f3()
0
Shoib Mohammed A

セレクター内の複数のイベントと関数を接続するには、チェーンが使用されます。

同じ要素に対して複数のjQueryコマンドを次々に実行するには。一般に、チェーンでは、jQuery組み込み関数を使用して、コンパイルを少し高速化します。

コードを短く管理しやすくし、パフォーマンスを向上させます。

サンプル

チェーンなし

$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});

連鎖あり

$(document).ready(function(){
    $('#dvContent').addClass('dummy')
          .css('color', 'red')
          .fadeIn('slow');     
});

注：チェーンは左から右に始まります。そのため、左から順に呼び出されます。

0
Srikrushna