jquery鏈接如何工作？

Question

我不要求什麼是鏈接適當的語法，我知道這可能是這樣的：

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

但是我真的很好奇，瞭解它的內部工作，據我所知鏈是對於其他着名框架的優勢之一，但我們對像我這樣的新手程序員有很多抽象，我確定有人在那裏可以給我一個解釋，讓我瞭解鏈接是如何工作的。

謝謝！

Answer 1

如果你有一個具有某些方法的對象，如果每個方法都返回一個帶有方法的對象，那麼你可以簡單地從返回的對象中調用一個方法。

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/

Answer 2

基本上第一個函數調用$('myDiv')返回一個jQuery對象，然後每個後續調用返回相同的一個。

鬆散，

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

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

Answer 3

所有它做的是返回一個參考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。

Answer 4

return $this; 

每個jQuery函數返回jQuery的類，則其可以具有方法調用它的一個實例。你可以把它分解下來，而這段代碼也會有相同的效果。

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

Answer 5

問題是函數必須計算爲「父」函數。所以例如

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，你可以立即調用第二個函數一氣呵成。

Answer 6

在鏈接父函數/方法返回一個對象，然後由子函數/方法使用，並且事情繼續這樣。簡而言之，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(); 

Answer 7

這裏做了同樣的機制是有條件的回調鏈的一個例子，就像是在$.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; 
} 

Answer 8

其中一種方法來鏈接，檢查demo。

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