javascript - jQuery noconflict 和多个库

Question

我加载了多个 jquery 库(无法更改这一点，托管 ecom 平台，对某些内容的访问权限有限)，所以我需要避免它们发生冲突。当前代码:

<script type="text/javascript">
   $(document).ready(function() {
      $('nav#menu').mmenu({
         slidingSubmenus: false
      });
   });
</script>

希望它使用 diff 变量，例如:

<script type="text/javascript">
var jQuery_1_11_1 = jQuery.noConflict(true);
</script>

所以类似:

<script type="text/javascript">
   jQuery_1_11_1(document).ready(function() {
      jQuery_1_11_1('nav#menu').mmenu({
         slidingSubmenus: false
     });
   });
</script>

但是，运气不佳...预先感谢您的帮助!

Answer 1

我不相信 .noConflict() 是您所追求的，因为它所做的只是从全局 $ 命名空间中删除 jQuery。

您遇到的问题是您希望多个 jQuery 版本在同一页面上共存。

您分配给变量的一般方法是正确的。脚本加载顺序很重要。如果您的 1.11.1 版本不应该与旧版本冲突，比如说 1.7.2，您需要确保首先加载您的版本，分配给一个变量，然后加载您想要分配给全局 $ last 的版本

<script type="text/javascript" src="jquery.1.11.1.js"></script>
<script type="text/javascript">
  var $jq111 = jQuery;
  // here we have set $jq111 to the current jQuery object which is 1.11.1
  // at this point $ and jQuery are also 1.11.1
</script>

//IMPORTANT: now you will load any plugins for 1.11.1 these are and should only be accessable with the 1.11.1 library but if the plugin uses the global $ you may have problems more on that later
<script type="text/javascript" src="menu.js"></script>

<script type="text/javascript" src="jquery.1.7.2.js"></script>
<script>
  // at this point $ and jQuery are 1.7.2
  // $jq111 should be 1.11.1

  // to do something with 1.11.1
  $jq111('nav#menu')...

  // The menu plugin is loaded in the context of 1.11.1
  // To ensure subcalls to the global $ work we need to create a block
  (function( $, undefined ) { 
    // $ in this scope is pointing to $jq111
    $('nav#menu').menu(...)
  }( $jq111 ));
</script>