Cara menggunakan CHAINING pada JavaScript

Saya tidak bertanya apa sintaksis yang tepat untuk chaining, saya tahu itu bisa seperti:

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

Namun saya benar-benar penasaran untuk memahami cara kerja itu, sejauh yang saya tahu chaining adalah salah satu keuntungan terhadap kerangka kerja terkenal lainnya, tetapi ini kita banyak abstraksi untuk programmer pemula seperti saya, saya yakin ada seseorang di luar ada yang bisa memberi saya penjelasan yang memungkinkan saya untuk memahami cara kerja rantai.

Terima kasih!

Jika Anda memiliki objek dengan metode tertentu, jika setiap metode mengembalikan objek dengan metode, Anda dapat memanggil metode dari objek yang dikembalikan.

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();

DEMO:http://jsfiddle.net/5kkCh/

Semua yang dilakukannya adalah mengembalikan referensi ke this ketika metode selesai. Ambil objek sederhana ini misalnya:

 var sampleObj = function()
 {
 };

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

Anda dapat membuat panggilan ini sepanjang hari karena Anda mengembalikan referensi ke this:

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

jQuery hanya melakukan operasi, lalu mengembalikan this. 

Pada dasarnya panggilan fungsi pertama $('myDiv') mengembalikan objek jQuery, lalu setiap panggilan berikutnya mengembalikan yang sama.

Secara longgar,

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

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

return $this;

setiap fungsi jQuery mengembalikan instance dari kelas jQuery, yang kemudian dapat memiliki metode yang dipanggil. Anda dapat memecahnya, dan kode ini akan memiliki efek yang sama.

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

Intinya adalah bahwa suatu fungsi harus mengevaluasi fungsi "induk". Jadi mis.

foo().bar().test();

harus mengevaluasi untuk:

foo().test();

sehingga Anda dapat memanggil fungsi lain di foo(). Untuk melakukan ini, Anda dapat return this:

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

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

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

Kemudian,

var something = new foo();
something.bar() === something; // true

Dan karena ini:

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

Jadi karena something.bar() mengevaluasi ke something, Anda dapat segera memanggil fungsi kedua sekaligus.

Dalam chaining fungsi/metode orang tua mengembalikan objek yang kemudian digunakan oleh fungsi/metode anak, dan semuanya berjalan seperti itu. Singkatnya jQuery atau $ mengembalikan dirinya (sebuah objek) yang memungkinkan rantai 

Ini adalah mekanisme yang sama di bawah ini

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

Sepertinya ini jika dilakukan dengan chaining 

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

Berikut adalah contoh rantai panggilan balik bersyarat, seperti digunakan pada fungsi jQuery $.ajax. 

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

Salah satu cara chaining, periksa demo .

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

Chaining digunakan untuk menghubungkan banyak acara dan fungsi dalam pemilih.

Untuk menjalankan beberapa perintah jQuery, satu demi satu, pada elemen yang sama. Umumnya chaining menggunakan fungsi jQuery bawaan yang membuat kompilasi sedikit lebih cepat. 

Itu membuat kode Anda pendek dan mudah dikelola dan memberikan kinerja yang lebih baik,

Eaxample

Tanpa Rantai

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

Dengan Chaining

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

Catatan: Rantai dimulai dari kiri ke kanan. Jadi paling kiri akan dipanggil dulu dan seterusnya.