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

Глобальное пространство имен

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

Очень просто! Достаточно написать:

window.$ = jQuery;

Именно так и записано в коде этой библиотеки. Эта строка присваивает свойству $ глобального объекта window ссылку на функцию с именем jQuery. Теперь имена $ и jQuery становятся глобальными синонимами (вспомним, что в клиентском JavaScript все глобальные переменные и глобальные функции являются свойствами объекта window).

Пример 02 содержит модификацию нашей учебной jQuery с учетом инструкции window.$ = jQuery.

Web-разработчики всегда стремятся уменьшить количество глобальных имён в своём коде. Ведь, любое глобальное имя становится свойством объекта window, значит, может случайно перекрыть встроенное свойство этого объекта. Кроме того, к web-странице часто прикрепляется не один скрипт, а несколько (от разных разработчиков), и вероятность конфликта имен повышается. Не говоря уже о том, что конфликт может возникнуть из-за случайного перекрытия имён в своих собственных скриптах.

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

Получается, что jQuery нельзя совместить с Prototype и другими кодами, в которых используется глобальное имя $.

На самом деле можно! Для этой цели предусмотрена специальная встроенная функция noConflict(). Вызов:

jQuery.noConflict()

заменяет ссылку window.$ (установленную изначально как window.$ = jQuery) на некую глобальную переменную _$:

window.$ = _$;

Таким образом, связь jQuery c $ разрушается, и теперь имя $ можно использовать без связи с библиотекой jQuery. Понятно, что после вызова jQuery.noConflict(), имя $ уже не будет относиться к библиотеке jQuery и придется пользоваться только именем jQuery. А если есть, ранее написанный код, в котором присутствует имя $? Или просто не хочется отказываться от этого лаконичного обозначения?

Разработчики jQuery предложили красивый трюк, позволяющий использовать имя $ в своих кодах без всяких конфликтов:

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

В приведенном выше коде записан функциональный литерал с аргументом $ (переменная $ становится локальной переменной внутри этого функционального литерала). Но мы видим не просто определение безымянной функции, но и её вызов с фактическим аргументом jQuery. Значит, внутри функционального литерала формальному аргументу $ будет соответствовать фактический аргумент jQuery. Красиво! Таким образом, мы всегда можем окружить наш код, как скобками, указанным выше литералом:

(function($) 
{
   Наш код. Формальный аргумент $ будет равен в нём 
   фактическому аргументу jQuery. 
   
   Вспомним, что имя функции в JavaScript является 
   обычной переменной, которая ссылается на код функции, 
   расположенный где-то в памяти. Переменная $, внутри 
   этой функции, будет ссылаться на ту же функцию, что и 
   переменная jQuery, которая является фактическим 
   аргументом. Так как переменная $ является локальной, 
   она не помешает работе функций с такими именами вне 
   данного функционального литерала.
})(jQuery);