2012-11-30 11 views
7

Ich habe Seiten gesehen, die anweisen oder fragen, wie man von Zepto auf jQuery zurückgreift (speziell für IE), wie here on SO und hier auf Zepto.js official page.
Ich habe auch Beispiele zu Fallback von Google-Hosted jQuery zu einer lokalen Site jQuery gesehen, wie in Modernizr.load doc page.Wie man von Zepto, zu Google CDN jQuery, zu lokalem jQuery fallback?

Meine Frage ist, wie lege ich die zwei Dinge zusammen? Möglicherweise auch ohne Verwendung von Modernizr.load, nur unter Verwendung der richtigen <script> Blöcke?

Hier ist, was ich gefunden habe, aber es scheint, dass IE nie die von Google gehostete Version findet. Außerdem bin ich mir nicht sicher, ob die Zepto = jQuery Zuweisung richtig funktioniert.

<script> 
    document.write('<script src=' + 
     ('__proto__' in {} ? 
      'js/vendor/zepto.min' : 
      'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min') + 
     '.js><\/script>'); 
</script> 
<script> 
    if (window.jQuery) { 
     window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    } 
    else 
    { /* here jQuery could be rightly undefined because Zepto is loaded, 
     so this could be wrong. */ 
     document.write('<script src=' + 
      'js/vendor/jquery-1.8.0.min' + 
      '.js><\/script>'); 
    } 
</script> 
<script> 
    if (window.jQuery) { 
     window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    } 
    else 
    { 
     /* same problem as before */ 
     console.error('Zepto nor jQuery available!'); 
    } 
</script> 

Gibt es einen besseren Weg?

TA

bearbeiten

Nach @Ashfame Antwort, ist es das, was ich verwendet habe:

<!-- Load local Zepto.js or (as a fallback) jQuery from Google CDN or (as a fallback) local jQuery --> 
<script> 
    document.write('<script src="' + ('__proto__' in {} ? 
     'js/vendor/zepto' : 
     'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery') + 
     '.min.js"><\/script>') 
</script> 
<script> 
    window.Zepto || window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>'); 
</script> 

ich nicht die protokoll weniger/Schema-weniger-URL von Google CDN als für verwenden könnte Irgendein Grund hat es auf meinem lokalen IE9 nicht funktioniert (es wartet viel, dann fällt immer wieder auf local).

Ich habe keine Aliasing Zepto mit jQuery: nur $ in JS-Code verwendet.

Ich habe anscheinend kein Problem im Zusammenhang mit jQuery loading out of order w.r.t. abhängiger Code.

+0

Ich habe auch versucht mit '//ajax.googleapis.com/...', das ist ohne Protokoll Präfix – superjos

+0

Versucht auch mit [dieses Snippet] (https://gist.github.com/3325940) wahrscheinlich von Benutzer @ Sébastien Grosjean - ZenCocoon: Es schien gut zu funktionieren, aber dann wollte ich weder das Cloudflare CDN, noch irgendein anderes Zepto CDN verwenden. – superjos

+0

Auch versucht mit 'Modernizr.load', aber irgendwie schien es ein bisschen zu viel für den Zweck. Ich könnte mich natürlich irren. – superjos

Antwort

6

Aus Gründen diese Technik auszuprobieren, würde ich dies zuerst versuchen:

ich diese entlang der Linie schnell geschrieben, wie HTML5 Boilerplate lädt einen lokalen Rückfall, wenn jQuery CDN unten ist.

Dies könnte nicht funktionieren, aber ich sehe keinen Grund, warum es jetzt nicht sollte. Willst du es drehen?

<script>document.write('<script src="' + ('__proto__' in {} ? 'cdn/zepto.min' : 'cdn/jquery.min') + '.js">\x3Cscript>');</script> 
<script>window.Zepto || window.jQuery || document.write('<script src="cdn/jquery.min.js">\x3C/script>')</script> 
<script>window.Zepto || window.jQuery || document.write('<script src="local/jquery.min.js">\x3C/script>')</script> 

Der einzige Fall, es nicht gut wird handhaben ist, wenn der Benutzer auf einem nicht Zepto kompatiblen Browser wie IE & zugleich jQuery CDN nach unten ist, dann wird es versuchen, die jQuery CDN wieder zu laden einmal und dann letztlich Fallback auf lokale Kopie von jQuery.


Aber praktisch, wenn ich dies implementieren würde, würde ich nur 1 einzigen Fallback auf lokale haben. Versuchen Sie beispielsweise, zu überprüfen, ob wir Zepto oder jQuery laden können, und laden Sie im nächsten Schritt die lokale Bibliothek, wenn keine von beiden geladen wurde. Es ist besser, etwas an Ort und Stelle zu haben, anstatt etwas zu optimieren, das nicht so viel Gewinn bringt. Optimiere weise! Es kann sehr wahrscheinlich sein, dass die obige Technik # 1 ihre eigenen Überschneidungen von Browserkompatibilitäten aufweist.


Ich habe gerade dieses Problem heraus, wo es heißt, auch diese Technik (& von HTML5 Boilerplate & Modernizr empfohlen verwendet wird) ist nicht zuverlässig.Überprüfen Sie dieses Problem - document.write fallback causing jQuery to load out of order

Eine andere Lösung in dieser Frage spricht über eine Bibliothek Yepnope. Sie können überprüfen, wie es funktioniert - https://stackoverflow.com/a/12323328/551713

Schließlich würde ich diese Antwort beenden, indem Sie sagen, dass, wenn Sie etwas bauen, das wird völlig Ihr Code sein, wie nicht in die Wildnis mit den Möglichkeiten seiner Benutzer hinzufügen mehr Sachen auf die Seite, kümmern Sie sich nicht so sehr darum, weil Sie schnell auf Probleme mit solchen Techniken stoßen werden, weil anderes Skript möglicherweise außer Reihenfolge lädt und Probleme verursacht, wohingegen wenn alles Ihr Code, Sie & Arbeit als laden können nach Ihrer Logik der Fallbacks.

+0

Danke für Ihre Antwort. Am Ende habe ich deine Version benutzt, aber nur den Doppelklick auf Google CDN entfernt. In meinem Fall: wenn es das erste Mal funktioniert, gut, sonst aus Gründen der Geschwindigkeit (der Hauptzweck der Verwendung eines CDN) wird es nur für die lokale jQuery gehen. – superjos

Verwandte Themen