Как запустить разные версии jQuery на одной странице?

моя компания приобрела продукт, который оказывает ASP.NET управление на странице. Этот элемент управления использует jQuery 1.2.3 и добавляет на страницу тег сценария для ссылки на него. Разработчики не будут поддерживать использование элемента управления, если он каким-либо образом изменен (включая изменение ссылаться на другую версию jQuery).

Я собираюсь начать разработку собственного управления и хотел бы использовать функции и улучшения скорости jQuery 1.3. Оба эти элемента управления нужно будет существовать на той же странице.

Как я могу разрешить купленному элементу управления использовать jQuery 1.2.3 и новую пользовательскую разработку для использования jQuery 1.3? Также из любопытства, что, если бы мы использовали дополнительный элемент управления, который должен был ссылаться на еще одну версию jQuery?

5 68
javascript asp.net-mvc jquery

5 ответов:

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

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

это изменение будет означать, что любой материал jQuery, который вы хотите использовать, должен быть вызван с помощью jq13, а не $, например,

jq13("#id").hide();

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

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

Если вам нужно добавить еще одну версию jQuery, вы можете расширить выше:

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

переменные jq13 и jq131 будет ли каждый из них использоваться для конкретных версий функций, которые вам требуются.

важно jQuery, используемый оригинальным разработчиком, загружается последним - оригинальный разработчик, вероятно, написал свой код в предположении, что $() будет использовать их версию jQuery. Если вы загружаете другую версию после их, то $ будет "схвачен" последней версией, которую вы загружаете, что будет означать исходный код разработчика, работающий на последней версии библиотеки, рендеринг noConflicts несколько излишним!

99

как сказал Конройп вы можете сделать это с jQuery.noConflict но не забывай var при объявлении переменной. Вроде этого.

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

вы можете подключить все $ ' s к jq13, добавив (jq13) после функции }). вот так

(function($) {
 ... 
})(jq13);
24

кажется, что порядок не имеет значения... например:http://gist.github.com/136686. вывод консоли находится вверху, и все версии, похоже, находятся в нужных местах.

2

сделать его ложным для работы

var jq16 = $.noConflict(false);
1

во второй версии объявите переменную как $.noConflict(правда). И используйте объявленную переменную вместо$, используемого в коде jquery. Пожалуйста, проверьте ниже код : этот код используется после объявления второй версии jquery:

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) {

        var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
        var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
        $ddl.select2();
        $ddl1.select2();

        $ddl.bind("change keyup", function () {
            $ddl.fadeIn("slow");


        });

        $ddl.bind("change keyup", function () {
            $ddl1.fadeIn("slow");


        });
    }
0