聊聊"jQuery is not defined

KiwenLau同學(xué)在他的個(gè)人博客使用了Fundebug的JavaScript錯(cuò)誤監(jiān)控插件，然后偶爾會(huì)收到jQuery is not defined這樣的錯(cuò)誤報(bào)警:

他的博客使用了Staticfile CDN提供的的jQuery:

<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>

由出錯(cuò)的代碼塊可知，博客中的『返回頂部』的功能是使用了jQuery實(shí)現(xiàn)，如果jQuery出錯(cuò)，意味著該功能失效，那么讀者就不得不手動(dòng)滑動(dòng)到博客頂部，這樣用戶體驗(yàn)是非常糟糕的。根據(jù)統(tǒng)計(jì)，3個(gè)月時(shí)間內(nèi)，這個(gè)錯(cuò)誤已經(jīng)累計(jì)出現(xiàn)了399次，已經(jīng)相當(dāng)嚴(yán)重了。

而根據(jù)最新統(tǒng)計(jì)數(shù)據(jù)顯示，jQuery依然是前端用得最多的JavaScript庫(kù)，因此一旦jQuery出錯(cuò)，必定會(huì)影響很多功能，jQuery的重要性不言而喻。另一方面，不少Fundebug的用戶都收到過(guò)"jQuery is not defined"的錯(cuò)誤報(bào)警，許多前端開(kāi)發(fā)者應(yīng)該都遇到(也許只是你沒(méi)有發(fā)現(xiàn))，我們通過(guò)這篇博客幫助大家解決問(wèn)題。

出錯(cuò)原因1: 加載CDN的jQuery失敗或者超時(shí)

當(dāng)提供jQuery的CDN出問(wèn)題導(dǎo)致jQuery加載失敗，或者由于網(wǎng)絡(luò)問(wèn)題瀏覽器加載jQuery文件超時(shí)，會(huì)出現(xiàn)jQuery未定義的錯(cuò)誤。

解決方案: 將jQuery文件掛載在自己的網(wǎng)站上作為備用，如果CDN加載jQuery失敗，則使用自己網(wǎng)站存托管的jQuery。這樣的話，大部分用戶依然可以通過(guò)CDN加快訪問(wèn)速度，而一旦CDN出問(wèn)題時(shí)也可以避免出錯(cuò)。

 <script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
 <script> 
 window.jQuery || document.write('<script src="http://kiwenlau.com/js/jquery.min.js"><\/script>'))
 </script>

KiwenLau的博客讀者絕大部分來(lái)自國(guó)內(nèi)，然而分析錯(cuò)誤的IP地址后，他發(fā)現(xiàn)高達(dá)26.1%出錯(cuò)用戶的來(lái)自國(guó)外。根據(jù)幸存者偏差，我們不能認(rèn)定國(guó)內(nèi)用戶出錯(cuò)概率更高，而應(yīng)該認(rèn)定國(guó)外用戶出錯(cuò)概率更高。那么這就不難理解了，國(guó)外用戶請(qǐng)求國(guó)內(nèi)CDN時(shí)速度太慢，導(dǎo)致jQuery出錯(cuò)。

因此，他將jQuery掛載在http://kiwenlau.com/js/jquery.min.js作為備用，解決了問(wèn)題。

出錯(cuò)原因2: 加載jQuery的順序錯(cuò)誤

依賴(lài)于jQuery的其它JavaScript腳本先于jQuery加載完成并執(zhí)行。這時(shí)jQuery尚未加載，因此依賴(lài)于jQuery的代碼調(diào)用jQuery的話就會(huì)出錯(cuò)。

解決方案: 將jQuery庫(kù)放在依賴(lài)于jQuery的JavaScript腳本之前，并且將這些代碼放入document.ready來(lái)確保DOM加載完畢。

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    //依賴(lài)于jQuery的代碼
  });
</script>

參考鏈接

The State of Front-End Tooling 2016 - Results
幸存者偏差是什么意思？- 知乎

{% raw %}
<script src="/js/highcharts.js"></script>
{% endraw %}

關(guān)于Fundebug

Fundebug專(zhuān)注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/03/06/jquery-is-not-defined/