JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

$("div").css("border"', "solid black 1рх”).find("р").addClass("highlight”);

Если вам когда-нибудь потребуется вручную определить множество выбранных элементов и обеспечить его совместимость с методом

end

, передайте новое множество элементов в виде массива или в виде объекта, подобного массиву, методу

pushStack.

Указанные элементы будут преобразованы в новое множество выбранных элементов, а предыдущее множество будет помещено в стек, откуда его можно будет извлечь вызовом метода

end:

var sel = $("div”); //

Выбрать все <div>

sel.pushStack(document.getElementsByTagName("p")); // Заменить его множеством

// всех элементов <р>

sel.end; // Восстановить множество элементов <div>

Теперь, когда мы познакомились с методом

end

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

andSelf

возвращает новый объект

jQuery

, включающий все элементы из текущего множества выбранных элементов плюс все элементы (за исключением дубликатов) из предыдущего множества. Метод

andSelf

действует подобно методу

add

и для него больше подошло бы имя «addPrev». В качестве примера рассмотрим следующий вариант реализации предыдущего примера: он выделяет цветом элементы

<р>

и вмещающие их элементы

<div>

и затем добавляет рамки к элементам

<div>:

$("div").find("р").andSelf. // Отыскать в <div> и объединить их

addClass("highlight"). // Выделить их все цветом

end.end. // Вытолкнуть со стека дважды до $("div")

css("border", "solid black 1px"); // Добавить рамки к элементам <div>

19.9. Расширение библиотеки jQuery с помощью модулей расширений

Библиотека jQuery написана так, что позволяет легко добавлять в нее новые функциональные возможности. Модули, добавляющие новые функциональные возможности, называются расширениями (plug-in), большое количество которых можно отыскать на сайтеРасширения для библиотеки jQuery являются обычными файлами с программным кодом на языке JavaScript, и, чтобы задействовать их в своих веб-страницах, достаточно просто подключить их с помощью элемента

<script>,

как любую другую библиотеку на языке JavaScript (разумеется, расширения должны подключаться после подключения самой библиотеки jQuery).

Создание собственных расширений для библиотеки jQuery является почти тривиальной задачей. Вся хитрость заключается в объекте-прототипе

jQuery.fn

, который является прототипом для всех объектов

jQuery

. Если добавить новую функцию в этот объект, она превратится в метод объекта

jQuery

. Например:

jQuery.fn.println = function {

// Объединить все аргументы в одну строку, разделив их пробелами

var msg = Array.prototype.join.call(arguments, " ");

// Обойти в цикле все элементы в объекте jQuery

this.each(function {

//

В конец каждого из них добавить строку с простым текстом и <br/>.

jQuery(this).append(document.createTextNode(msg)).append("<br/>");

});

// Вернуть объект jQuery, чтобы обеспечить возможность составления цепочек

return this;

};

Определив эту функцию

jQuery.fn.println

, мы получаем возможность вызывать метод

println

относительно любого объекта jQuery, как показано ниже:

$( "#debug").println("x = ”, х, у = ", у);

jQuery.fn

постоянно добавляются новые методы. Если обнаружится, что приходится «вручную» выполнять обход элементов в объекте

jQuery

с помощью метода

each

и выполнять над ними некоторые операции, - это повод задуматься о необходимости реструктуризации программного кода, чтобы переместить вызов метода

each

в дополнительный метод. Если при создании такого метода следовать приемам модульного программирования и соблюдать некоторые соглашения, принятые в библиотеке jQuery, этот дополнительный метод можно назвать расширением и поделиться им с другими. Ниже приводится перечень соглашений, которым необходимо следовать при создании расширений для библиотеки jQuery:

• Не полагайтесь на идентификатор

: подключающая страница может вызывать функцию

jQuery.noConflict

, после чего

уже не будет синонимом функции

jQuery

. В коротких расширениях, как в примере выше, можно просто использовать имя

jQuery

вместо

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

jQuery

в виде аргумента и принимать это значение в параметре с именем $:

(function($) { // Анонимная функция с одним параметром $

// Здесь находится реализация расширения

}(jQuery)); // Вызвать функцию с объектом jQuery в виде аргумента

• Если метод расширения не должен возвращать какое-то свое значение, он должен возвращать объект

jQuery

, чтобы этот метод можно было использовать в цепочках вызовов. Обычно этот объект передается методам в виде ссылки

this

, которую можно просто вернуть вызывающей программе. Метод в примере выше завершается строкой

return this;

. Некоторые методы можно немного сократить (и сделать их сложнее для понимания), используя еще один распространенный прием: возвращая результат метода

each.

Например, методprintln
мог бы содержать программный код

return this.each(function {...});