jquery 체이닝은 어떻게 작동합니까?

jquery 체이닝은 어떻게 작동합니까?

---

체이닝에 적합한 구문이 무엇인지 묻지 않고 다음과 같을 수 있습니다.

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

그러나 나는 체인이 다른 유명한 프레임 워크에 비해 장점 중 하나라는 것을 알고있는 한 그것의 내부 작동을 이해하는 것이 정말 궁금합니다. 연결이 어떻게 작동하는지 이해할 수있는 설명을 제공 할 수 있습니다.

감사!

---

특정 메서드가있는 개체가있는 경우 각 메서드가 메서드가있는 개체를 반환하면 반환 된 개체에서 메서드를 호출하기 만하면됩니다.

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/

---

그것이하는 일은 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.

---

기본적으로 첫 번째 함수 호출 $('myDiv')은 jQuery 객체를 반환 한 다음 각 후속 호출은 동일한 객체를 반환합니다.

느슨하게,

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

jQuery.prototype.removeClass = function(className) {
   // magic
   return this;
}

---

return $this;

각 jQuery 함수는 jQuery 클래스의 인스턴스를 반환하며, 여기에 메서드를 호출 할 수 있습니다. 당신은 그것을 분해 할 수 있고,이 코드는 동일한 효과를 가질 것입니다.

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

---

요점은 함수가 "부모"함수로 평가되어야한다는 것입니다. 그래서 예

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한 번에 두 번째 함수를 즉시 호출 할 수 있습니다.

---

In chaining parent function/method returns an object which is then used by the child function/method, and things go on such a way. In short the jQuery or $ returns itself (an object) which allows the chaining.

It is the same mechanism below

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

It looks like this if it is done with chaining

$('input').val('a').fadeOut();

---

Here is an example of conditional callback chaining, like is used on the $.ajax jQuery function.

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

---

One of the way to chaining, check demo .

test("element").f1().f2().f3()

---

Chaining is used to connect multiple events and functions in a selector.

To run multiple jQuery commands, one after the other, on the same element(s). Generally chaining uses the jQuery built in functions that makes compilation a bit faster.

It makes your code short and easy to manage and it gives better performance,

Eaxample

Without Chaining

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

With Chaining

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

Note: The chain starts from left to right. So left most will be called first and so on.

ReferenceURL : https://stackoverflow.com/questions/7475336/how-does-jquery-chaining-work