引入外部 CDN失效時(shí)--怎么加載本地資源文件(本文以jquery為例)

相信大家都使用過,百度或者CDN官網(wǎng)等提供的CDN靜態(tài)資源庫

CDN官方靜態(tài)資源庫:https://cdnjs.com/

七牛前端公開庫:http://staticfile.org

使用CDN可以減少帶寬和http請求,也可以減少一些服務(wù)器的壓力,

從而提升頁面加載速度,也有利于提高用戶體驗(yàn)。

但有一個(gè)問題:假如你使用的是百度靜態(tài)資源庫。

某天,突然百度靜態(tài)資源庫崩了,那你網(wǎng)站引用的相應(yīng)資源文件也會(huì)失效。

這個(gè)時(shí)候應(yīng)該怎么辦呢?

雖然這種情況幾率比較小,但為了防范于未然,我們還是需要留一手。

然后我就開始百度方法,真是五花八門,各種寫法都有,看的我是很蒙蔽

有這種:

<script src="http://ajax.google/jquery/1.9.2.js"></script>
<script>window.jQuery||document.write('<script src="jquery-1.9.2.js"></script>')</script>

有這種:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>

有這種:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>
<script>
  //<![CDATA[
    if(typeof jQuery == 'undefined') {
       document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
    } //]]>
</script>

不知為何,總覺得以上寫法哪里不對,但又說不出個(gè)所以然。
后經(jīng)過一番尋找,終于找到了比較規(guī)范和正確的2種方法

方法一(推薦)

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 if (typeof jQuery == 'undefined') {
   document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js'%3E%3C/script%3E"));
 }
</script>

方法二

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

注:經(jīng)本人實(shí)際測試,2種方法都可以。

然后這里我又有一個(gè)疑問:不知道上面代碼中的 %3C 和 %3E是什么意思?

后來先查了 unescape()這個(gè)函數(shù)接著又查了這個(gè)函數(shù)escape()

結(jié)果發(fā)現(xiàn) %3C 和 %3E分別表示 '<' 和 '>',如下圖

image
image

原文參考:https://www.jb51.net/article/140694.htm

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容