15. Введение в jQuery

Расширения библиотеки

Писать меньше, делать больше.

Вы уже оценили, как много умеет делать jQuery. И учтите, в этом кратком обзоре, показано далеко не всё. Просто удивительно, как много автор библиотеки (Джон Резиг) сумел уложить в такой небольшой объем.

Несмотря на содержательность jQuery, могут возникнуть ситуации (и возникают), когда её средств не хватает для решения каких-либо специализированных задач.

Конечно, мы помним, что jQuery — это всего лишь коды JavaScript, а не новый язык программирования, значит, всё, что нам в ней не хватает можно дополнить собственными кодами на JavaScript или другими библиотеками.

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

Джон Резиг (автор jQuery) учёл это пожелание и предложил отличный способ для написания собственных расширений.

Для того чтобы добавить новый метод (например, с именем metod) к обертке jQuery достаточно оформить его следующим образом:

$.fn.metod = function (аргументы)
{
  ...
  Коды нового метода обертки jQuery с именем metod.
  Ключевое слово this в этих кодах ссылается на 
  текущий обёрнутый набор  
  ...
  return this; // Возвращаем обертку, чтобы можно было продолжить 
}              // цепочку вычислений, используя "."

Итак, для создания новых методов обертки предназначен метод fn. Чтобы объявить собственный metod, нужно присвоить одноименному свойству объекта fn ссылку на функцию, которая этот метод описывает. Внутри функции ключевое слово this будет относиться к текущему обёрнутому набору. И не следует забывать возвращать из этой функции текущий обернутый набор (this), чтобы новый метод можно было использовать в цепочке вычислений наравне с другими методами jQuery.

Для того чтобы обезопасить использование имени $ внутри расширений, используют описанный ранее предохранительный прием:

(function($) 
{
  // Внутри этого блока $ относится к jQuery
  // и не вступает в конфликты с другими частями кода 
})(jQuery);

То есть общий шаблон для описания расширения metod будет иметь вид:

(function($) 
{
  // Определение нового метода обертки с именем metod
  $.fn.metod = function (аргументы)
  {
    ...
    Коды нового метода обертки jQuery с именем metod.
    Ключевое слово this в этих кодах ссылается на 
    текущий обёрнутый набор  
    ...
    return this; // Возвращаем обертку, чтобы можно было продолжить 
  }              // цепочку вычислений, используя "."
})(jQuery);

Пример

Постановка задачи. Создать метод swIMG, который уменьшает размеры всех картинок на странице в два раза, и восстанавливает их в прежних размерах, если они до этого были уменьшены методом swIMG.

Решение. Пусть уменьшение/увеличение выполняется щелчком на кнопке с id="swIMG", которая работает как переключатель. Тогда поставленная задача решается следующим кодом:

// Обработчик готовности DOM
$(function ()
{
  var key = 0;
  // Обработчик щелчка на кнопке
  $('#swIMG').click(function()
  {
     $('img').swIMG().attr('border',key=1-key);
     $(this).text(['Уменьшить','Увеличить'][key]);
  });
});

Здесь использован метод обёртки swIMG, которого нет в библиотеке jQuery. После вызова swIMG специально записан вызов стандартного метода attr для демонстрации цепочки вычислений.

Опишем метод swIMG в отдельном скриптовом файле swimg.js, который подключим к HTML обычным способом:

<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="swimg.js"></SCRIPT>
<SCRIPT type="text/javascript" src="main.js"></SCRIPT>

Вот содержимое файла swimg.js:

(function($) 
{
  // Определение нового метода обертки
  // Метод уменьшает размеры каждой картинки в обернутом ноборе 
  // или восстанавливает её в прежних размерах, если картинка уже была
  // уменьшена
  $.fn.swIMG = function ()
  {
     return this.each(function ()
     {
       // Если для картинки метод вызывается первый раз, 
       // запомнить в нестандартных атрибутах rwidth и rheight 
       // первоначальные размеры картинки, а в нестандартный атрибут
       // reduction записать значение false
       if(this.reduction == undefined)
       {
         this.rwidth    = $(this).width();
         this.rheight   = $(this).height();
         this.reduction = false;
       };
       
       if (this.reduction) // Если картинка уменьшена,
       {                   // восстановить её в прежних размерах
         this.reduction = false;
         this.width     = this.rwidth;
         this.height    = this.rheight;
       }
       else               // Иначе уменьшить картинку в размерах
       {
         this.reduction = true;
         this.width     = this.rwidth/2;
         this.height    = this.rheight/2;
       }
     });
  }  
})(jQuery);

Метод swIMG использует три нестандартных атрибута элемента IMG:

• rwidth — для хранения первоначальной ширины картинки
• rheight — для хранения первоначальной высоты картинки
• reduction — для хранения состояния картинки: true — картинка уменьшена, false — картинка в начальных размерах.

Таких атрибутов у элемента IMG нет. Но вспомним, что в объектах, которые браузер строит для элементов, атрибуты превращаются в одноименные свойства этих объектов. Значит, ничто не мешает нам определять новые свойства и хранить в них нужные значения, привязанные к конкретным объектам (вместо того, чтобы заводить глобальные переменные).

Пример 11 содержит полные коды построенного приложения.

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