Руководство по методу 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>