原型和jQuery的和平共存？

Question

我对JavaScript的了解很少，但尽管如此，我仍然试图在我的WordPress博客上拼凑一些东西。它没有起作用，我不知道该怎么解决，这就是StackOverflow的用途，对吧？

首先，错误信息是：

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

如果我禁用其他插件，错误消息会消失。这让我得出结论，这是prototype和jQuery之间的冲突（其他插件使用了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方法？

- Alastair

Answer 1

许多库都采用了一个令人不爽的技巧，而我对此特别喜欢，原型似乎也是其中之一。Mootools也这样做，如果我没记错的话，它会重载很多基本类的原型，并对它们进行monkey patching。

同样，当mootools和jQuery同时存在时，我也遇到了奇怪的行为，通常是因为jQuery调用了某个对象方法，而该方法已被Mootools某种方式地重载/monkey patched了，这导致jQuery死机。

此外，神秘的是，从使用列表中删除mootools会使所有代码运行得更快，我认为这是由于减少了对象污染所致。

现在我可能错了，但我从经验中得出结论，这些库只是不想彼此共存，而且从我看到Mootools代码降低了正常操作速度的情况来看，我吸收并将所有基于Mootools的代码移植到jQuery（我向您保证，这需要耗费一定时间），结果是快 而且没有无法解释的奇怪错误。

我建议您考虑迁移至jQuery作为至少一种选择。

还有一件事，写代码时：

我倾向于在所有使用jQuery的代码中使用此语法，以便在某人以某种方式破坏'$'时进行安全封装。

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

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

jQuery插件

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

使用这些方法将使得使用你编写的任何jQuery的人更容易使用，而不会出现太多冲突问题。

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

- Kent Fredric

---

谢谢，是的，这看起来越来越可能。当然，对于像我这样对JavaScript一无所知的人来说，jQuery有点令人生畏...但它可能比解决这个特定问题更容易！ - Alastair

Answer 2

值得一读的是JQuery网站上关于使用其他库与JQuery一起使用的文章。它不仅涉及noConflict选项。

- Soviut

Answer 3

我认为你应该仔细搜索，因为所有的jQuery插件都有一个原型版本，而所有的原型插件都有一个jQuery版本。如果你真的找不到需要的内容，且不能只使用一个库，那么可以看看这里。

jQuery.noConflict();

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

- Staicu Ionut

Answer 4

感谢大家的建议。最终，我认为肯特的解释最接近，基本上可以归结为“原型已损坏”。（如果我错误地总结了您的话，对不起：）

至于jQuery.noConflict选项-我已经在问题中提到过了。它会在运行此方法时产生影响，而我几乎无法控制。正如我所说，我已经尝试在几个不同的位置运行它（具体来说是页面头部和我的脚本文件），但没有效果。因此，虽然我们都希望它能够解决问题，但“只需使用noConflict”并不是这个问题的答案，至少需要更多的信息。

此外，jQuery.noConflict似乎与$变量有关，而错误点周围的代码根本不涉及该变量。当然，它们可能间接相关，我还没有追踪到。

基本上，我最终使用jQuery重写了脚本，而不是Prototype，但实际上这也带来了自己的问题。无论如何，如果您感兴趣，我已经在我的博客上发布了整个战争故事。

- Alastair