ホームページ > 記事 > ウェブフロントエンド > jqueryが外部CDNをインポートしてロードに失敗した場合にローカルjqライブラリを導入する方法

jqueryが外部CDNをインポートしてロードに失敗した場合にローカルjqライブラリを導入する方法

不言オリジナル: 2018-07-04 10:54:543679ブラウズ

この記事では主に、Web サイトにサードパーティ CDN をロードする方法を紹介します。jQuery ライブラリが失敗した場合、必要な友人はそれを参照できます。

サードパーティの CDN が普及しているため。パーティの CDN ライブラリを使用すると、多くの友人はサードパーティのクラスライブラリを使用することを選択します。学習の観点から見ると、クラスライブラリを使用することはすべての人に推奨されないため、多くの学習の機会が失われますが、使用の観点からは、これによりコードの互換性に関する多くの問題が解決されるため、ここでは詳しく説明しません。

CDN を使用して jQuery クラスライブラリを読み込むと、帯域幅が節約され、ユーザーはより高速なページ読み込みエクスペリエンスを得ることができます。

個人のウェブサイトの規模と CDN の帯域幅の問題により、CDN のコストは下がってきましたが、それでも十分ではない場合が多くの友人がサードパーティの jquery ライブラリを使用することを選択します。個人的には国内のBaidu、Sina、bootcdnがいくつかおすすめです

次の2つのコードの機能は、cdnのjqueryが読み込まれていない場合にローカルのクラスライブラリを使用できることです。

jqueryのダウンロードアドレス

最初のタイプ: 推奨される使用法

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 if (typeof jQuery == &#39;undefined&#39;) {
 document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"));
 }
</script>

上記では、Baidu CDNのjQueryライブラリを引用し、スクリプトコードの後にif文を追加して、jQueryライブラリがロードされました。正常にロードされなかった場合は、ローカルの jQuery ライブラリが動的にロードされます。

その中で、document.write メソッドで URL エンコードを直接使用し、「<」を「%3C」としてエンコードしてから、unescape() メソッドを使用して文字列を復元します。

unescape() メソッドを通じて文字列を逆変換すると、出力が通常のスクリプト参照コードであることがわかります。

ここで、「なぜ通常の文字を使用せず、文字エンコーディングを使用するのですか?」という質問があります。実際には理由があります。これは、コードが XML、XHTML、または HTML で正常に実行されることを意味します。 CDATA にコードを含めます (詳細については、ここを参照してください)。

2 番目:

<script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src=&#39;/skin/mobile/js/jquery.min.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E"))</script>

上記の原理は最初の原理と同じです。つまり、 || 演算子を使用します

式 a || 式 a を計算します (演算結果も可能)

Fasle の場合は式 b (または関数) を実行し、b の結果を返します。

True の場合は a の結果を返します。

window.jQuery が false の場合を意味しますローカルのjqueryライブラリをロードします。 SRequirejs は、CDN が失敗した後のローカル JS

の問題を引用します。ページ内の過剰な JS と CSS により、ページの読み込みが遅くなります。方法: 私のローカルプロジェクトは、cdn 読み込みに変更するときに、requireJs 読み込みページで js と CSS を使用します。、次のように変更する必要があります

1.jquery: ["https://cdn.bootcssddd.com/jquery/1.11.1/jquery. min","static/lib/jquery/jquery-1.9.1. min"],

2. 次のように build.js コードを追加します

({
  baseUrl: "/js",
  paths: {
    "jquery": "empty:"
    
  },
  dir: "/js-build",
  optimize: "uglify",
  optimizeCss: "standard.keepLines",
  mainConfigFile: "config.js",//config.js为1中引用的文件
  removeCombined: true,
})

上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。ヘルプ、PHP 中国語に注意してください。ウェブサイトでさらに関連コンテンツをご覧いただけます。

jqueryが外部CDNをインポートしてロードに失敗した場合にローカルjqライブラリを導入する方法

関連記事