'$.noConflict'之前和之后的多个jquery引用？答案

【问题标题】：Multiple jquery references before and after '$.noConflict'?'$.noConflict'之前和之后的多个jquery引用？
【发布时间】：2017-12-25 22:54:14
【问题描述】：

我从事一个包含数千个 PHP 文件的大型项目。其中，有多个对 jquery 的引用干扰了我正在尝试实现的插件。

例如，让我们看看这个标记：

<html>
    <head>
       <script
       src="https://code.jquery.com/jquery-2.2.4.min.js"
       integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
       crossorigin="anonymous"></script>
       <script
       src="https://code.jquery.com/jquery-1.12.4.min.js"
       integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
       crossorigin="anonymous"></script>
       <script src="https://cdn.datatables.net/1.10.16/js/jquery.somePluginIamImplementing.min.js"></script>
    <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>

    </head>
    <body>

        <div id="example"></div>

        <script>
        $.noConflict();
            jQuery(document).ready(function() { 
                // code works perfectly like this!
            });
        </script>
    </body>
    </html>

如您所见，我对 jquery 有多个引用，但这不是问题，因为我调用了 noConflict，它将全局范围的 jQuery 变量返回到第一个版本的变量。

但是，由于该项目包含许多动态创建的 PHP 文件，因此在我编写的 noConflict 行之后对 jquery 的引用很少，如下所示：

<div id="example"></div>

    <script>
        $.noConflict();
        jQuery(document).ready(function() { 
            // code works perfectly like this!
        });
    </script>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"
          integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA="
          crossorigin="anonymous">
</script>

因此，我在 console.log 中收到错误 TypeError: $(...).somePluginIamImplementing is not a function。

如何只使用我喜欢的 jquery 版本来初始化插件？

【问题讨论】：

这个问题很难重现。目前尚不清楚您的插件是什么以及您要在哪里应用它。请在此处创建一个 jsfiddle 或可执行代码示例，这会导致此错误。
对于您必须工作的条件非常抱歉......关于主题 - 唯一可行的解决方案是将所有可能的 jquery 代码移动到页脚中进行大规模重构。像 Twig 这样的模板引擎可以帮助您。

标签： javascript php jquery html

【解决方案1】：

您可以尝试将jQuery.noConflict 的不同调用分配给不同的变量。

加载到下一个版本的 jquery 加载的任何插件都将附加到每个 noConflict 变量表示的 jQuery 版本

使用与每个单独版本的 jQuery 一起加载的相同插件的示例，但请注意每个版本的插件都绑定到其关联的 jQuery 版本

将$ 作为参数传递给每个就绪函数，使$ 可以作为当前版本使用

$jQ1(function($) {
  $('#example').myPlugin()
});
$jQ2(function($) {
  $('#example').myPlugin()
})
$jQ3(function($) {
  $('#example').myPlugin()
})
$jQ4(function($) {
  $('#example').myPlugin()
})


jQuery(function($){
  $('#example').append($('<p>',{text:'Last version jQuery loaded in page is '+$.fn.jquery}))
})

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  <script>
    (function($) {
      $.fn.myPlugin = function() {        
          $('<p>', {text: 'jQuery version in plugin: ' + $.fn.jquery}).appendTo(this);        
      }
    })(jQuery)
  </script>
  <script>
    $jQ1 = jQuery.noConflict();
  </script>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
    $jQ2 = jQuery.noConflict();
  </script>
  <script>
    (function($) {
      $.fn.myPlugin = function() {        
          $('<p>', {text: 'jQuery version in plugin: ' + $.fn.jquery}).appendTo(this);        
      }
    })(jQuery)
  </script>


  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $jQ3 = jQuery.noConflict();
  </script>
  <script>
    (function($) {
      $.fn.myPlugin = function() {        
          $('<p>', {text: 'jQuery version in plugin: ' + $.fn.jquery}).appendTo(this);        
      }
    })(jQuery)
  </script>

</head>

<body>

  <div id="example"></div>

  <script>
  </script>

  <script src="https://code.jquery.com/jquery-1.11.2.min.js">
  </script>
  <script>
    (function($) {
      $.fn.myPlugin = function() {        
          $('<p>', {text: 'jQuery version in plugin: ' + $.fn.jquery}).appendTo(this);        
      }
    })(jQuery)
  </script>
  <script>
    $jQ4 = jQuery.noConflict();
  </script>
</body>

</html>

【讨论】：