避免JavaScript插件版本冲突

时间:2014-08-07 18:58:37

标签: javascript jquery wordpress plugins conflict

我在一个环境中工作,我不总是控制包含哪些JavaScript文件。有时我还有另一个进程,它广告了我已添加的插件的diff JS版本。怎么了?热潮,冲突。

我很好奇是否有办法可以添加一些代码来避免这种冲突。我希望能够为同一个javascript插件加载多个版本,并优雅地允许第一个接管。

思想?

*更新*

请允许我澄清一下。我正在使用PHP环境,其中"扩展"可以加载。每个扩展可以来自不同的开发人员。这些扩展提供了不同的功能,但通常可以使用相同的库。

我们以qTip:http://craigsworks.com/projects/qtip/

为例

qTip已经很长时间没有更新了。但是,它是一个很棒的插件。我的代码使用最多的版本,其他人的代码使用旧版本。随之而来的是代码冲突。

我想更改他们的库,如果已经包含qTip,则不加载,尽管版本并避免冲突。我唯一的另一个选择是在整个库名称前加上前缀并将其作为另一个产品运行,但这对我来说似乎很痛苦。

思想?

2 个答案:

答案 0 :(得分:1)

要加载相同插件的两个不同版本,也需要加载两个不同版本的jQuery,因为插件总是会覆盖$.foo$.fn.foo

这可以通过使用$.noConflict()函数与jdphenix的答案类似的方式解决。

<script src="jquery.js">      /* load first jquery instance */ </script>
<script src="plugin-v1.js">   /* attach to first instance */   </script>
<script> 
    var $j1 = $.noConflict(); /* remove $ and jQuery from globals */
</script>
<script src="jquery.js">      /* load second jquery instance */ </script>
<script src="plugin-v2.js">   /* attach to second instance */   </script>
<script>
    var $j2 = $.noConflict(); /* optionally remove $ and jQuery from globals again */
</script>

如果您再次调用$,该插件的更高版本将附加到jQuery$j2(或noConflict)。可以通过$j1访问早期版本。

我希望无论使用哪个版本创建jQuery对象,大多数jQuery函数都能正常工作,但建议进行测试!

编辑或者,在某些(大多数?)插件上,您可以通过在加载下一个插件之前简单地重命名原始处理程序来逃脱。只要插件没有尝试通过名称调用自身,这应该没问题:

<script src="jquery.js"> </script>
<script src="plugin-foo-v1.js"> </script>
<script>
    $.fn.bar = $.fn.foo;
    delete $.fn.bar;
</script>
<script src="plugin-foo-v2.js"> </script>

答案 1 :(得分:0)

您已经标记了jquery,因此我认为这是相关的库。在标题中:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var $j2 = $.noConflict();
  </script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="sojs25190104.js" language="javascript"></script>

和sojs25190104.js:

(function () {
  console.log($.fn.jquery);
  console.log($j2.fn.jquery);
}()); 

这实现了什么:

  • jQuery 2.1.1可通过全球$j2
  • 获得
  • jQuery 1.11.1可通过全球$
  • 获得