Beautiful JS

Underscore's pluck

2011-11-02T00:00:00-07:00

Underscore has taken a common use-case of the conventional map method and made it a method of its own, pluck:

_.pluck = function(obj, key) {
  return _.map(obj, function(value){ return value[key]; });
};

It takes an array or object and plucks values out of its members:

var a = document.getElementsByTagName('a');
_.pluck(a, 'href'); // get all `href` attributes as an array

It’s dead simple, but proves how valuable it is to abstract based on common usage.

PS. Please check out the new jsapi.info, a site I created to explore the source of various libraries, via which I discovered pluck!

jQuery's isPlainObject

2011-10-07T00:00:00-07:00

jQuery’s isPlainObject returns true if the argument is a regular object, i.e. one created via the Object constructor or object literal ({...}).

//...
isPlainObject: function( obj ) {
    // Must be an Object.
    // Because of IE, we also have to check the presence of the constructor property.
    // Make sure that DOM nodes and window objects don't pass through, as well
    if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
        return false;
    }

    try {
        // Not own constructor property must be Object
        if ( obj.constructor &&
            !hasOwn.call(obj, "constructor") &&
            !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
            return false;
        }
    } catch ( e ) {
        // IE8,9 Will throw exceptions on certain host objects #9897
        return false;
    }

    // Own properties are enumerated firstly, so to speed up,
    // if last one is own, then all properties are own.

    var key;
    for ( key in obj ) {}

    return key === undefined || hasOwn.call( obj, key );
}, //...

This is nice to know too:

// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.

DOM CSS normalization

2011-10-05T00:00:00-07:00

I think this DOM “hack” epitomises the idea of “beauty in function” quite well:

// `props` is a hash of animate'able CSS props,
// like "width", "padding", "borderLeftWidth", "color" etc.

function normalize(style){
    var css, rules = {}, i = props.length, v;
    parseEl.innerHTML = '<div style="'+style+'"></div>';
    css = parseEl.childNodes[0].style;
    while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
    return rules;
}

It’s not pretty code, but what it does is quite clever. It takes a style string, such as border:1px solid #f00;width:200px; and noramlizes it into its more specific properties, but only those properties that can be animated. For border this would be borderLeftWidth, borderLeftColor, borderTopWidth etc.

Doing this without taking advantage of the inherent normalization that occurs within the DOM would require more code and be more liable to break or have inconsistencies between itself and the actual DOM.

The above code is from Thomas Fuchs’ emile.js. If you’re looking for a tiny and swift animation helper then emile works well. I will also put a word in for a respectable fork, which exposes a slightly better API and more readable source: ded/emile.

Looping with freedom

2011-10-02T00:00:00-07:00

Loops don’t have to look like this:

for (var i = 0; i < array.length; i++) {}

… that’s how boring people write loops. “But”, you say, “That’s convention and therefore is the most readable format”.

True, but let’s be honest: variations of the above aren’t exactly challenging to grasp, and once you know a truthy expression from a falsey one, and the difference between prefix (++i) and postfix (i++) incrementers, there really is no point in holding back.

You don’t have to be entirely conventional.

for (var i = 0, l = a.length; i < l; i++); // cached length

for (var i = -1, l = a.length; ++i < l;); // bundled condition (increment+test)

for (var i = a.length; i--;); // reverse loop

// The body of the loop makes changes that'll affect
// the evaluation of the condition. E.g. removing nodes:
while (node.firstChild) {
    node.removeChild(node.firstChild);
}

// Do something with node and its following siblings
do { } while (node = node.nextSibling);

A loop’s body is expendable too:

while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
);

That last one’s from here: https://gist.github.com/527683

Backbone events definition

2011-10-01T00:00:00-07:00

Backbone.js allows you to define delegated-events for your views in a neat little hash in which you specify the event name, the selector (the context being the view itself) and a method-name to call on the view instance:

var FooView = Backbone.View.extend({

	events: {
	    "dblclick"                : "open",
	    "click .icon.doc"         : "select",
	    "contextmenu .icon.doc"   : "showMenu",
	    "click .show_notes"       : "toggleNotes",
	    "click .title .lock"      : "editAccessLevel",
	    "mouseover .title .date"  : "showTooltip"
	},

	//...

});

See the documentation for Backbone’s delegateEvents.

Sizzle's filters

2011-09-30T00:00:00-07:00

//...

radio: function( elem ) {
	return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
},

checkbox: function( elem ) {
	return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
},

file: function( elem ) {
	return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
},

password: function( elem ) {
	return elem.nodeName.toLowerCase() === "input" && "password" === elem.type;
},

image: function( elem ) {
	return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
},

//...

These methods are formatted in such a way that the string tested against in the second portion of the expression (e.g. "password") is aligned consistently in all methods, meaning more readable code!

The less beautiful alternative would be ... && elem.type === "password" which would mean “password”, “file” and “radio” would be on different columns in the code.

Tiny considerations like this matter!

See these filters on github.

Underscore's isNaN method

2011-09-29T00:00:00-07:00

// Is the given value `NaN`? `NaN` happens to be the only value in JavaScript
// that does not equal itself.
_.isNaN = function(obj) {
    return obj !== obj;
};

See _.isNaN on github.

It’s also worth mentioning Underscore’s annotated source.