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

We're considering switching our site from Prototype to jQuery. Being all-too-familiar with Prototype, I'm well aware of the things about Prototype that I find limiting or annoying.

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

My question for jQuery users is: After working with jQuery for a while, what do you find frustrating? Are there things about jQuery that make you think about switching (back) to Prototype?

我对jQuery用户的问题是:在使用jQuery一段时间之后,你觉得什么令人沮丧?是否有关于jQuery的事情让你考虑切换(返回)到Prototype?

8 个解决方案

#1

Probably the only real issue I've ever ran into is $(this) scope problems. For example, if you're doing a nested for loop over elements and sub elements using the built in JQuery .each() function, what does $(this) refer to? In that case it refers to the inner-most scope, as it should be, but its not always expected.

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

The simple solution is to just cache $(this) to a variable before drilling further into a chain:

简单的解决方案是在进一步钻入链之前将$(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");
    });
});

#2

I think the only that gets me is that when I do a selection query for a single element I have to remember that it returns an array of elements even though I know there is only one. Normally, this doesn't make any difference unless you want to interact with the element directly instead of through jQuery methods.

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

#3

My two pain points have been the bracket hell, can get very confusing

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

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

My other common issue has to do with the use of JSON in jQuery, I always miss the last comma,

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

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

Finally, I've been using jQuery for about 6 months now and I don't think I'll ever go back to prototypes. I absolutely love jQuery, and a lot of the tricks they use have helped me learn a lot. one cool trick that I like is using string literals for method calls, I never really did that too much with prototypes.

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

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

#4

(The only thing I can think of is that this is the element instead of a jQuery object in $("...").each(function)-calls, as $(element) is more often used then just the element. And that extremly minor thing is just about it.

(我唯一能想到的是,这是元素而不是$(“...”)中的jQuery对象。每个(函数)-calls,因为$(元素)更常用于元素。而那个极端微不足道的事就是它。

Example of the above (simplified and I know that there are other much better ways to do this, I just couldn't think of a better example now):

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

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

each is a function that takes a function as parameter, that function is called once for each matching element. In the function passed, this refers to the actual browser DOM-element, but I find that you often will want to use some jQuery function on each element, thus having to use $(this). If this had been set to what $(this) is, you'd get shorter code, and you could still access the DOM element object using this.get(0). Now I see the reason for things being as they are, namely that writing $(this) instead of this, is hardly that cumbersome, and in case you can do what you want to do with the DOM element the way it is is faster than the way it could have been, and the other way wouldn't be faster in the case you want $(this).)

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

#5

I don't think there are any real gotchas, or even any lingering annoyances. The other answers here seem to confirm this - issues are caused simply by the slightly different API and different JavaScript coding style that jQuery encourages.

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

I started using Prototype a couple of years ago and found it a revelation. So powerful, so elegant. After a few months I tried out jQuery and discovered what power and elegance really are. I don't remember any annoyances. Now I am back working on a project using Prototype and it feels like a step back (to be fair, we're using Prototype 1.5.1).

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

If you reversed the question - "What Prototype annoyances should I be aware of as a jQuery user?" - you would get a lot more answers.

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

#6

Nope. Nada. Nyet.

不。纳达。 NYET。

#7

.each:

jQuery (you need Index, even if you're not using it):

jQuery(你需要索引,即使你没有使用它):

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

Prototype (you're usually using the item, so you can omit the index):

原型(您通常使用该项,因此您可以省略索引):

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

#8

This is really only an annoyance if you're doing a lot of DOM manipulation. PrototypeJs automatically adds its API to DOM Elements, so this works in prototypejs (jQuery of course doesn't do this):

如果你正在进行大量的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

Even without running the native element through the $() function.

即使没有通过$()函数运行native元素也是如此。

PS: Should note that this doesn't work in IE.

PS:应该注意这在IE中不起作用。

#1