Comments on: Prototype's Array.any/all with jQuery

By: Andy

Andy — Wed, 02 Oct 2013 15:08:42 +0000

(function(window, $, undefined) {
  $.fn.all = function(callback) {
    var all = true;
    this.each(function() {
      if ( !callback.call(this) ) {
        all = false;
        return false;
      }
    });
    return all;
  };
  $.fn.any = function(callback) {
    var any = false;
    this.each(function() {
      if ( !!callback.call(this) ) {
        any = true;
        return false;
      }
    });
    return any;
  };
})(this, jQuery);

By: JDD

JDD — Mon, 12 May 2008 13:46:44 +0000

Prototype's addition of document.getElementsByClassName() is deprecated and it is encouraged to use $$() instead.

They returned the results $A'd to support chaining.
Prototype created the document.getElementsByClassName function before it was even marked for addition in the effected browsers.

- JDD

By: barneyb

barneyb — Sat, 10 May 2008 20:49:22 +0000

Matt,

Interesting. It's surprising that Prototype opted to return the $A()-ed result; I would not have expected that. But as the article points out, now that $$() is around, getElementsByClassName is basically unnecessary. Not going to help existing code, of course.

By: Matt W.

Matt W. — Sat, 10 May 2008 18:00:43 +0000

They did do that, but here is an article that discussed the problems that happened when getElementsByClassName went native –

http://ejohn.org/blog/getelementsbyclassname-pre-prototype-16/

By: barneyb

barneyb — Sat, 10 May 2008 16:40:17 +0000

Matt,

I haven't actually checked, but I'd be utterly shocked if Prototype didn't do this:

if (! document.getElementsByClassName) { document.getElementsByClassName = function(...) {...} }

It's about making browsers consistent, not overriding built-in functionality (unless it's incorrect). So you use the native implementation wherever you can, supply a non-native one wherever it's needed, and have a consistent interface across browsers.

By: Matt W.

Matt W. — Sat, 10 May 2008 15:35:55 +0000

I see what you are saying, but my point was that because prototype added the getElementsByClassName method to the document object, it will overwrite the native implementation in Firefox 3. The native implementation should always be significantly faster. If jQuery were add to the grep method to the Array object directly, it would overwrite any future native grep method.

By: barneyb

barneyb — Fri, 09 May 2008 23:34:58 +0000

Matt, document.getElementById("id") is requesting element from the document object. document.getElementsByClassName("name") is requesting elements from the document. Those are both the "right" way, in my view. CF doesn't have a direct corollary, but one could consider xmlSearch(document, "//*[@class='name'") to be very much the same thing (returning a list of elements from the document with the specified class name). Note the inversion of where the behaviour lives (on the object itself vs. in a global function). So getElementsByClassName follows the standard OO-like nature of JS.

By: Matt W.

Matt W. — Fri, 09 May 2008 23:25:29 +0000

I believe jQuery does it for forward compatibility. See prototype using getElementsByClassName which is now native to Firefox 3.

By: barneyb

barneyb — Fri, 09 May 2008 18:10:00 +0000

Patrick, Good call on grep(), that definitely makes the objective more clear. I'll have to take a deeper look at the Collection plugin, but I really don't see what's wrong with modifying the Array prototype. JavaScript (and ECMAScript) are specifically designed so that you can extend functionality that way - why not leverage it and make you code simpler? Maybe it's just the OO guy in me, but it annoys me that jQuery and CF share "separate state and behaviour" paradigm, and while CF does it for backwards compatibility, jQuery doesn't have an excuse. Why should I have to supply my "something" to some external procedure to add behaviour, why can't I just ask the "something" directly? CF: arrayLen(myArray); vs. myArray.length; jQuery: jQuery.grep(myArray, function(){}); vs.

myArray.grep(function(){});



By: Patrick McElhaney
Patrick McElhaney — Fri, 09 May 2008 15:23:39 +0000
I found a slightly simpler way to do what you want.

All: 

jQuery.grep(images, function(o){return o.status == "ready";}).length == images.length


Any:

jQuery.grep(images, function(o){return o.status == "ready";}).length > 0


Also, have you looked at the Collection plugin? I haven't used it myself, but it might have some of the stuff you're missing.

If I were you I would try and avoid bringing stuff over directly from Prototype. It might stifle your JQuery indoctrination. :-)