Руководство по методу noConflict в jQuery

Как вы уже знаете, jQuery использует знак доллара ($) в качестве ярлыка или псевдонима для jQuery. Таким образом, если вы используете другую библиотеку JavaScript, которая также использует знак $ в качестве ярлыка, вместе с библиотекой jQuery на той же странице, могут возникнуть конфликты. К счастью, jQuery предоставляет специальный метод noConflict() для решения такой ситуации.

jQuery-метод noConflict()

Метод jQuery.noConflict() возвращает управление идентификатором $ обратно в другие библиотеки. Код jQuery в следующем примере (строка № 10) переведет jQuery в режим без конфликтов сразу после его загрузки на страницу и назначит новую переменную с именем $j вместо $, чтобы избежать конфликта.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>// Опредялем новую переменную для jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){ // Отображаем предупреждающее сообщение при нажатии на элемент с id foo $j("#foo").click(function(){ alert("JQuery хорошо работает с Prototype."); });
});
// Некоторый код фреймворка Prototype
document.observe("dom:loaded", function(){ // Отображаем предупреждающее сообщение при нажатии на элемент с id bar $("bar").observe("click", function(event){ alert("Prototype хорошо работает с JQuery."); });
});
</script>
</head><body> <button type="button" id="foo">Запустить код jQuery</button> <button type="button" id="bar">Запустить код Prototype</button></body>
</html>

Многие библиотеки JavaScript используют $ как имя функции или переменной, как jQuery. Вот некоторые из них: mootools, prototype, zepto и т.д.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script>jQuery.noConflict();
jQuery(document).ready(function($){ // Знак доллара здесь работает как псевдоним jQuery $("#foo").click(function(){ alert("JQuery хорошо работает с Prototype."); });
});
// Некоторый код фреймворка Prototype
document.observe("dom:loaded", function(){ // Знак доллара в документе относится к Prototype $("bar").observe("click", function(event){ alert("Prototype хорошо работает с JQuery."); });
});
</script>
</head><body> <button type="button" id="foo">Запустить код jQuery</button> <button type="button" id="bar">Запустить код Prototype</button></body>
</html>

Подключение jQuery перед другими библиотеками

Приведенные выше решения, позволяющие избежать конфликтов, основаны на загрузке jQuery после загрузки prototype.js. Однако, если вы включите jQuery перед другими библиотеками, вы можете использовать полное имя jQuery в своем коде, чтобы избежать конфликтов без вызова jQuery.noConflict(). Но в этом случае $ будет иметь значение, определенное в другой библиотеке.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script>jQuery(document).ready(function($){ // Используем полное имя функции jQuery для ссылки на jQuery jQuery("#foo").click(function(){ alert("JQuery хорошо работает с Prototype."); });
});
// Некоторый код фреймворка Prototype
document.observe("dom:loaded", function(){ // Знак доллара здесь будет иметь значение, определенное в Prototype $("bar").observe("click", function(event){ alert("Prototype хорошо работает с JQuery."); });
});
</script>
</head><body> <button type="button" id="foo">Запустить код jQuery</button> <button type="button" id="bar">Запустить код Prototype</button></body>
</html>