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

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

    项目的前端是用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文件引用放到最后)

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

 

你可能感兴趣的:(jQuery,JavaScript,Web)