jQuery链接如何工作?

2011-09-20 javascript jquery frameworks

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

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

但是,我真的很想了解它的内部工作,据我所知,链接是与其他著名框架相比的优势之一,但是对于像我这样的新手程序员来说,这是很多抽象的东西,我敢肯定在那里可以提供一个解释,让我了解链接的工作方式。

谢谢!

Answers

基本上,第一个函数调用$('myDiv')返回一个jQuery对象,然后每个后续调用都返回一个相同的对象。

松散地

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

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

方法完成后,它所做的只是返回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

如果您的对象具有某些方法,并且每个方法都返回带有方法的对象,则只需从返回的对象中调用一个方法。

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/

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 ,您可以立即调用第二个函数。

在链接父函数/方法时,返回一个对象,然后该子函数/方法将使用该对象,然后事情就以这种方式进行。简而言之, 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();

这是一个条件回调链接的示例,就像$.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;
}

链接的一种方法,请检查demo

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

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

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

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

车灯

没有链接

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

带链

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

注意:链从左到右开始。因此,最左边将首先被调用,依此类推。

链接允许我们在单个语句中运行多个jQuery方法(在同一元素上)。

以下示例将css()slideUp()slideDown()方法链接在一起。 “ p1”元素首先变为红色,然后向上滑动,然后向下滑动:

 $("#p1").css("color", "red").slideUp(2000).slideDown(2000); 

Related