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

Question

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

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

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

Answer 1

Этого можно добиться, запустив вашу версию jQuery в режиме без конфликтов . Режим «без конфликта» является типичным решением для работы jQuery на странице с другими структурами, такими как prototype , и также может быть использован здесь, поскольку он по существу является пространством имен каждой версии 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 несколько избыточным!

Answer 2

Как сказал ConroyP, вы можете сделать это с 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>

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

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

Answer 3

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

Answer 4

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

var jq16 = $.noConflict(false);

Answer 5

Во второй версии объявите переменную как $ .noConflict (true). И используйте объявленную переменную вместо $, используемого в коде 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");


        });
    }