javascript - 用于 DOM 操作的原型(prototype)或 jQuery(客户端动态内容)

Question

我需要知道这两个 JavaScript 框架中哪个更适合已知 DOM 元素(通过 id)的客户端动态内容修改，在性能、内存使用等方面:

• 原型(prototype)的 $('id').update(content)
• jQuery 的 jQuery('#id').html(content)

编辑:我真正关心的问题在问题的末尾得到了澄清。

顺便说一句，这两个库在我的应用程序中并存且没有冲突，因为我使用 RichFaces 进行 JSF 开发，这就是我可以使用“jQuery”而不是“$”的原因。

我的页面中至少有 20 个可更新区域，我根据一些用户定义的客户端标准过滤或一些 AJAX 事件等为每个区域准备内容(表格、选项列表等)，像这样:

var html = [];
int idx = 0;
...
html[idx++] = '<tr><td class="cell"><span class="link" title="View" onclick="myFunction(';
html[idx++] = param;
html[idx++] = ')"></span>';
html[idx++] = someText;
html[idx++] = '</td></tr>';
...

那么问题来了，哪个更好用:

// Prototype's
$('myId').update(html.join(''));
// or jQuery's
jQuery('#myId').html(html.join(''));

其他需要的函数是 hide() 和 show()，它们在两个框架中都有。哪个更好？此外，我需要启用/禁用表单控件，并读取/设置它们的值。

请注意，我知道我的可更新区域的 ID(此时我不需要 CSS 选择器)。而且我必须告诉我，我将这些查询的对象保存在一些数据结构中供以后使用，因此在呈现页面时只请求一次，如下所示:

MyData = {div1:jQuery('#id1'), div2:$('id2'), ...};
...
div1.update('content 1');
div2.html('content 2');

那么，最佳做法是什么？

编辑:澄清一下，我最关心的是:

• 这些保存对象的内存使用(在我看来，jQuery 对象增加了太多开销)，而 OTOH 我的 DOM 元素已经被 Prototype 的扩展修改(默认由 Richfaces 加载)。
• 更新 DOM 时的性能(时间)和内存泄漏(替换元素的垃圾收集？)。从源代码中，我可以看到 Prototype 替换了 innerHTML 并使用内联脚本做了一些事情。 jQuery 似乎在替换内容之前调用“empty()”时释放内存。

如有需要请指正...

Answer 1

您最好还是使用 jQuery。这两个框架都很棒(我都使用它们)，但在您的情况下，jQuery 可能是赢家。

在我看来，原型(prototype)为 javascript 开发提供了更自然的语法。它以向一些核心类添加方法为代价来实现这一点，但它也受到 ruby​​ 的插入，这是常态。

另一方面，jQuery 在 dom 操作和事件观察方面要优越得多。在这些情况下，您的代码将更加简洁和易于管理，并将受益于事件委托(delegate)等出色的性能特性。 jQuery 也有一个更大的社区和更多的插件和代码示例。