Tackling JavaScript
Lately, I’ve been looking at JavaScript a little differently. Instead of writing JavaScript as dirty hacks to do DOM manipulation, handle JavaScript as a first-class language in itself and write elegant code to do DOM manipulation. Something I should have been doing all along. Toward that goal, I tackled a little project to exercise writing elegant JavaScript code.
At least until I can have python in the browser.
This was sparked by bit of fiddling with SproutCore and reading about the other advanced JavaScript frameworks. In those frameworks, binding a bit of data to a view is the standard. The framework handles the glue code that keeps that data and the display in sync, while the programmer is left to do whatever data manipulation is needed.
So I wrote a small SproutCore application that read network feeds and updated a displayed HTML list. The code that updates this need only concern itself with the data side of the equation and not the view. Which was all MVC and fine and dandy. Elegant in fact.
But what bothered me was this data was handled in an intermediate representation defined by the framework. So to manipulate this data, I needed to know the framework’s API for manipulating it’s representation.
There’s no reason that internal representation cannot be similar (if not exactly like) JavaScript’s own Array.prototype.
Hence boundarray was born. Just a simple wrapper around the JavaScript Array.prototype with a near exact implementation that also handles updating a HTML list element. I thought this would be a perfect little project to exercise my JavaScript, so I quickly put up a public github repository and got coding.
It was certainly a learning experience in writing clean JavaScript code as well as truly getting to know JavaScript’s Array.prototype.
boundarray
boundarray provides a constructor called BoundArray that creates an intermediate representation that behaves exactly as a JavaScript Array with one single exception.
An example use of boundarray with code snippets and a working example lives here.
After conversations with a couple of JavaScript expert friends of mine, it became evident that it’s currently impossible to implement Array.prototype entirely in JavaScript.
The problem creeps in because Array.prototype supports implicitly growing the length of the Array. For example:
var numbers = ['one', 'two', 'three'];
numbers[4] = 'five';The assignment in the second statement is out of the bounds of the array. So JavaScript silently grows the array and makes the assignment leaving an array that looks like: ['one', 'two', 'three', undefined, 'five']
Currently JavaScript provides no means of catching assignment to undefined properties. There is a way to catch calls to undefined properties with Object.prototype.__noSuchMethod__, but no similar method for properties.
But failing that one little difference, a BoundArray behaves exactly like a JavaScript Array as defined at the Mozilla Developer Center, but has the side effect of updating a displayed HTML list element.
For more information on BoundArray see it’s public github repository.
Next on the list is to consider rolling this into a plugin for JQuery or something similar.
