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

Конструируем свою jQuery

	Программирование с помощью с jQuery напоминает работу на новом языке программирования, отличном от JavaScript. Но jQuery — это функция JavaScript. Магически мощная, но ничего кроме этого. Волшебство, конечно, присутствует, но обычное программистское, основанное на JavaScript-инструментарии и талантах автора.
	Чтобы с самого начала понять, как устроена эта библиотека, и рассеять иллюзорный туман, сконструируем собственную маленькую jQuery (не претендуя на полное совпадение конструкций) и опробуем её в работе.

В нашем учебном варианте в качестве селектора для отбора элементов разрешим использовать только имя тега, а обёртку дополним единственным методом setClass(nаme) для установки класса с именем name во всех отобранных элементах. Кроме того, снабдим нашу библиотеку вспомогательной функцией trim(str), которая будет выполнять усечение своего строкового аргумента (удалять начальные и конечные пробелы).

Назовем нашу функцию jQuery, как и в большой библиотеке, и приступим к её созданию.

Функция jQuery должна принимать в качестве аргумента имя тега и возвращать объект подобный массиву с набором соответствующих элементов страницы.

Это несложно сделать, применяем стандартный метод интерфейса Document модели DOM W3C:

function jQuery(selector)
{
  // Отбор элементов с заданным именем тега
  var set = document.getElementsByTagName(selector);
  return set; 
}

Но мы должны вернуть не просто набор отобранных элементов, мы должны вернуть обертку, то есть нужно снабдить этот набор методом setClass(nаme). Опишем этот метод внутри функции jQuery:

function jQuery(selector)
{
  // Отбор элементов с заданным именем тега
  var set = document.getElementsByTagName(selector);

  // Создадим обертку -- добавим метод setClass к объекту set 

  // Метод setClass(name) -- устанавливает класс c именем name
  // для всех отобранных элементов
  // --> начало описания метода
  set.setClass = function (name)   
  {
    for (var i=0; i<set.length; i++) set[i].className = name;
    return this; // Вернем обёртку из метода setClass 
                 // Вспомним, что this в функции ссылается на объект,
                 // в контексте которого она работает (то есть вернем set) 
  }
  // <-- конец описания метода
  return set; // Вернем обёртку из функции jQuery
}

Теперь объект set, возвращаемый функцией jQuery, кроме отобранных элементов будет содержать еще и метод setClass, которым этот набор можно обрабатывать.

Заметим, что мы написали замыкание. В самом деле, функция jQuery возвращает объект set. Метод setClass этого объекта описан внутри jQuery. Значит, объект вызова функции jQuery уничтожаться не будет — образуется замыкание.

Теперь вызов

jQuery("a")

вернет обернутый набор всех гиперссылок страницы. На этот набор можно воздействовать методом setClass — этот метод установит класс с заданным именем на все элементы набора:

jQuery("a").setClass("link")

Приведенная выше строка выполнит отбор всех гиперссылок страницы и установку класса с именем link во все эти элементы.

Но метод setClass возвращает тот же обернутый набор элементов, и цепочку вычислений можно продолжить. Можно, например, для первой ссылки страницы установить желтый фон:

jQuery("a").setClass("link")[0].style.background = "yellow";

Сколько всякой работы скрыто за этим коротким заклинанием!

Теперь давайте создадим «вспомогательную» функцию trim. Слово «вспомогательное» написано в кавычках, ибо trim будет являться методом функции jQuery (ещё раз вспомним, что функции в Javascript — это объекты).

// Вспомогательная функция -- усечение строки
// Эта функция определяется как метод объекта jQuery
jQuery.trim = function (str)
{
  return  str.replace(/^\s+|\s+$/g,'');
}

Теперь можно написать:

jQuery.trim("     текст      ")

Функция trim выполнит усечение строки, то есть удалит начальные и конечные пробелы и вернет строку "текст".

И вот полный код построенной библиотеки:

// --- Начало "библиотеки" -------------------------------------------
function jQuery(tagName)
{
  // Отбор элементов с заданным именем тега
  var set = document.getElementsByTagName(tagName);

  // Создадим обертку -- добавим методы к объекту set 

  // Опишем метод setClass(name) -- установить класс c именем name
  // для всех отобранных элементов 
  // --> начало описания метода
  set.setClass = function (name)   
  {
    for (var i=0; i<set.length;i++ )
      set[i].className = name;
    return this; // Вернем обёртку из метода setClass 
  }
  // <-- конец описания метода
  return set; // Вернем обёртку из функции jQuery
}

// Вспомогательная функция -- усечение строки
// Эта функция определяется как метод объекта $
jQuery.trim = function (str)
{
  return  str.replace(/^\s+|\s+$/g,'');
}
// --- Конец "библиотеки" --------------------------------------------

Пример 01 демонстрирует работу построенной библиотеки. Поработайте с этим приложением и прочитайте его коды.