Что такое $.noConflict()
jQuery

Что такое $.noConflict()

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

Поскольку в jQuery $ — это всего лишь сокращенное название для объекта jQuery, использование символа $ не является обязательным. Для предотвращения конфликтов в jQuery предусмотрен метод noConflict(). Рассмотрим, как работает метод noConflict().

$.noConflict()

При инициализации jQuery запоминает в локальных переменных текущие значения глобальных переменных $ и jQuery. Метод $.noConflict() просто восстанавливает значения глобальных переменных из локальных. При этом он принимает один параметр, который указывает, восстанавливать ли переменную jQuery или нет.

Как это работает? Допустим, мы подключили какую-то библиотеку, использующую перемнную $, а после нее — jQuery.

До того, как инициализировать собственную глобальную переменную $, jQuery запоминает ее значение в локальной переменной:


var _$ = window.$;

При вызове noConflict, если в переменной $ содержится объект jQuery — восстанавливается предыдущее значение из переменной _$.


if ( window.$ === jQuery ) {
    window.$ = _$;
}

Метод noConflict принимает параметр deep, если он передан — будет восстановлено еще и значение переменной jQuery:


if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
}

Это может быть полезно, если вы опасаетесь, что ранее jQuery уже был подключен.

Работа с jQuery с noConflict

Как работать с jQuery без $? Во-первых, можно использовать переменную jQuery:


$.noConflict();
jQuery(document).ready(function() {
    jQuery("button").click(function() {
        jQuery("#result").text("Button clicked!");
    });
});

Во-вторых, если вам все же хочется использовать $, можно обернуть скрипт в немедленно вызываемую функцию с параметров $, значением которого будет объект jQuery.


(function($) {
    $.noConflict();
    $(function() {
        $("button").click(function() {
            $("#result").text("Button clicked!");
        });
    });
})(jQuery);

В примере выше $ — это локальная переменная в немедленно вызываемой функции.

Функция обратного вызова, которая передается в jQuery(document).ready() принимает один параметр — ссылку на объект jQuery. Из этого вытекает третий способ — работать с локальной переменной $ внутри этого обработчика:


$.noConflict();
jQuery(document).ready(function($) {
    $("button").click(function() {
        $("#result").text("Button clicked!");
    });
});

Наконец, четвертый способ — определить собственную переменную, которая будет ссылкой на объект jQuery:


var j = $.noConflict();
j(document).ready(function(){
    j("button").click(function(){
        j("#result").text("Button clicked!");
    });
});

Реализация noConflict для собственных модулей

Если вы разрабатываете собственную javascript-библиотеку, вы можете использовать глобальные переменные с неуникальными именами, что, в свою очередь, может привести к конфликтам с другим кодом. Хорошим тоном является наличие метода noConflict, который, подобно jQuery, восстановил бы предыдущее значение глобальной переменной. Рассмотрим вариант реализации такой функции.


(function(name, definition) {
    var module = definition(), 
        global = this, 
        old = global[name];
    module.noConflict = function() {
        global[name] = old;
        return module;
    };
    global[name] = module;
})('PdfExporter', function() {
    PdfExporter = (function() {
        return {
            export: function() { /* ... */ }
        };
    })();

    return PdfExporter;
});

В этом примере мы описываем модуль в виде немедленно вызываемой функции, принимающей два параметра: имя модуля и его определение. В качестве имени в примере используется ’PdfExporter’, в качестве определения — функция, возвращающая объект PdfExporter.

При выполнении эта функция запоминает объект PdfExporter в локальной переменной module, а текущее значение переменной PdfExporter в локальной переменной old. Далее объекту module добавляется функция noConflict и в глобальную переменную PdfExporter записывается значение module. В функции noConflict восстанавливается значение переменной PdfExporter из переменной old.

Использовать нашу библиотеку можно так же, как описано для jQuery, например:


var myExporter = PdfExporter.noConflict();
myExporter.export();

Немедленно вызываемая функция может также инициализировать модуль в стиле AMD или CommonJS, об этом мы поговорим подробнее отдельно.

Заключение

Мы рассмотрели, что такое метод $.noConflict, как он работает и для чего нужен. Грамотное использование noConflict позволит избежать не только конфликта переменной $ с другими библиотеками, но и конфликта версий jQuery между собой. Хорошим тоном является также добавление функции noConflict к собственным библиотекам, чтобы избежать конфликта имен.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться