Question

我在一个跨越数千个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不是函数。

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

Answer 1

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

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

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

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

＆＃13;

$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}))
})

＆＃13;

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

＆＃13;

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

1 个答案: