避免JavaScript插件版本冲突

我工作的环境并不总是控制包含哪些JavaScript文件。有时，我有另一个过程，广告一个我已经添加的插件的diff-JS版本。会发生什么？繁荣，冲突

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

想法

*更新*

请允许我澄清。我使用的是一个可以加载“扩展”的PHP环境。每个扩展都可以来自不同的开发人员。这些扩展提供不同的函数，但通常可以使用相同的库

让我们以qTip为例：

qTip已经有一段时间没有更新了。然而，它是一个很棒的插件。我的代码使用最新版本，其他人的代码使用旧版本。随后出现代码冲突

我想改变他们的库，如果已经包含qTip，则不加载，尽管版本不同，并避免冲突。我唯一的另一个选择是在整个库名称前加前缀，然后像运行另一个产品一样运行它，但这对我来说似乎很痛苦

---

想法？

您已经标记了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>

这样做的目的是：

• jQuery 2.1.1可通过全局

  $j2

• jQuery 1.11.1可通过全局

  $

---

加载同一插件的两个不同版本也需要加载两个不同版本的jQuery，因为插件总是覆盖

$.foo

或

$.fn.foo

这可以通过使用

$.noConflict（）

函数按照与jdpenix的答案类似的思路来解决

<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的插件，但不是jQuery本身。在我看来，控制“扩展”的php似乎需要更新以更好地处理依赖关系。WordPress并不是最好的选择：我希望有一个JS替代品。我认为wordpress已经很好地处理了这个问题。。也许不如NPM好，但是它有可用的工具来共享依赖。如果这是关于WordPress的，考虑添加[WordPress ] TAGI不要认为JS会帮助你，除非你完全远离WordPress依赖系统。

<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>

<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>