2016-04-27 13 views
77

次のコードの目的は何ですか?jQueryを2回宣言するのはなぜですか?

次のスクリプトコードの前には、jquery.min.jsが既にgoogleapisに含まれています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script> 
+0

ローカルコピーが必要なときにCDNを使用する前にローカルコピーをロードしないのはなぜですか?おそらく少しのスピードの利点があります。 –

+2

はい、主に速度の利点です。 [もっと読む](http://stackoverflow.com/questions/2145277/what-are-the-advantages-and-disadvantages-of-using-a-content-delivery-network-c) –

+6

jqueryを読み込むのが速いあなたがすでにそれを持っているならば。最高のチャンスは、多くのウェブサイトで同じ場所にホストされていることです。だから、基本的には、最初にそれを試してみたいし、それを一度にすべて取得したい。失敗した場合は、ローカルバージョンを入手してください。 –

答えて

121

それはCDNがダウンしているか、到達できない場合に、同じサーバー上に保存されたjquery.min.jsファイルにフォールバックします。

それは本質的に言っている:

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined: 
if (window.jQuery) { 
    // Yes, it's defined. Good. Nothing more needed. 
} 
else { 
    // No, it's not defined. Use my copy: 
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>') 
} 

Read more here、あなたは元のコードhereを見つけることができます。

window.jQuery || document.write(...)については、上記のコードの略省略形です。 window.jQueryと定義すると、truthyとなるので、||の右側のステートメントは実行されません。が実行されます。ただし、定義されていない場合はfalsyとなり、右側のステートメントは||となります。が実行されます。

+4

クールなコンセプト、これまでこれを見たことはありません。 2番目の

18

GoogleのCDNでホストされているバージョンを使用しようとしています。サイトを閲覧している人が既に他のサイトを訪れることからキャッシュされた正確なスクリプトを持っている可能性があるので、最初にそれを試してみてください。

CDNバージョンがロードされると、window.jQueryが設定され、またはが短絡し、コードが移動します。

何らかの理由でCDNバージョンを読み込めない場合は、ローカルにホストされているバージョンのスクリプトを指すページに別のスクリプトタグを追加します。

編集:MTCosterがa comment aboveを指摘するので、このトリックはJavaScriptが正常に読み込まれる方法に依存します。ブラウザは、タグがロードされるかタイムアウトするまで実行を一時停止します。 アシンク属性を使用してjQueryを非同期にロードした場合、このトリックは機能しません。

7

最初のスクリプトは外部のウェブサイト(この場合はGoogleのCDN)からjQueryを読み込もうとします。

windowでjQueryオブジェクトを見つけようとしますが、それが見つからない場合は、内部リンクからライブラリをロードします。 CDNが失敗した場合の唯一の代替手段です。 JavaScriptで

window.jQuery || document.write(...) 
// the code above means the same as the code below 
if (window.jQuery === undefined) document.write(...) 

、(真/偽)ブール値のほかに、truthyとfalsy値があります。 0falseundefinednullと異なるものは真実の値です。

この場合、ウィンドウにjQueryプロパティが存在する場合、そのオブジェクトはオブジェクトになり、真実の値になります。したがって、2番目のステートメントは実行されません(最初のステートメントは既にtrueです。 ORオペレータは、いずれかのステートメントが真であれば、他のステートメントをスキップします(左から右へ)。

jQueryプロパティが存在しない場合は、最初のスクリプトが正しく読み込まれず、プロパティがundefined(偽値)になるためです。したがって、2番目のステートメントが実行され、ローカルjQueryがフォールバックとしてロードされます。

+0

' window.jQuery || ... 'は 'window.jQuery === undefined'と同じ* *ではない*' window.jQuery'が '0'、' false'、 'null'の場合でも' || 'あなたが言ったように。 –

3

ファイアウォールでブロックのようなCDNからjQueryのは、何らかの理由で到達されていない場合、それは私が私が昨年直面したもう一つの現実的なシナリオを追加するなど

ダウン、CDNフォールバックメカニズムです。私のクライアントの1人は、LANで私が作成したWebアプリケーションを、インターネットの可用性なしでホストして使用することに決めました。ローカルのIISでは、アプリケーションは適切に配置されていましたが、CDNのアベイラビリティがないために失敗しました。問題のコードを使用した場合、Webアプリケーションは変更なしで初めて動作しました。

私は今それが意味をなされることを願っています:)私にとっては、教訓でした。

関連する問題