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

  (function($) { // Анонимная функция с одним параметром $
   // Здесь находится реализация расширения
  }(jQuery)); // Вызвать функцию с объектом jQuery в виде аргумента

• Если метод расширения не должен возвращать какое-то свое значение, он должен возвращать объект jQuery, чтобы этот метод можно было использовать в цепочках вызовов. Обычно этот объект передается методам в виде ссылки this, которую можно просто вернуть вызывающей программе. Метод в примере выше завершается строкой return this;. Некоторые методы можно немного сократить (и сделать их сложнее для понимания), используя еще один распространенный прием: возвращая результат метода each. Например, методprintln мог бы содержать программный код return this.each(function {...});

• Если метод расширения принимает более двух параметров или параметров настройки, дайте пользователю метода передавать параметры в форме объекта (как мы видели на примере метода animate в разделе 19.5.2 и функции jQuery.ajax в разделе 19.6.3).

• Не засоряйте пространство имен jQuery лишними методами. Правильно оформленные расширения для библиотеки jQuery определяют минимальное количество методов, образуя непротиворечивый и удобный прикладной интерфейс. Обычно расширения jQuery определяют в объекте jQuery.fn единственный метод. Этот метод принимает в первом аргументе строку и интерпретирует ее как имя функции, которой следует передать остальные аргументы. Если расширение определяет единственный метод, его имя должно совпадать с именем расширения. Если необходимо определить более одного метода, в именах методов следует использовать имя расширения в качестве префикса.

• Если расширение привязывает обработчики событий, их следует поместить в пространство имен событий (раздел 19.4.4). В качестве имени пространства имен следует использовать имя расширения.

• Если расширение использует метод data для связывания данных с элементами, все данные следует помещать в единственный объект и хранить его как единственное значение, дав ему имя, совпадающее с именем расширения.

• Файл с программным кодом расширения должен иметь имя в формате «jquery.plugin.js», где подстроку «plugin» следует заменить на имя расширения.

Расширения могут определять новые вспомогательные функции, добавляя их в сам объект jQuery. Например:

  // Этот метод выводит свои аргументы (с помощью метода расширения println)
  // в элемент с атрибутом id= "debug". Если такой элемент отсутствует, он будет
  // создан и добавлен в документ.
  jQuery.debug = function {
   var elt = jQuery("#debug"); // Отыскать элемент #debug
   if (elt.length == 0) { // Создать, если он отсутствует
   elt = jQuery("<div id='debug'><h1>Debugging Output</h1></div>");
   jQuery(document.body). append(elt);
   }
   elt.println.apply(elt, arguments); // Вывести в него аргументы
  };

Помимо создания новых методов можно также расширять и другие части библиотеки jQuery. В разделе 19.5, например, мы узнали, что имеется возможность добавлять новые имена, определяющие продолжительность визуальных эффектов (вдобавок к «fast» и «slow»), создавая новые свойства в объекте jQuery.fx.speeds, и добавлять новые функции переходов, включая их в объект jQuery.easing. Более того, с помощью расширений можно даже добавлять новые возможности в механизм селекторов библиотеки jQuery! Например, можно определить новые псевдоклассы фильтров (такие как :first и :input), добавив свойства в объект jQuery. ехрг[':']. Ниже приводится пример определения нового фильтра :draggable, который возвращает только элементы с атрибутом draggable=true:

  jQuery.expr[draggable = function(e) { return e.draggable === true; };

Добавив этот фильтр, мы сможем выбирать доступные для буксировки изображения вызовом $("img:draggable") вместо более длинного $("img[draggable=true]").

Как можно заметить в примере выше, функции фильтра передается элемент DOM - кандидат на выбор. Она должна вернуть true, если элемент соответствует фильтру, и false - в противном случае. Многие нестандартным фильтрам достаточно одного аргумента с элементом, но в действительности им передается четыре аргумента. Во втором аргументе передается целочисленный индекс, определяющий позицию элемента в массиве кандидатов. Этот массив передается в четвертом аргументе, но ваша функция фильтра не должна модифицировать его. В третьем аргументе передается весьма интересное значение: это массив результатов вызова метода .ехес объекта RegExp. В четвертом элементе этого массива (с индексом 3) хранится значение, переданное псевдоклассу фильтра в круглых скобках (если оно имеется). Из этого значения удаляются все скобки и кавычки, и остается только строка. Например, ниже показано, как можно было бы реализовать псевдокласс :data(x), возвращающий true только для элементов, имеющих атрибут data-x (раздел 15.4.3):

  jQuery.ехрг[data = function(element, index, match, array) {
   // Примечание: В IE версии 7 и ниже метод hasAttгibute отсутствует
   return element.hasAttribute("data-" + match[3]):
  };

19.10. Библиотека jQuery Ul

Функциональные возможности, поддерживаемые библиотекой jQuery, сосредоточены на методах для работы с деревом DOM, стилями CSS, обработчиками событий и поддержки архитектуры Ajax. Все вместе это является отличным фундаментом для построения высокоуровневых абстракций, таких как виджеты пользовательского интерфейса, которые предоставляет библиотека jQuery UI. Полный охват возможностей библиотеки jQuery UI выходит далеко за рамки этой книги, и все, что нам доступно, - это краткий обзор. Саму библиотеку и документацию к ней можно найти на сайте http://jqueryui.com.

Как следует из ее имени, библиотека jQuery UI определяет множество виджетов пользовательского интерфейса: поля ввода с функцией автодополнения, элементы выбора даты, многостраничные виджеты и вкладки для организации информации, движки и индикаторы хода выполнения операции для визуального представления числовых значений и модальные диалоги для срочного оповещения пользователя. В дополнение к этим виджетам библиотека jQuery UI реализует более универсальные «механизмы взаимодействий», позволяющие легко сделать любой элемент документа буксируемым, изменяющим размеры, выбираемым или сортируемым. Наконец, библиотека jQuery UI определяет множество новых методов визуальных эффектов (включая возможность изменять цвет) вдобавок к тем, что предлагаются самой библиотекой jQuery, и добавляет множество новых функций переходов.

Библиотеку jQuery UI можно представить как пакет расширений для библиотеки jQuery, помещенных в один файл. Чтобы воспользоваться библиотекой jQuery UI, достаточно просто подключить ее к веб-странице после подключения основной библиотеки jQuery. На странице Download (Загрузка), на сайтеможно выбрать компоненты, которые предполагается использовать, и сконструировать собственную версию библиотеки, что поможет вам сократить время загрузки ваших страниц в сравнении со случаем использования полной версии библиотеки jQuery UI.

Библиотека jQuery UI поддерживает темы оформления, которые реализуются в виде файлов CSS. То есть помимо загрузки в ваши страницы программного кода библиотеки jQuery UI вам также придется подключить файл CSS с выбранной темой оформления. На сайте библиотеки jQuery UI имеется множество готовых тем оформления, а также страница «ThemeRoller», позволяющая настраивать и загружать собственные темы оформления.

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