2012-11-30 32 views
7

私は、ZeptoからjQuery(特にIEの場合)へのフォールバックを指示するページ、つまりhere on SOとここにあるZepto.js official pageというページを見ました。
Modernizr.load doc pageのように、GoogleがホストするjQueryからローカルサイトのjQueryにフォールバックする方法の例も見てきました。Zepto、Google CDN jQuery、ローカルjQueryへのフォールバック方法

私の質問は、どうやって2つのものをまとめるのですか?おそらくModernizr.loadを使用せずに、ちょうど適切な<script>ブロックを使用していますか?

これは私が思いついたものですが、IEではGoogleのホストされたバージョンが見つからないようです。また、Zepto = jQuery割り当てが正しく動作するかどうかはわかりません。

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

良い方法はありますか? @Ashfame答えた後、TA

編集

、これは私が使用したものです:

私は用としてGoogle CDNのプロトコルレス/スキームレスのURLを使用することができませんでした
<!-- 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> 

何らかの理由で私のローカルIE9で動作しませんでした(それはたくさん待ってから、常にローカルに落ちます)。

もう一度エイリアスしませんでしたZeptojQuery:ちょうど$をJSコードで使用しました。

jQueryの順序が間違っているw.r.t.に関連する問題はありません。依存コード。この技術を試すの便宜上

+0

また、私は '//ajax.googleapis.com/...'を試しました。これはプロトコルプレフィックスなしです – superjos

+0

おそらく[このスニペット](https://gist.github.com/3325940)で試してみました@SébastienGrosjean - ZenCocoon:うまくいくように見えましたが、Cloudflare CDNや他のZepto CDNを使用したくなかったのです。 – superjos

+0

また、 'Modernizr.load'で試してみましたが、なんとなくそれはあまりにも多すぎるようでした。もちろん私は間違っているかもしれない。 – superjos

答えて

6

、私はこれが最初にしようとするだろう:

私はすぐにjQueryのCDNがダウンしたときにHTML5ボイラープレートは、ローカルフォールバックをロードする方法の線に沿ってこれを書きました。

これはうまくいかないかもしれませんが、私はそれが今すぐではいけない理由を見ません。それをスピンしたいですか?

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

それがうまく扱えないだろう唯一のケースは、ユーザーがjQueryのCDNがダウンしていると同時に、IE &のような非Zepto互換性のあるブラウザ上にあるとき、それが再びjQueryのCDNをロードしようとしています最終的にjQueryのローカルコピーにフォールバックします。


実際に言えば、私がこれを実装するならば、私はローカルに1つの単一のフォールバックしか持たないでしょう。私たちがZeptoまたはjQueryをロードできるかどうかを確認し、次のステップでどちらもロードされていない場合はローカルライブラリをロードします。あまり利益を得られないものを最適化しようとするのではなく、適切な場所で作業している方が良い。賢明に最適化する!上記のテクニック#1には、ブラウザ間で互換性のある独自のキャビットが存在する可能性が非常に高いです。


私はちょうどそれが言うこの問題、でもこの技術は(HTML5定型& Modernizrが推奨する&を使用している)信頼できるものではないが分かりました。この問題を確認してください - document.write fallback causing jQuery to load out of order

もう一つの解決策は、ライブラリYepnopeについて語ります。どのように動作するかを確認することができます - https://stackoverflow.com/a/12323328/551713

最後に、自分のコードになるようなものを構築していない限り、ユーザーの可能性を追求しないでそのようなテクニックの問題にすばやくぶつかります。他のスクリプトが順不同で読み込まれ、問題が発生する可能性があります。そのすべてのコードが、おそらくすべての負荷を&として動作させることができるからですあなたのフォールバックのロジックごとに。

+0

あなたの答えをありがとう。最後に私はあなたのバージョンを使用しましたが、GoogleのCDNで2回試してみるだけです。私の場合:初めての場合はうまくいきます。そうでなければ、スピード(CDNを使用することの主な目的)のために、ローカルjQueryのために行くだけです。 – superjos

関連する問題