KiwenLau同学在他的个人博客使用了FundebugJavaScript错误监控插件,然后偶尔会收到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>

关于Fundebug

https://www.fundebug.com/专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/03/06/jquery-is-not-defined/

参考链接

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

聊聊"jQuery is not defined"的更多相关文章

  1. Uncaught ReferenceError: jQuery is not defined

    页面调试时,明明引入了JQ文件,却一直提示Uncaught ReferenceError: jQuery is not defined错误. 转自:http://blog.csdn.net/baicp ...

  2. electron Uncaught ReferenceError: jQuery is not defined

    用electron写桌面程序时 ui部分的html页面引入的js会用到jquery 用常规的方式引入是不行的,会抛出如题的异常 <script type="text/javascrip ...

  3. Electron "jQuery/$ is not defined" 解决方法

    参考问题:https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined <!-- Insert this ...

  4. jquery报错:“ReferenceError: jQuery is not defined”

    这明显是没有引到jquery,原因就是jquery没有放在最前面,jquery应该最先引入.

  5. Electron 前端页面导入jQuery 出现错误Uncaught ReferenceError: jQuery is not defined

    如下: <script src="../assets/js/jquery-1.10.2.js"></script> 方法1 改为: <script&g ...

  6. odoo jQuery is not defined

    The steps1.Query your db as this query.select id, create_date, store_fname, datas_fname from ir_atta ...

  7. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...

  9. JQuery Pagenation 知识点整理——(function($){...})应用(20150517)

    首先:(function($){...})为Jquery提供的匿名函数: 代码实例(一) <script type="text/javascript"> (functi ...

随机推荐

  1. lo dash api

    https://lodash.com/docs 用 Lo-Dash 替换 underscore http://segmentfault.com/a/1190000000359484

  2. Spring EL中的类操作符

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://ww ...

  3. Java中的封装、继承、多态

    封装 在如何理解面向对象这篇文章中,提到所谓的封装就是"功能都给你做好了,你不必去理解它是怎么写出来的,直接使用即可.".但你得清楚一点,那就是这句话是相对于使用者来说的,而作为开 ...

  4. 浅谈Socket长连+多线程[原创,欢迎指点]

    前戏 [PS:原文手打,转载说明出处] [PS:博主自认为适用于云平台设备管控,且适用于IM主控] 好久没来了,13年时还想着多写一些博客,这都17年过年,年前也写一写Scoket+多线程,不足之处, ...

  5. 3D游戏开发之在UE4中创建非玩家角色(NPC)

    接着上节我们继续学习,现在我们来创建一些NPC(non-playable characters,非玩家角色).在这个游戏中,当我们靠近NPC时,它们会做出相应的反应. 一 创建C++类 1) 在UE编 ...

  6. KVO,看我就够了!

    概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...

  7. arcpy.mapping-认识arcpy.mapping

    arcpy.mapping-认识arcpy.mapping by 李远祥 ArcMap提供了强大的地图制图功能,在实际的工作中,只要涉及到专题地图和地图册的制作,难免会遇到非常多的出图工作和地图图面元 ...

  8. JavaScript嗅探执行神器-sniffer.js,你值得拥有!

    一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say ...

  9. CentOS 6.4 升级python 2.6.6 到 python 2.7.9

    1. 查看当前系统python的版本 python -V 2. 下载python软件包 cd /usr/local/src wget http://python.org/ftp/python/2.7. ...

  10. JavaScript刷新页面的方法(包括Frame框架的刷新方式)

    JavaScript刷新页面的方法 1    history.go(0) 去指定的某页 2    window.location.reload()刷新当前页面 window.location.relo ...