Jak uruchomić różne wersje jQuery na tej samej stronie?

Question

Moja firma zakupiła produkt, który renderuje kontrolkę ASP.NET na stronie. Ta kontrolka używa jQuery 1.2.3 i dodaje do niej tag skryptu, aby się do niej odwoływać. Twórcy kontroli nie będą obsługiwać formantu, jeśli zostanie on zmodyfikowany w jakikolwiek sposób (w tym modyfikacja odnosząca się do innej wersji jQuery).

Mam zamiar rozpocząć rozwój własnej kontroli i chciałbym skorzystać z funkcji i ulepszeń prędkości jQuery 1.3. Obie te kontrolki będą musiały istnieć na tej samej stronie.

Jak mogę zezwolić zakupionej formantowi na użycie jQuery 1.2.3 i nowego niestandardowego programowania do użycia jQuery 1.3? Również z ciekawości, co by było, gdybyśmy używali dodatkowej kontroli, która wymagałaby odniesienia się do innej wersji jQuery?

Answer 1

Możesz to osiągnąć, uruchamiając swoją wersję jQuery w no-conflict mode. Tryb "Brak konfliktu" jest typowym rozwiązaniem, które pozwala jQuery pracować na stronie z innymi frameworkami, takimi jak prototype, i może być również używany tutaj, ponieważ zasadniczo tworzy przestrzeń nazw dla każdej wersji jQuery, którą ładujesz.

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

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

Ta zmiana będzie oznaczać, że każda z tych rzeczy jQuery chcesz używać będą musiały być nazywane przy użyciu jq13 zamiast $, np

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

Nie jest to idealna sytuacja, aby mieć dwie wersje działające na tej samej stronie, ale jeśli nie masz alternatywę, to powyższe metody powinno pozwolić na użycie dwóch wersjach różniących się od razu.

się także z ciekawości, co gdybyśmy byli do korzystania z dodatkowej kontroli że potrzebne do odniesienia kolejną wersję jQuery?

Jeśli potrzebne, aby dodać kolejną wersję jQuery, można poszerzyć o powyższe:

<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> 

Zmienne jq13 i jq131 by każdy może być wykorzystywane do funkcji Version specyficzne wymagają.

To ważne, że jQuery stosowane przez oryginalnego dewelopera jest ładowany ostatni - oryginalny deweloper prawdopodobnie napisał swój kod przy założeniu, że $() byłoby wykorzystując swoją wersję jQuery. Jeśli załadujesz inną wersję po ich, $ zostanie "złapany" przez ostatnią załadowaną wersję, co oznaczałoby kod oryginalnego dewelopera działający w najnowszej wersji biblioteki, czyniąc noConflicts nieco zbędnym!

Answer 2

Wygląda na to, że zamówienie nie ma znaczenia ... na przykład: http://gist.github.com/136686. Wyjście konsoli jest na górze, a wszystkie wersje wydają się znajdować we właściwych miejscach.

Answer 3

Jak powiedział ConroyP, możesz to zrobić z jQuery.noConflict, ale nie zapominaj o var podczas deklarowania zmiennej. Podoba mi się to.

<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> 

można podłączyć wszystkie $ 's do jq13 dodając (jq13) po funkcja na }).w ten sposób

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

Answer 4

W drugiej wersji zadeklaruj zmienną jako $ .noConflict (true). I użyj zadeklarowanej zmiennej w miejsce $ używanego w kodzie jquery. Proszę sprawdzić poniższy kod: Ten kod jest używany po ogłoszeniu drugiej wersji 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"); 


     }); 
    } 

Answer 5

czynią to fałszywy pracować

var jq16 = $.noConflict(false);