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