如何调试似乎是 jQuery/MooTools 冲突的东西？答案

【问题标题】：How to debug what appears to be a jQuery/MooTools conflict?如何调试似乎是 jQuery/MooTools 冲突的东西？
【发布时间】：2019-03-16 16:25:05
【问题描述】：

我正在尝试实现一个我在 CodeCanyon 上购买的名为 Textify 的 jQuery 插件。

Textify 需要 jQuery，我正在使用 Shape5 的 Vertex 框架在 Joomla 2.5 环境中实现这个插件。

将插件集成到网站后，我收到 5 个“'undefined' is not a function”错误。

开发站点位于http://sosdivorce.ergonomiq.net

由于 Textify 是一个商业产品，我不喜欢在网上发布脚本。

我得到的具体错误如下：

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/multibox/overlay.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_resize_overlay();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_info_slide.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_is_tobind();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_responsive_mobile_bar.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_responsive_mobile_login_register);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_columns_equalizer.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_load_resize_columns);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_flex_menu.js

    Type Issue
    'undefined' is not a function (evaluating '$(this.options.id).getElements('li, span.grouped_sub_parent_item');')

我该如何调查？

【问题讨论】：

标签： jquery joomla mootools conflict jquery-easing

【解决方案1】：

jQuery 和 Mootools 都使用 $ 符号作为库的快捷方式。我的建议是查看您的 jquery 代码并替换 $ 变量，看看是否有所作为。因此，例如，您可以在使用

调用 jquery 库时完全禁用 jQuery 的 $ 别名

// Disable the $ global alias completely
jQuery.noConflict();

然后对于 jQuery 脚本使用

(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

为了安全起见，我也会对你的 mootools 脚本做同样的事情：

(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);

作为您的主机，您可能需要将这些添加到您的脚本中。

编辑：

按照您的方式编辑脚本没有任何问题。实际上最好的做法是在设计插件时考虑到 Joomla noConflict()！

确实使事情变得更复杂的 CDN 托管通常你会以这样的方式添加 jQuery

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="PATH TO SCRIPTS" type="text/javascript" />

在 joomla 网站上的问题是 joomla 将首先加载所有文件脚本，然后添加手写脚本。无论您添加它们的顺序是什么。即它会像加载它们一样

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script src="PATH TO SCRIPTS" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>

即使它们以相反的方式插入！因此，我建议将其插入到 jQuery 文件本身中的方式有点丑陋且编码不太好。我建议在本地托管 jQuery 文件。这不是有史以来最漂亮的方法——也不是最理想的方法，但它是我在 Joomla 中知道的唯一解决这个烦人事实的方法。但是，如果您可以在加载 jQuery 插件之前在 jQuery 下方手动添加 jQuery.noConflict(); - 这是一个更好的方法

【讨论】：

好的...这对我有所帮助。作为一个整体，我对 jQuery 和 JavaScript 非常陌生，所以想知道这需要多少工作？如果我必须遍历每个 .js 文件并在每个文件中进行这些修改，那将花费很长时间，因为大约有 7 个 .js 文件，其中一些文件超过 1000 行。你对乔治有什么建议吗？
您不需要替换每个 $!您将 (function($){ 放在每个 jquery 插件文件的顶部，将 })(jQuery); 放在底部。并将jQuery.noConflict();放在主jquery文件的底部
这不会限制以后可能使用的任何功能的范围吗？
没有。它应该做的就是声明 $ 符号正在用于表示 jQuery 别名。
乔治，请看我自己对我的问题的回答。评论太长了。

【解决方案2】：

您是否尝试过使用jQuery.moConflict(); 类似以下内容：

<script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

      // Use Prototype/Mootools with $(...), etc.

    </script>

【讨论】：

我会把它放在哪里？在 testify.js 文件的开头？在上面引用的每个 .js 文件的顶部是否存在冲突？或者在我从 CDN 导入 jQuery.min.js 文件时？
在你的 js 代码开始之前。您还应该将 jquery 代码中的 $ 实例替换为 jQuery
正如我在上面回复 George 的那样，我在 jQuery 和 JavaScript 整体上是一个新手，所以我真的很感谢你的手把手。
我认为这只是一个复制和粘贴。并用 jQuery 替换 $。

【解决方案3】：

我所做的是，我在头文件的包含文件中替换了以下代码：

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function (){    
      //Usage  
      $(".longText").textify();     
    });   
</script>

使用此代码：

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    jQuery(document).ready(function (){    
      //Usage  
      jQuery(".longText").textify();     
    });   
</script>

乔治，你说我应该添加

(function($){

在顶部和

})(jQuery);

在每个 jQuery 插件的底部，我应该添加

jQuery.noConflict();

在主 jQuery 文件的底部。

我所做的似乎行得通，但也许这不是做事的最佳实践方式。

还有，如何添加

jQuery.noConflict();

到 CDN 托管的 jQuery 副本？

【讨论】：