聊聊"jQuery is not defined"

標籤：解決問題   question   href   前端   時間   jquery庫   ogr   返回   使用者體驗   

KiwenLau同學在他的個人部落格使用了Fundebug的JavaScript錯誤監控外掛程式，然後偶爾會收到jQuery is not defined這樣的錯誤判警:

他的部落格使用了Staticfile CDN提供的的jQuery:

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

由出錯的代碼塊可知，部落格中的『返回頂部』的功能是使用了jQuery實現，如果jQuery出錯，意味著該功能失效，那麼讀者就不得不手動滑動到部落格頂部，這樣使用者體驗是非常糟糕的。根據統計，3個月時間內，這個錯誤已經累計出現了399次，已經相當嚴重了。

而根據最新統計資料顯示，jQuery依然是前端用得最多的JavaScript庫，因此一旦jQuery出錯，必定會影響很多功能，jQuery的重要性不言而喻。另一方面，不少Fundebug的使用者都收到過"jQuery is not defined"的錯誤判警，許多前端開發人員應該都遇到(也許只是你沒有發現)，我們通過這篇部落格協助大家解決問題。

出錯原因1: 載入CDN的jQuery失敗或者逾時

當提供jQuery的CDN出問題導致jQuery載入失敗，或者由於網路問題瀏覽器載入jQuery檔案逾時，會出現jQuery未定義的錯誤。

解決方案: 將jQuery檔案掛載在自己的網站上作為備用，如果CDN載入jQuery失敗，則使用自己網站存託管的jQuery。這樣的話，大部分使用者依然可以通過CDN加快訪問速度，而一旦CDN出問題時也可以避免出錯。

 <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的部落格讀者絕大部分來自國內，然而分析錯誤的IP地址後，他發現高達26.1%出錯使用者的來自國外。根據倖存者偏差，我們不能認定國內使用者出錯機率更高，而應該認定國外使用者出錯機率更高。那麼這就不難理解了，國外使用者請求國內CDN時速度太慢，導致jQuery出錯。

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

出錯原因2: 載入jQuery的順序錯誤

依賴於jQuery的其它JavaScript指令碼先於jQuery載入完成並執行。這時jQuery尚未載入，因此依賴於jQuery的代碼調用jQuery的話就會出錯。

解決方案: 將jQuery庫放在依賴於jQuery的JavaScript指令碼之前，並且將這些代碼放入document.ready來確保DOM載入完畢。

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

參考連結

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

聊聊"jQuery is not defined"