Использование JQuery и Prototype на одной странице

Несколько моих страниц используют как JQuery, так и Protoype. Поскольку я обновился до версии 1.3 JQuery, это, по-видимому, вызывает проблемы, потому что обе библиотеки определяют функцию с именем «$».

JQuery предоставляет функцию noConflict(), которая передает контроль над $ другим библиотекам, которые могут ее использовать. Итак, похоже, мне нужно просмотреть все мои страницы, которые выглядят так:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>

и измените их, чтобы они выглядели так:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

Затем я смогу использовать «$» для Prototype и «$j» (или «jQuery») для JQuery. Я не совсем доволен дублированием этих двух строк кода на каждой релевантной странице и ожидаю, что в какой-то момент кто-то, вероятно, забудет добавить их на новую страницу. Я бы предпочел иметь возможность сделать следующее

  • Создайте файл jquery-noconflict.js, который «включает» jquery.js и две строки кода, показанные выше.
  • Импортировать jquery-noconflict.js (вместо jquery.js) на все мои страницы JSP/HTML

Однако я не уверен, можно ли включить один файл JS в другой, как я описал? Конечно, альтернативное решение состоит в том, чтобы просто добавить 2 строки кода выше в jquery.js напрямую, но если я это сделаю, мне нужно будет не забывать делать это каждый раз, когда я обновляю JQuery.


javascript jquery prototypejs
person Dónal    schedule 16.01.2009    source источник
comment
Ответ, который я предоставил, работает для вас?   -  person PrimosK    schedule 16.01.2012
comment
Не знаю, прошло 3 года с тех пор, как я задал этот вопрос...   -  person Dónal    schedule 16.01.2012
comment
Хорошо .. :) Я пропустил это .. :) Но я думаю, что принцип правильный, поскольку я попробовал это...   -  person PrimosK    schedule 16.01.2012
comment
Очевидно, это старо, но у меня была ситуация, когда мне пришлось изменить 5 строк кода в 63 html-файлах (я не создавал веб-сайт). Некоторая замена регулярных выражений и замена в файлах сделали свое дело за несколько секунд. Notepad ++ сделает это в ограниченной степени, а возвышенный текстовый редактор сделал это как чемпион.   -  person David Hobs    schedule 29.04.2012
comment
@DavidHobs: +1 за возвышенное! Это лучшее, что есть после нарезанного хлеба!   -  person ClarkeyBoy    schedule 07.06.2013

Ответы (12)


arrow_upward
19
arrow_downward

В настоящее время вы можете сделать что-то вроде этого:

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

Затем используйте jQuery как $j() и Prototype $().

person jmonteiro    schedule 30.10.2011
comment
Это было очень полезно для меня в аналогичной проблеме. Спасибо, jmonteiro :) - person michaelmcgurk; 01.11.2011

arrow_upward
5
arrow_downward

Казалось бы, самым простым ответом было бы стиснуть зубы и включить свои строки noConflict. Конечно, если ваши страницы не используют общий заголовок, это решение может быть не лучшим.

person Sampson    schedule 16.01.2009

arrow_upward
5
arrow_downward

Это решение работало нормально:

jQuery.noConflict();
var $j = jQuery;

Теперь используйте $j вместо $ для вашего кода jQuery, например:

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});
person AJCE    schedule 04.09.2010

arrow_upward
3
arrow_downward

Я прошел через это какое-то время. Это очень раздражает, и в конце концов я решил отсеять все свои старые вещи из Prototype и заменить их на jQuery. Мне нравится, как Prototype справляется с некоторыми задачами Ajax, но это не стоило того, чтобы поддерживать все бесконфликтные вещи.

person Nick Van Brunt    schedule 16.01.2009
comment
+1 Всегда полезно сокращать количество используемых фреймворков. Не только с точки зрения конфликтов, но и с точки зрения облегченного события приложения, если оно требует некоторого рефакторинга для устранения прототипа. - person acme; 28.06.2012

arrow_upward
2
arrow_downward

Просто как примечание для других, которые наткнулись на это. Решения описаны здесь (с указанием прототипа): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

person Nux    schedule 05.09.2011

arrow_upward
2
arrow_downward

Не могли бы вы просто включить код jQuery = noConflict() в исходный файл jquery.js? Почему это должно быть определено именно так?

person Chris    schedule 27.10.2009

arrow_upward
1
arrow_downward

Ваш jquery-noconflict.js должен выглядеть так (убедитесь, что все находится в одной строке):

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

... и тогда ваше включение (как вы уже указали) должно выглядеть так:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

Я думаю, что это решение решает все ваши требования.

person Community    schedule 10.01.2012

arrow_upward
1
arrow_downward 

<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

or

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

ИЗМЕНИТЬ:

Я пробовал это предложение, но последние 2 строки вызывают ошибку

jQuery is not defined
person jacobangel    schedule 16.01.2009
comment
Вам нужно указать обратный вызов, когда скрипт загружается для запуска кода отсутствия конфликта... просто выполните .appendChild(scripty) scripty.onload = setNoconflict; функция setNoconflict(){ jQuery.noConflict(); $j = jQuery; } - person CodeJoust; 27.10.2009
comment
@jacobangel ваш первый пример работает, но я удалил опечатку (см. diff) и внес исправление: важно закрыть тег script после document.write(..) и открыть новый, где находится jQuery.noConflict(). В противном случае jQuery не определен, потому что document.write добавляется jQuery-скрипт после текущего блока скрипта. - person acme; 02.07.2012

arrow_upward
1
arrow_downward

Вы можете сначала вызвать jquery, а затем установить

var $j = jQuery;

В этом случае прототип возьмет на себя управление $.

Или вы можете просто обратиться к jQuery, используя полное имя функции jQuery (jQuery).

person RobKohr    schedule 20.05.2009

arrow_upward
0
arrow_downward

Используйте Prototype ниже jQuery следующим образом:

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>
person Curzon Rahman    schedule 25.05.2010

arrow_upward
0
arrow_downward

Если бы я был на вашем месте, я бы поместил свой неконфликтный код во включаемый файл JavaScript, как вы высказали мнение выше, а затем придумал бы какой-то процесс, в котором я бы устанавливал эти вещи, которые мне нужно включить на все мои страницы в одном центральном месте. . Если вы работаете с прямыми HTML-файлами и у вас нет возможности создавать шаблоны/скрипты на стороне сервера для того, что включается в документ, всегда есть возможность выполнить включение на стороне сервера.

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

person Billy Gray    schedule 16.01.2009

arrow_upward
0
arrow_downward

Вам нужно загрузить его в свой public/javascript/application.js

jQuery.noConflict();

var $j = jQuery;

Это также хорошая статья, которая может быть полезной.

Совместная работа JQuery и Prototype

person kkampen    schedule 17.02.2011