Prototype: It’s Not Just a JavaScript Library

Used to be that writing front-end code (HTML, CSS, JavaScript) wasn’t terribly complex. The syntax of HTML and CSS isn’t all that difficult to get the hang of and JavaScript (back in the day) was just a tool to validate form fields and play funny tricks on poor unsuspecting visitors. These days, JavaScript has become the language for front-end development and it’s not just for printing the ‘lastModifiedDate’ of a document.

Anyone who has kept up with the advancements of JavaScript knows the Prototype library. For those who don’t know, it’s a JavaScript library that wraps a whole bunch of functionality into easy to use (and remember) “shortcuts” for doing things like getting elements on a page, manipulating said elements, and dealing with data. It’s all written in JSON notation and allows you do things like:

$('element-id').addClassName('active').show();

Instead of

var element = document.getElementById('element-id');
    element.className = 'active';
    element.style.display = 'block';

Anyway, things like Prototype, jQuery, Dojo, and YUI all provide some convenience to writing custom JavaScript applications. I haven’t dug super deep into any of the frameworks’ source (mostly because the code has been somewhat obfuscated and “compressed” to save space), but I imagine that they all have one thing in common; they make use of the prototype property to extend both existing and custom built objects/classes in JavaScript.

The prototype Property

Even if you don’t make heavy use of one of the afforementioned framework/toolkits, using the prototype property to extend existing JavaScript objects and/or classes can be quite useful. Say you want an easy way to print out a date. Rather than createing a separate function, just extend the Date object itself.

Date.prototype.months = new Array(
    {name: "January",   abbrev: "Jan", number: "01"},
    {name: "February",  abbrev: "Feb", number: "02"},
    {name: "March",     abbrev: "Mar", number: "03"},
    {name: "April",     abbrev: "Apr", number: "04"},
    {name: "May",       abbrev: "May", number: "05"},
    {name: "June",      abbrev: "Jun", number: "06"},
    {name: "July",      abbrev: "Jul", number: "07"},
    {name: "August",    abbrev: "Aug", number: "08"},
    {name: "September", abbrev: "Sep", number: "09"},
    {name: "October",   abbrev: "Oct", number: "10"},
    {name: "November",  abbrev: "Nov", number: "11"},
    {name: "December",  abbrev: "Dec", number: "12"}
);
Date.prototype.dow = new Array(
    {name: 'Sunday',    abbrev: 'Sun', number: "01"},
    {name: 'Monday',    abbrev: 'Mon', number: "02"},
    {name: 'Tuesday',   abbrev: 'Tue', number: "03"},
    {name: 'Wednesday', abbrev: 'Wed', number: "04"},
    {name: 'Thursday',  abbrev: 'Thu', number: "05"},
    {name: 'Friday',    abbrev: 'Fri', number: "06"},
    {name: 'Saturday',  abbrev: 'Sat', number: "07"}
);
Date.prototype.getShortDate = function() {
    return this.months[this.getMonth()].abbrev + ' ' + this.getDate() + ' ' + this.getFullYear();
};
Date.prototype.getLongDate = function() {
    return this.dow[this.getDay()].name + ', ' + this.months[this.getMonth()].name + ' ' + this.getDate() + ', ' + this.getFullYear();
};
Date.prototype.getValueDate = function() {
    var d = (this.getDate() < 10) ? '0'+this.getDate():this.getDate();
    return this.getFullYear() + '/' + this.months[this.getMonth()].number + '/' + d;
};

var now = new Date();
document.write(now.getLongDate());

And you get something like this . Handy.

Now, there’s a couple of issues with the above script. One, the names aren’t localized and two, there’s probalby a more efficient way to formatting a date (much like the example on this page). But, it works in all the browsers I tested (Chrome, Firefox, IE7, Safari [Mac]).

You can prototype most of the default objects in JavaScript. Say you have an application the has to validate a bunch of text fields. Prototype the String objects to add built in parsing methods for various fields.

String.prototype.isValidEmail = function() { ... }
String.prototype.isValidPhone = function() { ... }

You get the idea.

The prototype property is a handy little tool. There maybe some limitations between browsers, but overall, it should help simplify your code and prevent repetitive and reduntant methods.