jQuery 和原型冲突

Posted 2023-02-18

【中文标题】jQuery 和原型冲突

【英文标题】：jQuery & Prototype Conflict

【发布时间】：2010-09-13 04:05:25

【问题描述】：

我在一个 html 页面中使用 jQuery AutoComplete 插件，其中我还有一个使用原型的手风琴菜单。

它们都可以完美地单独工作，但是当我尝试在一个页面中实现这两个组件时，我收到了一个我无法理解的错误。

未捕获的异常：[Exception...“组件返回失败代码： 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult：“0x80004005（NS_ERROR_FAILURE）”位置：“JS框架:: file:///C:/文件和 设置/管理员/桌面/网站/js/jquery-1.2.6.pack.js :: 匿名 :: 第 11 行”数据：无]

我发现与 jQuery 冲突的文件是手风琴菜单使用的“effects.js”。我尝试用较新版本替换此文件，但较新版本似乎破坏了手风琴行为。

我的猜测是手风琴中使用的'effects.js'文件被修改以获得手风琴演示输出。我还尝试使用 jQuery 需要的覆盖方法来避免与其他库发生冲突，但没有奏效。

我从stickmanlabs.com获得了手风琴演示。

并且可以从jQuery site获取jQuery AutoComplete。

有其他人遇到过这个问题吗？

【问题讨论】：

docs.jquery.com/Using_jQuery_with_Other_Libraries

【参考方案1】：

有两种可能的解决方案：与旧版本的 Scriptaculous 和 jQuery 发生冲突（Scriptaculous 试图错误地扩展本机 Array 原型） - 首先尝试升级您的 Scriptaculous 副本。

如果这不起作用，您将需要使用noConflict()（如上所述）。但是，有一个问题。由于您包含一个插件，因此您需要按特定顺序执行包含，例如：

<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function($)
    $("#example").autocomplete(options);
  );
</script>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="accordion.js"></script>

希望这有助于澄清情况。

【讨论】：

没有比 John Resig 本人的回答更好的了！

【参考方案2】：

jQuery 允许您将 jQuery 函数从 $ 重命名为其他名称，以避免与其他库发生命名空间冲突。

你可以这样做

var J = jQuery.noConflict();

详情请看：michaelshadle.com — jQuery's no-conflict mode: yet another reason why it's the best

【参考方案3】：

我真的不明白在这种情况下同时使用这两个库的原因。

您可以使用 Prototype（实际上是 Scriptaculous'）Ajax.Autocompleter 并放弃 jQuery，或者您可以使用 jQuery 的 Accordion 并摆脱 Prototype。

同时使用这两个库并不是一个好主意，因为：

它们可能会导致冲突。 通过将它们都包含在内，您会强制用户同时下载它们。这不是带宽友好的方法。

【讨论】：

同意。像这样使用两个 javascript 框架从来都不是很好的理由。即使您更喜欢 jquery 中的控制器 X 和原型中的控制器 Y。额外下载和冲突。

从来没有一个很好的理由来使用这样的两个 javascript 框架。 是的。例如，Drupal CMS 附带 jQuery，许多贡献的模块都在此基础上扩展和构建。但是，在某些情况下，您想要添加没有 1:1 jquery 等效项的漂亮 javascript 小工具。此外，根据 SunSpider 基准数据，每个 javascript 框架在性能方面都有自己的优势和劣势。所以很高兴知道 Drupal 7 最终默认将所有 jquery 代码包装在匿名函数中！