Почему я могу запускать несколько функций в одной строке на одном объекте jQuery?

Ответ 1

Это называется chaining и помогает вам создать свободно интерфейс. Каждая функция возвращает ссылку на текущий экземпляр jQuery, поэтому вы можете связать вызовы вместе.

Сначала вы создаете экземпляр jQuery с помощью $('.element'), который возвращает insance объекта jQuery; он по существу похож на конструктор. Затем каждая функция-член объекта jQuery возвращает ссылку на this, которая в основном является экземпляром для этой функции. Поэтому вместо этого:

var jQueryObj = $(".element");
jQueryObj.fadeOut();
jQueryObj.delay(500);
jQueryObj.fadeIn();

Вы можете сделать все это в одной строке, потому что каждая функция выглядит более или менее (это очень простой пример):

function fadeOut() {
   //jQuery code
   //...

   return this;
}

Важно отметить, что не все функции jQuery являются цепями; некоторые не возвращают ссылку на экземпляр jQuery, и поэтому вы не можете их связать. Примеры включают .html(), .text() и .val(). Они возвращают фактический контент, который вы хотите (например, HTML, текст или значение элемента ввода). В этих случаях нецелесообразно цепочки.

Вот очень простой пример, показывающий, как работает цепочка:

var Starship = function() {
    this.name = "USS Enterprise";
    this.registry = "NCC-1701";
    this.shipClass = "Constitution";
};

Starship.prototype.name = function(name) {
    this.name = name;
    return this;
};

Starship.prototype.registry = function(registry) {
    this.registry = registry;
    return this;
}

Starship.prototype.shipClass = function(shipClass) {
    this.shipClass = shipClass;
    return this;
}

Starship.prototype.print = function() {
    console.log(this.name + " " + this. registry + " " + this.shipClass);
}

Теперь вы можете создать такой экземпляр:

var starship = new Starship()
    .name("USS Enterprise")
    .registry("NCC-1701-E")
    .shipClass("Sovereign");

Затем вы также можете вызвать starship.print(), но обратите внимание, что он не возвращает this, что означает, что после этого вы не можете ничего связать.

Документация jQuery перейдет к тому, какие методы являются целыми, а какие нет. Если в документации указано, что функция возвращает jQuery, тогда она является цепной; иначе это не так. Также обратите внимание, что некоторые методы могут быть связаны в зависимости от того, какие параметры переданы. Например, функция .attr, которая позволяет вам устанавливать атрибут, привязывается только при установке атрибута через .attr(attrName, attrValue). Когда вы отправляете только один аргумент (.attr(attrName)), он возвращает значение атрибута и, следовательно, не связывается с цепочкой.

Ответ 2

Загрузите jQuery сайт в свой браузер и нажмите Документация API. Каждая функция имеет таблицу, содержащую оператор возвращает. Если он говорит это:

... вы можете использовать цепочку.

В противном случае вы не можете, например:

В некоторых методах тип возвращаемого значения зависит от переданных параметров:

Ответ 3

Это выполняется с использованием шаблона проектирования, известного как " Fluent Interface". Он также известен как "цепочка".

ДЛЯ ПРИМЕРА:

var Car = function() {

        var speed, color, doors;

        this.setSpeed = function(speed) {
                this.speed = speed;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setColor = function(color) {
                this.color = color;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setDoors = function(doors) {
                this.doors = doors;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

};

// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);

// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);

Ответ 4

Как указано в @vivinpaliath, это называется цепочкой.

Это работает, потому что почти каждый метод в jQuery возвращает ссылку на исходный объект (или в нескольких случаях - отредактированный объект).

Вы можете связать любые встроенные методы, за исключением методов, возвращающих определенные значения.

Примерами таких могут служить css ( "cssProperty" ), attr ( "атрибут" ), prop ( "свойство" ), html(), text() и val()

Здесь хорошая статья о цепочке jQuery

Ответ 5

Итак, вы говорите о цепочке методов. Содержимое этой ссылки объясняет, что цепочка методов очень хорошо и вкратце с соответствующим примером. Внутренняя, основная и существенная логика, лежащая в основе цепочки методов,

Типичным способом включения цепочки методов является возврат текущего объекта в конце каждой функции