JQuery文件重复引用问题导致某些函数调用时出现undefined

1 篇文章 0 订阅
1 篇文章 0 订阅

    刚接触前端不久,发现里面的水可真深,上周在写一个小项目时,遇到了一个十分诡异的问题。

    项目的前端是用freemarker生成的,有个页面(简称A页面)里面嵌套了一个宏,然后在宏里面我引入了一个jQuery插件(inputmask 主要用来做数据校验的),在写完一系列逻辑校验代码之后,然后访问A页面,结果有js错误,说jQuery对象未定义,这个问题很容易解决,原因是我虽然A页面底部引入了jQuery文件,但由于脚本加载时按顺序来的,所以它在初始化Inputmask这个插件时,需要调用到jquery对象,而此时jquery这个文件还尚未被加载,我想当然的就在宏里面又引入了一次jquery文件。再次访问A页面,又出现了新问题,说的是inputmask这个函数找不到。我尝试的跟了下inputmask插件的代码,发现在初始化时都没有问题,埋头调了一下午,终于找到了问题关键所在,问题就出在引入了两次jquery文件,当加载inputmask这个插件时,它将Inputmask函数绑定在了第一个引入的jquery对象上,然而当A页面全部加载时,jquery对象又被加载了一次,它会把第一次加载jquery对象给覆盖掉,所以此时的jquery对象上面根本没有绑定inputmask这个函数,调用时就会报错。

    解决方案:你可以把第一次加载的jquery对象保存起来,这样这个jquery对象始终有inputmask函数或者你可以把A页面的jquery引用文件放到这个宏的前面。(据说前端优化推荐CSS样式引用放在最前面,JS文件引用放到最后)

总之尽量避免重复引入相同的文件。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值