聊聊"jQuery is not defined"

简介: KiwenLau同学在他的个人博客使用了Fundebug的JavaScript错误监控插件,然后偶尔会收到jQuery is not defined这样的错误报警:他的博客使用了Staticfile CDN提供的的jQuery:由出错的代码块可知,博客中的『返回顶部』的功能是使用了jQuery实现,如果jQuery出错,意味着该功能失效,那么读者就不得不手动滑动到博客顶部,这样用户体验是非常糟糕的。

KiwenLau同学在他的个人博客使用了FundebugJavaScript错误监控插件,然后偶尔会收到jQuery is not defined这样的错误报警:

img_1932036ee8746abfc3973e5efcb07c94.png

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

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

由出错的代码块可知,博客中的『返回顶部』的功能是使用了jQuery实现,如果jQuery出错,意味着该功能失效,那么读者就不得不手动滑动到博客顶部,这样用户体验是非常糟糕的。根据统计,3个月时间内,这个错误已经累计出现了399次,已经相当严重了。

img_07781bcab0fa484d3019a149b3afa461.png

而根据最新统计数据显示,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出错。

img_377997fd0781ab980c1772ce008786b7.png

因此,他将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
幸存者偏差是什么意思?- 知乎

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6月前
|
JavaScript
解决报错ReferenceError: jQuery is not defined
解决报错ReferenceError: jQuery is not defined
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
61 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
44 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
40 4
jQuery Cookie 插件
|
12天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
27 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】