it-swarm.cn

jQuery的链接如何工作?

我不是问链接的合适语法是什么,我知道它可能是这样的:

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

但是我真的很好奇理解它的内部工作,据我所知,链接是对其他着名框架的优势之一,但是对于像我这样的新手程序员来说,我们有很多抽象,我敢肯定有人出来在那里可以为我提供一个解释,让我了解链是如何工作的。

谢谢!

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

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

61
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_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,你可以一次调用第二个函数。

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

链接方式之一,检查 演示

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

链接用于连接选择器中的多个事件和函数。

在同一个元素上一个接一个地运行多个jQuery命令。通常链接使用jQuery内置函数,使编译更快一些。

它使您的代码简短易管,并提供更好的性能,

Eaxample

没有链接

$(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 Pal