Lösungen für die Koexistenz mehrerer jQuery-Versionen

Lösungen für die Koexistenz mehrerer jQuery-Versionen_jquery

WBOY

Freigeben： 2016-05-16 16:09:08

Original

1108 Leute haben es durchsucht

Wie kann man mehrere jQuery auf einer Seite koexistieren lassen? Wie jquery-1.5 und jquery-1.11.

Sie fragen sich vielleicht, warum Sie mehrere jQuery benötigen, um auf einer Seite nebeneinander zu existieren? Ist es nicht möglich, die neueste Version von jQuery direkt zu zitieren?

Die Antwort ist: Nein. Denn das wirkliche Leben ist sehr grausam. Geben Sie mir ein Beispiel:

Bestehende Websites haben bereits auf jQuery 1.5 und zugehörige Plug-ins verwiesen. Wenn Sie jQuery direkt auf die neueste Version aktualisieren, funktionieren diese Plug-Ins nicht, es sei denn, Sie können alle diese Plug-Ins aktualisieren oder warten, bis der Autor jedes Plug-Ins eine Version veröffentlicht, die die neueste Version von jQuery unterstützt.

Wenn wir nun neue Plug-Ins entwickeln oder JavaScript-Code auf Basis von jQuery schreiben möchten, wird die Verwendung der neuen Version Zeit und Aufwand sparen.

Aber die alte Version darf nicht weggeworfen werden, was soll ich tun?

Die Methode besteht darin, noConflict() von jQuery zu verwenden, um die Koexistenz mehrerer Versionen zu ermöglichen.

Wenn wir jQuery importieren, fügt jQuery nur zwei Variablen in den globalen Bereich von Fenster ein:

Code kopieren Der Code lautet wie folgt:

window.$ = window.jQuery = { jQuery-Objekt };

Gleichzeitig behält jQuery intern Verweise auf die alten window.$- und window.jQuery-Objekte bei. Wenn wir anrufen:

Code kopieren Der Code lautet wie folgt:

var $jq = $.noConflict();

window.$ wird wiederhergestellt, aber window.jQuery ist immer noch jQuery.

Wenn wir anrufen:

Code kopieren Der Code lautet wie folgt:

var $jq = $.noConflict(true);

Sowohl window.$ als auch window.jQuery werden wiederhergestellt und alles sieht so aus, als wäre jQuery nie importiert worden, außer dass jQuery über die Variable $jq verwendet werden kann.

Das Ermöglichen der Koexistenz neuer und alter Versionen von jQuery kann also wie folgt implementiert werden:

Code kopieren Der Code lautet wie folgt:

<script><br>
// Jetzt sind window.$ und window.jQuery Version 1.11:<br>
console.log($().jquery); // => '1.11.0'<br>
var $jq = jQuery.noConflict(true);<br>
// Jetzt werden window.$ und window.jQuery auf Version 1.5 wiederhergestellt:<br>
console.log($().jquery); // => '1.5.0'<br>
// Sie können über $jq<br> auf jQuery Version 1.11 zugreifen
</script>

Verwenden Sie in myscript.js $jq, um auf die 1.11-Version von jQuery zuzugreifen.

An diesem Punkt ist das Problem gelöst.

Nach der Einführung von zwei Versionen von jQuery war die Seite jedoch durcheinander. Was passiert, wenn jemand den Code nicht versteht und var $jq = jQuery.noConflict(true); löscht? Oder wenn Sie die beiden Zeilen vertauschen, die jQuery importieren, erhalten Sie am Ende nicht die richtige jQuery-Version.

Der beste Weg ist, die neue js-Datei, die wir geschrieben haben, direkt zu zitieren, ohne die Seite zu ändern:

Code kopieren Der Code lautet wie folgt:

Auf diese Weise verweisen wir in myscript.js auf die neueste Version von jQuery, und es ist uns egal, ob die Seite über jQuery verfügt oder nicht und welche Version von jQuery vorhanden ist.

Beginnen Sie mit dem Schreiben neuer und besserer Lösungen. Bestimmen Sie zunächst den Hauptteil von myscript.js:

Code kopieren Der Code lautet wie folgt:

// myscript.js

(Funktion () {

// BEGIN

// TODO: Javascript-Code hier...

// ENDE

})();

Es ist eine gute Angewohnheit, anonyme Funktionen zu verwenden, um die Verschmutzung globaler Variablen zu vermeiden und den Zugriff auf externen Code zu verhindern.

Der nächste Schritt besteht darin, den jQuery 1.11-Code direkt einzubetten:

Code kopieren Der Code lautet wie folgt:

// myscript.js

(Funktion () {

// BEGIN

/*! jQuery v1.11.1 */

​​ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?...

If(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...

},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...

      var $ = jQuery.noConflict(true);

// TODO: Javascript-Code hier...

// ENDE

})();

Der eingebettete Code ist natürlich der komprimierte Code, insgesamt 3 Zeilen, und dann hinzufügen:

Code kopieren Der Code lautet wie folgt:

var $ = jQuery.noConflict(true);

Beachten Sie, dass $ eine lokale Variable ist. Sie können im folgenden Code jederzeit auf dieses $ verweisen. Es handelt sich nicht um dasselbe Objekt wie die globale Variable $ von jQuery in anderen Versionen der Seite.

Der letzte Schritt besteht darin, zu prüfen, ob das jQuery-Protokoll es uns ermöglicht, den jQuery-Quellcode direkt in unseren eigenen JavaScript-Code einzubetten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.