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

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?

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!

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

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.

mach es falsch zu arbeiten

var jq16 = $.noConflict(false);

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


        });
    }