快捷導(dǎo)航

jquery引入外部CDN 加載失敗則引入本地jq庫(kù)

更新時(shí)間：2018年05月23日 14:54:29 投稿：mdxy-dxy

這篇文章主要介紹了網(wǎng)站加載第三方CDN，如果jQuery庫(kù)不成功則加載本地的jquery的實(shí)現(xiàn)代碼,需要的朋友可以參考下

由于第三方cdn庫(kù)的盛行，很多朋友會(huì)選擇使用第三方的類(lèi)庫(kù)，從學(xué)習(xí)上來(lái)說(shuō)不建議大家都使用類(lèi)庫(kù)，這樣我們失去了很多學(xué)習(xí)的機(jī)會(huì)，但使用上來(lái)說(shuō)解決了很多代碼兼容問(wèn)題，這里都不多說(shuō)了。

使用CDN加載jQuery類(lèi)庫(kù)一是可以省一點(diǎn)帶寬，二是可以給用戶(hù)帶來(lái)更快的頁(yè)面加載體驗(yàn)。

因?yàn)閭€(gè)人網(wǎng)站規(guī)模與cdn的帶寬問(wèn)題，現(xiàn)在cdn費(fèi)用雖然下來(lái)了，但也有不給力的時(shí)候，很多朋友都會(huì)選擇使用第三方的jquery庫(kù)，個(gè)人推薦幾個(gè)國(guó)內(nèi)的百度、新浪、bootcdn

下面的兩段代碼的作用如果cdn的jquery沒(méi)有加載進(jìn)來(lái)，我們可以使用本地的類(lèi)庫(kù)。

jquery下載地址

第一種：推薦用法

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

上面，我們引用了百度 CDN的jQuery庫(kù)，接著我們?cè)谀_本代碼后添加了一個(gè)if語(yǔ)句來(lái)判斷jQuery庫(kù)是否加載成功，如果沒(méi)有加載成功我們動(dòng)態(tài)加載本地jQuery庫(kù)。

其中，我們?cè)赿ocument.write方法中直接使用了URL編碼，把“<”編碼為“%3C”，接著我們?cè)偈褂胾nescape()方法把字符串還原過(guò)來(lái)。

我們通過(guò)unescape()方法把字符串轉(zhuǎn)換回來(lái)，我們可以看到輸出是一個(gè)正常的腳本引用代碼。

現(xiàn)在，我們有一個(gè)疑問(wèn)就是“為什么不使用常規(guī)字符，而是要使用字符編碼呢？”，其實(shí)這是有原因的，這意味著我們代碼將可以在XML、XHTML或HTML中正常運(yùn)行，而無(wú)需把代碼包含在CDATA中（具體請(qǐng)參考這里）。

第二種：

<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' type='text/javascript'%3E%3C/script%3E"))</script>

上面這種跟第一種原理是一樣的，就是通過(guò) || 運(yùn)算符

表達(dá)式a || 表達(dá)式b : 計(jì)算表達(dá)式a（也可以是函數(shù)）的運(yùn)算結(jié)果，

如果為 Fasle, 執(zhí)行表達(dá)式b（或函數(shù)），并返回b的結(jié)果；

如果為 True，返回a的結(jié)果；

意思也是如果window.jQuery為false則加載本地的jquery庫(kù)。

requireJs 引用cdn失敗后加載本地js

問(wèn)題：頁(yè)面中引用js和css過(guò)多會(huì)導(dǎo)致頁(yè)面加載變慢

引用cdn中的js和css會(huì)比直接在本地上傳時(shí)間短

解決辦法：我本地項(xiàng)目用到requireJs加載頁(yè)面中的js和css，變?yōu)閏dn加載時(shí)需要改動(dòng)如下

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,
})

這篇文章就介紹到這了，后續(xù)腳本之家小編會(huì)為大家分享更多的資料。

您可能感興趣的文章: