jQuery如何进行方法链接

How can jQuery do method chaining?

本文关键字：链接 方法 何进行 jQuery      更新时间：2023-09-26

可能的重复项：
jquery链接如何工作？

这是你在jQuery代码中看到的正常情况：

$("div.selected").html("Blah.");
所以，在

上面的代码中，在函数$()中，它有一个名为 html() 的函数。我不明白的是，我通常会做的是：

funcA("blah");  //normal function, cool.
funcA.funcB("blah");  //normal function in an object, still cool.

现在这令人困惑：

funcA("blah").funcB("blah")  //huh??

funcB怎么知道funcA中的论点？
jQuery如何实现这一点？

谢谢。

//function returning an object is a possibility. bar has access to elem because of
// the shared scope
function foo ( elem ) {
    return {
        bar : function () {
            return elem.id;
        }
    };
}

在这个函数中，foo函数返回一个包含您想要的任何方法的对象。所以当你打电话给foo，你会收到这个：

{
    bar : function () {
        return elem.id;
    }
}

elem从你打电话给foo就存在。如果要在bar的顶部添加一个console.log( elem )，您会发现它与您传递给foo的内容相同。

//this is kinda how jQuery does it:
var foo = (function() {
    function foo ( elem ) {
        this.elem = elem;
    }
    foo.prototype.bar = function () {
        return this.elem.id;
    };
    return function ( elem ) {
        return new foo( elem );
    };
}());

这有点复杂，实际上分为两部分。

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

谁不喜欢原型继承与经典继承名称混合？无论如何。。。函数既充当常规函数，又充当构造函数。这意味着，当使用 new 关键字调用时，会发生两件特殊的事情：

  1. foo内部的this是指新制作的foo.prototype副本
  2. 返回foo.prototype(除非返回对象foo(

请注意，foo.prototype不是一个神奇的值。它就像任何其他对象属性一样。

因此，在foo函数/构造函数中，我们只是设置foo.prototype.elem，而不是直接设置。可以这样想(有点不准确，但可以(：foo.prototype是产品的蓝图。每当你想制作更多时，你都会使用蓝图 - 复制里面的东西，传递它。在foo内部，this指的是蓝图的复制。

但是，通过在 foo.prototype 上显式设置值，我们正在更改蓝图本身。无论何时调用foo，都会使用此更改后的蓝图调用它。

最后，一旦foo完成，将返回复制(复制的蓝图，但在foo对其完成操作之后(。此复制包含原始蓝图以及我们可能已添加的其他所有内容 - 在此示例中为 elem 。

var foo = (function() {
    ...
    return function ( elem ) {
        return new foo( elem );
    };
}());

我们创建一个无名称函数并立即执行它。

(function () {
    console.log( 'meep' );
}());
//is the equivalent of:
var something = function () {
    console.log( 'meep' );
};
something();
something = undefined; //we can no longer use it
//and of this
function () {
    console.log( 'meep' );
}(); //<--notice the parens
//however, it's considered good practice to wrap these self-executing-anonymous-functions
// in parens

像所有其他函数一样，它们可以返回值。这些值可以捕获到变量中。

var answer = (function () {
    return 42;
}());
answer ==== 42;
var counter = (function () {
    var c = 0;
    return function () {
        return c++;
    };
}());
//counter is now a function, as a function was returned
counter(); //0
counter(); //1
counter(); //2...

所以：

var foo = (function () {
    ...
    return function ( elem ) {
        ...
    };
}());

返回一个接收参数的函数，该函数现在分配给foo 。

函数内部：

return new foo( elem );

是为了确保我上面谈到的特殊条件 - 它通过显式执行new操作来确保制造蓝图的新副本。这实际上可以像这样复制：

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

只要您始终使用 new 关键字调用foo。

当你执行funcA("blah").funcB("blah")时，则funcB被调用funcA返回的任何内容。 所以你必须funcA返回一些具有funcB的对象，然后调用该对象。

在jQuery的情况下，大多数jQuery函数返回jQuery对象，因此函数调用可以随心所欲地链接。 许多 jQuery 函数旨在修改返回的 jQuery 对象的内容。 因此，在您的示例中，对 html() 的调用并不"知道"传递给 $() 函数的内容。 相反，$()函数返回一个 jQuery 对象，该对象指向与给定选择器匹配的 DOM 元素。 然后，对该 jQuery 对象上的函数的进一步调用将影响这些选定的元素。

jquery 中的大多数函数返回一个包含一组元素的 jquery 对象。 html并不确切知道$()的参数，更多的是$()的结果有一组元素，这些元素是根据传递给$()的参数创建的。

但是，在您的funcA和funcB示例中，您可以轻松地返回funcA具有名为 funcB 的函数的对象。 此对象还可以包含传递给funcA的值，然后对funcB的调用也可以"知道"该值。

http://jsfiddle.net/ScENm/

function funcA(arg1) {
    var enclosedVariable= arg1;
    return {
       funcB: function () {
          alert(enclosedVariable);
       }
    };
}

这是一个快速而肮脏的例子。 ^^

funcA 获取一个参数并保存它，然后返回一个包含单个函数的对象。 它已被"封闭"，现在funcB可以访问它。

从技术上讲，您甚至不必保存它... arg1也可供funcB使用。

你应该研究链，这就是你所描述的。你可以谷歌"jQuery链接">开始。另请查看jQuery的插入教程以获取更多信息

函数没有什么特别的，你可以在对象中返回一个函数。举个简单例子：

function $() {
    return {
        html: function() {
        }
    };
}
$().html(); // You just called the function!

jQuery没有任何特别的东西。当你在 jQuery 中调用一个不返回值的函数时，它通常会返回调用它的 jQuery 对象，如下所示：

var obj = {
    doSomething: function() {
        return this;
    },
    doSomethingElse: function() {
        alert('Hi!');
    }
};
obj.doSomething().doSomethingElse(); // Alerts "Hi!"

因为同样，它只是一个对象。

链接通常是在方法应返回的对象的基础上完成的。如果object A是class A的实例，并且其中的方法返回object A则返回的对象可以再次应用于同一类，并且可以以链接方式排列。或者说class A的对象返回class B的对象，那么，返回的对象可以应用于class B的方法。

objectOfA->methodOfA(arg)->methodOfB(args);

在这种情况下，如果objectOfA->methodOfA(arg)返回class B的对象，因此可以调用class B的方法并如上所述链接。

在您的情况下，

$('div.selected').html('Blah ..')

这里$('div.selected')返回一个jquery元素对象(或对象数组(;该方法.html()可以应用，因为该方法仅适用于jquery的元素对象。它只是像其他编程语言一样链接。

在 PHP 的情况下，这种情况看起来像，

$class->method1(argument)->method(2)

在这种情况下，如果类 A 有两个方法 method1 和 method2，并且 method1 返回自己的实例，则方法 2 再次适用于它。

这也可以与函数有关。让我们假设我有一个这样的函数;

def function1(name):
    return name
def function2(arg):
    print len(name)

现在，这两个函数可以简单地链接为，

function2(function1('My Name is blah ...'))

由于 function1 返回一个值，因此值的类型必须与 function2 的输入参数匹配，这就是对象的工作方式。

相关文章：