Question

我们正在考虑将我们的网站从Prototype转换为jQuery。由于对Prototype非常熟悉，我很清楚Prototype的内容，我发现它有限制或烦人。

我对jQuery用户的问题是：在使用jQuery一段时间之后，你会发现什么令人沮丧的？是否有关于jQuery的事情让你考虑切换（返回）到Prototype？

Answer 1

我认为唯一能让我知道的是，当我对单个元素进行选择查询时，我必须记住它返回一个元素数组，即使我知道只有一个元素。通常，除非您想直接与元素交互而不是通过jQuery方法，否则这没有任何区别。

Answer 2

可能我遇到的唯一真正的问题是$（这个）范围问题。例如，如果你使用内置的JQuery .each（）函数对元素和子元素进行嵌套for循环，那么$（this）引用了什么？在这种情况下，它指的是最内部的范围，因为它应该是，但并不总是预期。

简单的解决方案是将$（this）缓存到变量中，然后再深入到链中：

$("li").each(function() {
    // cache this
    var list_item = $(this);
    // get all child a tags
    list_item.find("a").each(function() {
        // scope of this now relates to a tags
        $(this).hide("slow");
    });
});

Answer 3

（我唯一能想到的是这是$("...").each(function)中的元素而不是jQuery对象 - 调用，因为$(element)更常用于元素。而且极端次要事情就是这样。

以上示例（简化并且我知道还有其他更好的方法可以做到这一点，我现在想不出更好的例子）：

// Make all divs that has foo=bar pink.
$("div").each(function(){
  if($(this).attr("foo") == "bar"){
    $(this).css("background", "pink");
  }
});

each是一个函数，它接受一个函数作为参数，该函数对每个匹配元素调用一次。在传递的函数中，this指的是实际的浏览器DOM元素，但我发现你经常会想对每个元素使用一些jQuery函数，因此必须使用$(this)。如果将其设置为$(this)，则可以获得更短的代码，并且仍然可以使用this.get(0)访问DOM元素对象。现在我看到了事物本来就是这样的原因，即写$(this)代替这个，并不是那么麻烦，如果你能用DOM元素做你想做的事情就更快比你想要的方式更好，而在你想要$(this)的情况下，另一种方式不会更快。）

Answer 4

我的两个痛点一直是支架地狱，可能会让人非常困惑

$('.myDiv').append($('<ul />').append($('<li />').text('content')));

我的另一个常见问题是在jQuery中使用JSON，我总是想念最后一个逗号，

$('.myDiv').tabs({ option1:true, options2:false(, woops)});

最后，我已经使用jQuery大约6个月了，我不认为我会回到原型。我非常喜欢jQuery，他们使用的很多技巧帮助我学到了很多东西。我喜欢的一个很酷的技巧是使用字符串文字进行方法调用，我从来没有真正用原型做过多。

$('.myDiv')[(add ? 'add' : 'remove') + 'Class']('redText');

Answer 5

我认为没有任何真正的陷阱，甚至任何挥之不去的烦恼。这里的其他答案似乎证实了这一点 - 问题仅仅是由于jQuery鼓励的略有不同的API和不同的JavaScript编码风格造成的。

几年前我开始使用Prototype，并发现它是一个启示。如此强大，如此优雅。几个月后，我尝试了jQuery，发现了真正的强大和优雅。我不记得任何烦恼。现在我正在使用Prototype重新开发一个项目，感觉就像退后一步（公平地说，我们正在使用Prototype 1.5.1）。

如果你颠倒了这个问题 - “作为jQuery用户，我应该注意哪些原型烦恼？” - 你会得到更多答案。

Answer 6

不。纳达。 NYET。

Answer 7

<强>。每个

jQuery（你需要索引，即使你没有使用它）：

$.each(collection, function(index, item) {
  item.hide();
});

Prototype（您通常使用该项，因此您可以省略索引）：

collection.each(function(item) {
  item.hide();
});

Answer 8

如果你正在进行大量的DOM操作，这真的只是一个烦恼。 PrototypeJs会自动将其API添加到DOM Elements中，因此这适用于prototypejs（jQuery当然不会这样做）：

var el = document.createElement("div");
el.addClassName("hello"); // addClassName is a prototypejs method implemented on the native HTMLElement

即使没有通过$（）函数运行本机元素。

PS：请注意，这在IE中不起作用。

作为Prototype用户，我应该注意哪些jQuery烦恼？

8 个答案: