26 Stimmen

Zepto Rückgriff auf jQuery

Ich verwende ZeptoJS für meine Web-App, aber ich möchte auf jQuery zurückgreifen, wenn der Browser Zepto nicht unterstützt. Da IE der einzige große Browser ist, der im Moment nicht unterstützt wird, bin ich versucht, IE zu erkennen:

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

aber ich würde es vorziehen, spezifisch Zepto-Unterstützung zu erkennen und jQuery in anderen Fällen zu verwenden. Gibt es eine Funktion Erkennung Weg, dies zu tun?

5voto

Ale Punkte 1970
<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

Dies ist die empfohlene Methode auf der offiziellen Website von zepto.js. Siehe http://zeptojs.com/#download

1voto

mckamey Punkte 17135

Während viele der vorhandenen Antworten gut funktionieren, wenn Zepto.js über eine zusätzliche Anforderung geladen wird, habe ich eine Situation, wo ich weiß, dass Zepto die meiste Zeit ausreicht, und ich möchte nur es in mit meinen Skripten verschmelzen und faul jQuery laden, wenn nötig. Ich habe einen kleinen Wrapper für Zepto wird genau das tun.

Sie läuft die "offizielle" '__proto__' in ... Test und lazy lädt jQuery, wenn es fehlschlägt. Wenn es erfolgreich ist, wird Zepto weiter geladen.

Ich habe festgestellt, dass der IE8 abstürzt, wenn Zepto überhaupt geladen ist. Dies behebt das, indem der Rest des Moduls übersprungen wird.

Im optimistischen Fall gibt es keine zusätzlichen Skriptanforderungen. Für den jQuery-Pfad, nun, diese Benutzer waren nicht gerade die schnelle Erfahrung sowieso bekommen.

1voto

Kevin Nelson Punkte 7384

Dies ist ein altes Thema, aber ich bin darauf gestoßen und war mit der Lösung insgesamt nicht zufrieden. Jemand hat in einem Kommentar oben erwähnt, dass der offizielle zepto-Test dazu führen wird, dass zepto auf FireFix 3.6 statt auf JQuery umsteigt, was ich nach Möglichkeit vermeiden möchte.

Also, mein Gedanke war... testen, ob es einige HTML5-Funktionen unterstützt UND wenn es nicht IE ist. Dies kann bedeuten, dass die größere jQuery zu mehr Browsern gehen wird, als es sollte, aber ich würde lieber "arbeiten" aufgeblähten Code zu einem schnellen Download von nichts. Wie auch immer, die isCanvasSupported()-Methode von Modernizer und die __proto__ Test, der von zepto empfohlen wurde, denke ich, dass dies eine gute Lösung sein könnte (ich hatte noch keine Gelegenheit, ihn tatsächlich zu testen):

   var isHtml5AndNotIE     = function() {
        var elem = document.createElement('canvas');
        return '__proto__' in {} && !!(elem.getContext && elem.getContext('2d'));
    };

Dann verwenden Sie einfach diese Methode in document.write() wie in den obigen Beispielen oder wo immer Sie den Pfad zu jquery/zepto definieren.

Die einzigen beiden Browser-Versionen, die ich in einem schnellen Querverweis sehen konnte, die Folgendes unterstützen * IOS Safari 3.2 (4+ wird von Zepto unterstützt) * Android 2.1 (2.2+ wird von Zepto unterstützt)

http://zeptojs.com/#platforms

http://caniuse.com/#feat=canvas

0voto

Timbo White Punkte 805

Ich mache das so:

<script type="text/javascript">
if(top.execScript){ // true only in IE
    document.write("<script src='/js/jquery.js'>\x3C/script>");
}
else{
    document.write("<script src='/js/zepto.min.js'>\x3C/script>");
}
</script>

0voto

rosell.dk Punkte 1818

Sie sollten die Messlatte ein wenig höher legen, damit nicht nur der IE8 jQuery bekommt, sondern auch andere ältere Browser. Zepto zum Beispiel erfordert Funktionen wie Array.prototype.some.

Zepto erfordert weitgehend dieselben Funktionen wie picoQuery (das eine Alternative zu Zepto ist). In picoQuery machen sie das so:

if (Array.isArray) {
   // Modern browser
   // (FF4+, IE9+, Safari 5+, Opera 10.5+, Konq 4.9+, Chrome 5+, etc)
   document.write("<script src='/js/zepto.min.js'></script>");
}
else {
   document.write("<script src='/js/jquery.js'></script>");
}

Aus den Kompatibilitätstabellen geht hervor, dass jeder Browser, der Array.isArray unterstützt, auch querySelectorAll(), addEventListener(), dispatchevent, Array.prototype.indexOf und Array.prototype.some unterstützt, die alle in Zepto verwendet werden

picoQuery beschreibt diese Wahl hier: http://picoquery.com/the_fallback

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X