原型和jQuery和平共处？

Posted 2023-05-08

【中文标题】原型和jQuery和平共处？

【英文标题】：prototype and jQuery peaceful co-existence?

【发布时间】：2010-09-29 18:08:33

【问题描述】：

我对 javascript 知之甚少，但尽管如此，我还是想在我的 wordpress 博客上拼凑一些东西。它不起作用，我不知道如何解决它，嘿，这就是 *** 的用途，对吧？

首先，错误信息是：

Error: element.dispatchEvent is not a function
Source File: http://.../wp-includes/js/prototype.js?ver=1.6
Line: 3936

它发生在页面加载时。我的页面加载处理程序是这样注册的：

Event.observe(window, 'load', show_dates_as_local_time);

如果我禁用其他一些插件，错误就会消失，而这（加上谷歌搜索）让我得出结论，这是原型和 jQuery （被其他一些插件使用）之间的冲突。

其次，我遵循 wordpress 推荐的做法，即使用 wp_enqeue_script 将我的 JavaScript 的依赖项添加到 Prototype 库，如下所示：

add_action( 'wp_print_scripts', 'depo_theme_add_javascript' );

function depo_theme_add_javascript() 
    wp_enqueue_script('friendly_dates', 'javascript/friendly_dates.js', array('prototype'));

现在我也知道 jQuery 和 Prototype 之间存在一些潜在的冲突，这些冲突可以使用 jQuery noConflicts 方法解决。我试过从不同的地方打电话，但没有用。我不认为这是问题所在，因为 a) noConflict 函数仅与 $ 变量相关，这似乎不是问题，并且 b) 我会 希望 wordpress 帮我解决，因为它可以...

最后，使用 Venkman 调试器，我确定错误消息中引用的element 确实是htmlDocument，但也缺少dispatchEvent。不知道这是怎么发生的，因为它是一个标准的 DOM 方法？

【参考方案1】：

我非常喜欢许多库的一个令人讨厌的技巧，看起来原型就是其中之一。

Mootools 会这样做，如果我是对的，它涉及重载基本类上的许多原型，猴子修补它们。

同样，当 mootools 和 jQuery 存在时，我同样遇到了奇怪的行为，通常 jQuery 死了，因为它正在调用一些对象方法，该方法已被 Mootools 以某种方式重载/猴子修补。

此外，不可思议的是，将 mootools 从脚本使用列表中删除后，一切运行得更快，我的结论是对象污染更少。

现在我可能是错的，但根据我的经验，我得出的结论是，这些库根本不喜欢彼此共存，并且看到 mootools 代码在我看来如何降低完成正常事情的速度，我吸收所有基于 mootools 的代码并将其移植到 jQuery（我向您保证这是一项耗时的交易），结果是 fast 并且 没有奇怪错误的代码那是无法解释的。

我建议您将迁移视为至少 一个 选项。

还有一件事，写作时：

我倾向于在我所有的 jQuery 驱动代码中使用这种语法，以便在有人以某种方式破坏 '$' 的情况下进行一些安全封装。

运行时代码 这会在执行前等待 document.ready：

 jQuery(function($) 
      code_with_$_here; 
 ); 

jQuery 插件

(function($) 
    code_with_$_here; 
)(jQuery); 

使用这些将使人们更容易使用您碰巧编写的任何 jQuery 都能够使用它而不会出现太多冲突问题。

这基本上会让他们确保他们的代码没有做任何真正神奇的事情。

【讨论】：

谢谢，是的，这种可能性越来越大。当然，对于像我这样对 JavaScript 一无所知的人来说，jQuery 有点吓人……但它可能比解决这个特殊问题更容易！

【参考方案2】：

JQuery 网站上关于Using JQuery With Other Libraries 的这篇文章值得一读。它处理的不仅仅是 noConflict 选项。

【参考方案3】：

我认为你应该好好搜索一下，因为所有的 jQuery 插件都有一个原型版本，所有的原型插件都有一个 jQuery 版本。 如果你真的没有找到你所看到的并且你不能只使用一个库，请查看here@

jQuery.noConflict();

但是，我认为为每个库加载超过 15-20kb 是没有意义的 :)

【参考方案4】：

感谢大家的建议。最后我认为肯特的解释是最接近的，基本上相当于“原型坏了”。 （对不起，如果我对你的总结不正确:)

至于jQuery.noConflict 选项 - 我已经在问题中提到了这一点。 什么时候你运行这个方法会有所不同，而我对此几乎没有控制权。正如我所说，我尝试在几个不同的地方（特别是页眉和我的脚本文件）运行它，但没有效果。因此，正如我们所希望的那样，“只使用 noConflict”不是这个问题的答案，至少在没有其他信息的情况下不是。

此外，jQuery.noConflict 似乎 与 $ 变量有关，并且错误点周围的代码根本不处理该变量。当然它们可能是间接相关的，我没有追查到。

所以基本上我最终使用 jQuery 而不是 Prototype 重写了脚本，这实际上有其自身的问题。无论如何我已经发布了整个war story on my blog，如果你有兴趣的话。