Wie führe ich verschiedene Versionen von jQuery auf derselben Seite aus?

68

Mein Unternehmen hat ein Produkt gekauft, das ein ASP.NET-Steuerelement auf der Seite darstellt. Dieses Steuerelement verwendet jQuery 1.2.3 und fügt der Seite ein Skript-Tag hinzu, um darauf zu verweisen. Die Entwickler des Steuerelements unterstützen die Verwendung des Steuerelements nicht, wenn es in irgendeiner Weise geändert wurde (einschließlich Änderungen, um auf eine andere Version von jQuery zu verweisen).

Ich bin im Begriff, mit der Entwicklung meiner eigenen Steuerung zu beginnen und möchte die Funktionen und Geschwindigkeitsverbesserungen von jQuery 1.3 nutzen. Diese beiden Steuerelemente müssen auf derselben Seite vorhanden sein.

Wie kann ich dem gekauften Steuerelement erlauben, jQuery 1.2.3 und neue benutzerdefinierte Entwicklungen zur Verwendung von jQuery 1.3 zu verwenden? Was wäre, wenn wir aus Neugier ein zusätzliches Steuerelement verwenden würden, das auf eine weitere Version von jQuery verweisen müsste?

Alex Angas
quelle
1
Gibt der Autor des Steuerelements keine Updates frei? Oder ist die neuere Version nicht kompatibel? Es ist sehr seltsam, dass ein kommerzieller Drittanbieter von Steuerelementen ein Steuerelement erstellt hat, das für eine bestimmte Version eines Open-Source-Javascript, das häufig aktualisiert wird, fest codiert ist.
BlackMael
Ich kann nicht sehen, wie Sie nicht geschraubt werden, wenn Sie mehrere Serversteuerelemente verwenden, die auf festen Versionen von jQuery bestehen.
BlackMael
1
Nicht jeder Plugin-Autor aktualisiert / kann seinen Code regelmäßig aktualisieren. Auch ich war mit diesem Problem konfrontiert, wechselte dann aber zu einem häufig aktualisierten, Community-gesteuerten Äquivalent.
Robin Maben
Wir haben ein ähnliches Problem, das sich aus einer Portalumgebung ergibt. Jeder Portlet-Entwickler kann / wird die Version von jQuery bündeln, mit der er seine Anwendung / sein Portlet getestet hat, und diese werden meistens nicht synchronisiert.
Stefan

Antworten:

100

Sie können dies erreichen, indem Sie Ihre Version von jQuery im konfliktfreien Modus ausführen . Der Modus "Kein Konflikt" ist die typische Lösung, um jQuery auf einer Seite mit anderen Frameworks wie dem Prototyp zum Laufen zu bringen. Er kann auch hier verwendet werden, da er im Wesentlichen jede Version von jQuery benennt, die Sie laden.

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

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

Diese Änderung bedeutet , dass jede der jQuery Sachen , die Sie verwenden möchten , genannt werden müssen unter Verwendung jq13als vielmehr $, zB

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

Es ist keine ideale Situation, wenn beide Versionen auf derselben Seite ausgeführt werden. Wenn Sie jedoch keine Alternative haben, sollten Sie mit der oben beschriebenen Methode zwei unterschiedliche Versionen gleichzeitig verwenden können.

Was wäre, wenn wir aus Neugier ein zusätzliches Steuerelement verwenden würden, das auf eine weitere Version von jQuery verweisen müsste?

Wenn Sie eine weitere Version von jQuery hinzufügen müssen, können Sie Folgendes erweitern:

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

Die Variablen jq13und werden jq131jeweils für die von Ihnen benötigten versionenspezifischen Funktionen verwendet.

Es ist wichtig, dass die vom ursprünglichen Entwickler verwendete jQuery zuletzt geladen wird. Der ursprüngliche Entwickler hat seinen Code wahrscheinlich unter der Annahme geschrieben, $()dass er seine jQuery-Version verwenden würde. Wenn Sie eine andere Version nach ihrer laden, $wird diese von der zuletzt geladenen Version "gepackt", was bedeuten würde, dass der ursprüngliche Entwicklercode auf der neuesten Bibliotheksversion ausgeführt wird, wodurch die Version noConflictsetwas überflüssig wird!

ConroyP
quelle
11
Ist die Bestellung wirklich wichtig? Ist es nicht der Sinn der noConflict-Funktion, die Variable "$" an den ursprünglichen Eigentümer zurückzugeben? Bestellung sollte nicht wichtig sein. Wichtig ist jedoch, dass jQuery.noConflict unmittelbar nach dem Laden der Version von jQuery aufgerufen wird , die in den Nicht-Konflikt-Modus wechseln soll.
Mtyaka
4
Mtyaka ist genau richtig. Wenn Sie den Parameter 'true' übergeben, müssen Sie sich keine Gedanken über die Reihenfolge machen, in der Sie die Skripte laden. Durch die Übergabe von 'true' an noconflict wird sowohl die Variable 'jQuery' als auch die Variable '$' auf den ursprünglichen Wert zurückgesetzt. Ohne sie wird nur '$' wiederhergestellt.
Muhd
24

Wie gesagt, ConroyP können Sie dies jQuery.noConflicttun, aber vergessen Sie nicht, varwenn Sie eine Variable deklarieren. So was.

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

Sie können alle $ mit jq13 verbinden, indem Sie (jq13) nach den Funktionen hinzufügen }). so was

(function($) {
 ... 
})(jq13); 
Tigran Tokmajyan
quelle
5
Var nicht zu haben ist hier keine große Sache. Ohne var definierte Variablen haben einen globalen Gültigkeitsbereich. Sie möchten, dass das jq13-Objekt einen globalen Gültigkeitsbereich hat.
Alan Storm
3
Implizite Globale sind eine schlechte Codierungspraxis. Wenn Sie sicher sind, dass Sie eine globale Variable möchten, sollten Sie sie im globalen Bereich mit einem var-Schlüsselwort deklarieren oder die Variable manuell an das Fensterobjekt anhängen, wenn Sie sich in einer Funktion befinden. Siehe javascript.crockford.com/code.html#variable%20declarations
Muhd
2

Es scheint, dass die Reihenfolge keine Rolle spielt ... zum Beispiel: http://gist.github.com/136686 . Die Konsolenausgabe befindet sich oben und alle Versionen scheinen an den richtigen Stellen zu sein.

Aaron Gibralter
quelle
1

mach es falsch zu arbeiten

var jq16 = $.noConflict(false);
Auferstanden
quelle
0

In der zweiten Version deklarieren Sie eine Variable als $ .noConflict (true). Verwenden Sie die deklarierte Variable anstelle von $, das im Abfragecode verwendet wird. Bitte überprüfen Sie den folgenden Code: Dieser Code wird nach der Deklaration der zweiten Version von jquery verwendet:

<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");


        });
    }
Manish Ojha
quelle