As I just posted, I recently had the chance to add JQuery style function chaining to my Spatial Query javascript library. By function chaining, I mean the ability to do something like this:


$("div.of_interest").css("border", "solid 1px black").show()


A useful technique in situations where you plan on performing multiple operations on a given set of data.

I went straight to the source to determine how to create that sort of functionality – the JQuery source, mirrored on GitHub by JackDanger.

The relevant code was in jquery/src/core.js. The simplified version of the technique could be stated like:

var jQuery = function(selector, context){
  return new jQuery.fn.init(selector, context);
}

jQuery.fn = jQuery.prototype = {
  init : function(selector, context){
    /*
      Acquire the elements in question
    */
    return this;
  },
  // The rest of jQuery's functionality would
  // be defined in this prototype, such as
  // .each, .find, etc.

};

jQuery.fn.init.prototype = jQuery.fn;

The line of particular interest is the line:


jQuery.fn = jQuery.prototype = { // etc.


Here we assign the prototype to a separate variable, jQuery.fn, in order to refer to its members (namely the init function) in the main jQuery function. Then, in order to make sure that new instances of jQuery.fn.init have the methods declared in jQuery.prototype, we assign the jQuery.fn.init.prototype to the jQuery.prototype.

Now at this point, the jQuery function can return instances of “itself”. In order to chain from one function to the next, functions of the jQuery.prototype will either return this or jQuery(collection_of_elements) to allow the chain to continue.

There are lots of other cool techniques in the jQuery source – they’re obviously having fun pushing Javascript to what limits they can find.

I recently had the need to build sets of polygons and compute an overall union of them; being the painfully naive person I am, I jumped right into the task thinking that it would be relatively easy. A week later, I had finally arrived at a working polygon clipper modified for boolean operations on poygons (mostly, see the README), but boy was it ugly. Throughout the entire process, I kept thinking “wouldn’t it be nice if I had a decent Vector/Matrix/Polygon data structure”. I made a few dirty attempts at writing something I liked looking at, but none of them were very satisfactory – really, I wanted something that looked a lot like JQuery. Something that just took whatever data I threw at it, and most of the time did something sane with it.

So, I decided I’d write Spatial Query, a small JS library that lets you do all the gruntwork Vector/Matrix/Polygon work easily. And some not so gruntwork stuff, that I just needed anyways – like generating a convex hull, or the union of two polygons.

  $p([[0,0], [0, 10], [10, 10], [10, 0]]).convex_hull_2d();
  $p([[0,0], [0, 10], [10, 10], [10, 0]]).union_2d([[5,5], [5, 7], [15, 7], [15, 5]]);

Since the project that spawned this library dealt with geometric data, there is also some functionality that will allow you to compute distances between latitude and longitude, as well as conversion between Latitude / Longitude and WSG84 coordinates:

  $ll([lat1, lon1]).distance_to([lat2, lon2]);
  $ll([lat1, lon1]).vector();

Better explanation and more is available in the README

There are still some kinks in this version that I’ve got to iron out, so I’ve not even bothered assigning a number to it. Consider it version zero point ugly.

Thanks to my employer, the Indianapolis Star, for letting me open this to the public.