使用jQuery插件时避免重复引入jquery.js文件(jQuery 重复加载错误以及修复方法)

最近在做项目的时候,遇到个问题:

父页面引入子页面,子页面引入jQuery.js文件,父页面JS依赖jQuery.js ,出现问题是,总提示JS对象无效。猜测jQuery加载顺序不是最早造成的。

父页面:


子页面:


从这里看 ,jQuery.js 是最早的咯,可是为什么其它的js都提示 属性无效呢。

后面用 IE11 的F12工具查看 JS 的加载顺序,发现 jQuery 是最早加载的,只是加页面加载完毕后,突然有个请求又加载了一次 jQuery。



原因是如下代码:

复制代码 代码如下:

$(function() {
$("#zjyw_table_1").load("xxx.jsp");
}

xxx.jsp 里又加载了 jQuery.js 。 把这句注释后就正常了。

这问题还郁闷了挺久,记录一下,方便其它人哈。

找到方法了之后解决方式很简单,这里主要是把查询问题的思路给大家分享下,同时有相同问题的小伙伴可以参考下。




当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件均不可用,下图是jquery.js中开头部分代码,定义了全局jQuery对象

image

当页面由一个人开发时,基本上不会遇到这个问题,因为大多数前端开发工程师会将js的引入放到一起,这样不容易引入重复的js文件。但是下面情况,此问题很容易发生:

  • 一个页面由多个人开发,开发过程中没有很好的沟通,导致引入了重复的jquery.js文件,使得部分jQuery插件不可用
  • 当你开发的jQuery插件被第三方团队使用。该团队对jQuery不熟悉,并且使用了其他jQuery插件。他们采取的策略是哪里用到jQeury插件,哪里就加载jquery.js和jquery插件js。当两个插件在一个页面使用时,导致重复引入jQuery.js。

所以,当出现下面类似的错误提示时,考虑一下jquery.js重复引入的情况:

image


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值