JQuery文件重复引用问题

    刚接触前端不久，发现里面的水可真深，上周在写一个小项目时，遇到了一个十分诡异的问题。项目的前端是用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文件引用放到最后）

所以尽量避免重复引入相同的文件。