miscoded

The other day (well, night actually) I was looking at a problem on a site that used the jQuery library. Though I've heard of it, I haven't seen jQuery on live sites before and I thought it shows off some quite interesting features of JavaScript.

The latest version of the library is available so you can see what I'm talking about.

A function can call itself recursively as constructor

Just inside the jQuery function we find:

if ( window == this )
return new jQuery(a,c);

This clever little trick means you don't need to use the "new" keyword all over your code to create a new jQuery object. You can just do

var obj=jQuery()

and the this check will detect that it wasn't called as a constructor and call itself recursively, this time using the "new" keyword to define the expected jQuery object.

I have a question about the if clause though - it presumably means trouble if you change the "this" object and use something else than window. Say,

var obj = jQuery.call(document)

would probably break something. I don't know jQuery well enough to tell if that would be a problem, but the check could perhaps be

if(this.constructor!=arguments.callee)

to catch all cases?

Using || operator to default to an argument inside a function call

You may be used to seeing the || operator being used to provide a default value for a variable. For example

var username=prompt('Your name please')||'anonymous'

will set the variable to "anonymous" if the user cancels the prompt or doesn't type any value.

It still took me a while to understand what is going on here:

return this.setArray(
// HANDLE: $(array)
a.constructor == Array && a ||

// HANDLE: $(arraylike)
// Watch for when an array-like object is passed as the selector
(a.jquery || a.length && a != window && !a.nodeType && a[0] != undefined && a[0].nodeType) && jQuery.makeArray( a ) ||

// HANDLE: $(*)
[ a ] );

The basic idea is: if the object a is an array, we pass it to the function directly. If it is an object that is somewhat similar to an array (for example a NodeList), we pass the result of calling the jQuery.makeArray function which will take all the elements/nodes and add them to an actual array. Otherwise, we just pass an array containing nothing but the object a.

The key to understanding this is to understand that the statement

a.constructor == Array && a

actually "returns" a if the first comparison is true. It is probably better phrased as "evaluates to a" but it may be easier explained as "returns".

Similarly,

(a.jquery || a.length && a != window && !a.nodeType && a[0] != undefined && a[0].nodeType) && jQuery.makeArray( a )

will go through all the conditions, and if they all hold true return the result of calling the makeArray function.

The || operator ties it all together and ensures the first clause that evaluates to something is chosen as input to the function.

You can use Array.push to add array elements to any object

The next interesting snippet is inside the setArray function itself:

setArray: function( a ) {
this.length = 0;
[].push.apply( this, a );
return this;
}

Look at [].push.apply( this, a );. What happens here is that the array literal's "push" method is used to push element a onto the this object which isn't an array but a jQuery object. That's right, push is generic and can be used with any object. It means the object gets a ".length" property like an array has and can be iterated with for loops. Example:

var obj = new Object(); /* Yes: an object, not an array. */
var str='';
Array.prototype.push.call(obj, 'Hello');
Array.prototype.push.call(obj, ' World');

for(var i=0;i<obj.length;i++){
str+=obj[i];
}
alert(str);

Array methods being generic is part of the amazing flexibility of JavaScript, but this feature of the language might not be well known among authors.

About the jQuery code, I wonder if their approach of creating an empty array literal to use its push method is slower or faster than my Array.prototype lookup. Perhaps the question will inspire a reader to do some performance testing?

What is event capture, and what are the implementation gotchas that cause problems for browsers and webmasters? Read on for details..

Read more...

This snippet is brought to you by Yahoo!Japan blogs. Quiz of the day: what is the RegExp meant to do and why does it fail?

if(img.match(/(.[jJ][pP][eE]?[gG]|.[gG][iI][fF]|.[pP][nN][gG])/)) {
return true;
}
return false;

(Yes, the variable name is a hint.)

liveclipboard is an interesting idea from Ray Ozzie. He's also blogged the process and brainstorming behind it. This is great..

Unfortunately it doesn't work in Opera.

The reason appears to be a bug in FireFox regarding how it evaluates XPath expressions. The document.evaluate spec states that the context node must belong to the same document as the method is called on. (The style is somewhat convoluted, I'm not 100% sure I've understood the phrase If the XPathEvaluator was obtained by casting the Document correctly but I can't think of any other reading that makes sense).

So, if you call document.evaluate( expression, someOtherDocument ...), Opera follows the spec to the t and throws an exception while FireFox doesn't. The liveclipboard script relies on this FireFox bug.

The fix is simple: import the nodes to the current document before XPathing them. For example:

hCardXmlNode = domParser.parseFromString(hCardXmlString, 'application/xml');

should be

hCardXmlNode = document.importNode(domParser.parseFromString(hCardXmlString, 'application/xml').firstChild, true);

One of these cases where testing in multiple browsers will highlight your assumptions about web standards.