我的一个sharepoint的小项目遇到了JQuery多库冲突的问题。
因为我那个项目是在一个大的站点里,然后这个站点部署了一个js,就是在运行我的页面时会自动跑别人的一段js代码,而我项目引用的jquery版本是1.9.1,而被人项目是2.0.1。导致我项目经常间隙性的出问题,主要是bootstrap或其他依赖jquery的一些插件会出现加载不出来的情况。
针对这个问题,我本来有两个办法,但是其中一个办法我没有走通,但是还是记录一下
1,阻止别人项目的js运行,我想了很多方法,去阻止这个”第三者“,很遗憾,我查找了sharepotin的母模板,找了很多办法,依然没用。(我也不能去改别人的代码)。因为我的项目完全没有任何他的代码或者引用,但他的js是部署在sharepoint整个站点的,相当于全局作用,所有的这个站点下的子集在运行时,都会自动运行他的那一段js。我也不知道他是如何做到会”污染”整个站点的。有这个思路的解决办法的童鞋请告诉一下
2,使用jQuery.noConflict方法
其实网上有很多类似的解决办法,但是说的很笼统,我经过摸索,终于找到可用的方案。
我的问题是我自己的jquery1.9.1会先于jquery2.0.1运行,导致后面的库覆盖掉了我的库,悲剧的是,后面紧接着引用了Bootstrap库,而bootstrap是依赖jquery,所以会出现报错,而且是有时候报错,有时候不报错。
我的解决方案是在requirejs的config里做更改
map: {
"*": { "jquery": "libs/jquery-private" },
"libs/jquery-private": {"jquery":"global!$"}
},
这个作用就是对全局的文件使用jquery的时候,则调用“libs/jquery-private”文件,对“libs/jquery-private”文件使用jquery的时候,则使用$,也就是jQuery。有点绕,但是看看下面的文件内容
libs/jquery-private文件内容:
define(["jquery"], function(jq) {
if(jq.fn.jquery == "1.9.1"){
return jq.noConflict(true);
}else{
return jq
}
});
也就是说如果进来的jquery是1.9.1版本的,那么就使用jQuery.noConflict(true),放弃该版本对”jQuery“和”$”的使用权。如果是jQuery的其他版本则继续返回jQuery.
对bootstrap的引用:
shim: {
"css!libs/normalize.styles": [
"css!libs/bootstrap.styles",
"css!libs/bootstrap.theme.styles"
],
"bootstrap": [
"jquery",
"css!libs/bootstrap.styles",
"css!libs/bootstrap.theme.styles"
],
...
}
这个时候,bootstrap依赖的文件就是2.01的版本,不会出现版本混乱的问题。
在项目中使用 $('#' + self.id).popover('hide');类似的方法,不会出现popover找不到的情况。
QA:为什么不禁用掉2.0.1,而是禁用自己的1.9.1?
首先我无法阻止2.0.1的运行,也无法让他运行的比我早,我控制不了,不管我怎么调整我的代码,他的2.0.1都会出现,而且会这个正好出现在我的1.9.1运行之后和Bootstrap运行之前。就出现一个项目两个jquery的情况。导致我在使用$('#' + self.id).popover('hide')的一些bootstrap方法时,有时候1.9.1的$会跳出来,产生了报错。
我只有让我的jquery放弃掉$,Jquery的使用权,让2.0.1彻底覆盖掉我的1.9.1
其实这样改是一种妥协,但好歹项目运行正常了,终于不会间歇性的报错了。
如果有更好的解决办法或者思路请告诉我,谢谢!
在SharePoint环境下,解决因多个JQuery库版本冲突导致的项目问题,通过使用jQuery.noConflict方法及RequireJS配置,确保项目稳定运行。
545

被折叠的 条评论
为什么被折叠?



