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

Question

注意:与两个不同版本的 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认为没有这样的功能。我如何告诉它检查其他 jquery 文件？

Answer 1

关闭评论...

您可以使用立即调用函数表达式 (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 上如何更改稍后。