外部加载的同一版本 jquery 的两个不同变体

Posted 2023-03-31

【中文标题】外部加载的同一版本 jquery 的两个不同变体

【英文标题】：Two different variants of the same version of jquery loaded externally

【发布时间】：2020-04-05 01:46:10

【问题描述】：

注意：这是一个不同的问题，不同于两个不同版本的 jQuery（这里提到的内容：Can I use multiple versions of jQuery on the same page?）。不同之处在于它们是 相同 版本号但包含由 外部 源加载的不同包含库的 jQuery 的两个副本，这意味着使用 jquery 调用的两个不同版本的正常解决方案 不起作用。

我在同一个网站上有两个不同的 jquery 变体，由不同的来源加载。

一，单路跑的时候，我跑的时候console.log(jQuery.fn.jquery);：

3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector

另一条路径返回

3.4.1

但是，两者都在系统上，路径主要影响加载顺序。更糟糕的是，以前的超薄版本似乎是加载时的默认值，并且加载到我的应用程序外部。

所以问题是......一个缺少 ajax，另一个没有，并且通过一种方式，ajax 版本不起作用，因为 jquery 认为没有这样的功能。我如何告诉它检查 other jquery 文件？

【问题讨论】：

如果有需要非slim版本的情况，为什么不直接使用non-slim版本？

因为从我的应用程序外部加载的内容覆盖了我在内部加载的任何内容。

那么你可以尝试jQuery noConflict 恢复到以前的jQuery 版本，前提是在slim 版本之前包含了带有ajax 的版本。

如果它们都运行而没有冲突，那么第二个会覆盖第一个，那么你就不走运了。

@Taplar 所以你是说在内部加载一个新的，在那个上做noConflict，然后在那个上使用唯一的调用？问题在于它不是一个新的应用程序，只是一个应用程序的新实现。这需要重写数十年的代码。

【参考方案1】：

离开cmets...

您可以使用立即调用函数表达式 (IIFE) 来确定您的逻辑范围，或者使用 noConflict 调用来解决此问题。假设您有类似以下内容。

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

<script>
  ...your logic...
</script>

“你的逻辑”只能访问第二个包含中包含的 jQuery，因为每个 jQuery 包含都替换了全局 window.jQuery 和 window.$ 引用。这可以通过两种可能的方式进行更改。

noConflict

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
  window.jQueryWithAjax = jQuery.noConflict();
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

<script>
  jQueryWithAjax.find(<whatever>);
</script>

IIFE 方法

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
  (function($)
    $(<whatever>);
  (jQuery));
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

noConflict 方法将先前版本的 jQuery 保存到一个可以在以后使用的辅助变量中。 IIFE 方法在第二个脚本包含发生之前移动逻辑，并将当前的jQuery 传递给它。届时，IIFE 中的所有逻辑都将使用$ 作为传入的版本，而不管以后在window 上如何更改。

【讨论】：

很好的答案，并且肯定会鼓励人们意识到我的特定用例不会受到影响。对我来说不幸的是，加载顺序和添加 noConficts 不在我的掌控之中。也就是说，它确实给了我一个想法......

【参考方案2】：

想出了一个可能的解决方案：

由于后来加载的 jQuery 版本覆盖了早期版本的 jQuery，我可以使用 javascript 通过jQuery.fn.jquery 进行持续检查，并受到@Taplar 的解决方案和另一个问题的答案的启发：Listening for variable changes in JavaScript

我为window.jQuery 和window.$ 添加了一个监听器

在更改时，我检查jQuery.fn.jquery 的结果，如果它与我想要的不同，我用我想要的版本重新加载 jquery。 （如果有人在我弄清楚之前发布了如何执行此操作的代码，他们会得到复选标记）。