Javascript

Last modified Jan. 16, 2008 | Revision 35

Brehaut and Greg both develop software in JavaScript for their day jobs. Ollie has some involvement with the developing a Javascript implemention / enviroment. Angus tinkers with JavaScript as a part time job. mattw adds shiny moving bits to websites.

In-place array merge optimisation

If you want to speed up l1 = l1.concat(l2) you can replace it with l1.push.apply(l1,l2). After some basic profiling it turns out to be faster in all major browsers.

Libraries:

You may wish to link to javascript libraries that you like, and provide some notes on them

Base2

Dean Edwards ‍(JS Guru) has recently produced a new library. It is based on his Base class library, and the first release contains code that he hopes will be obsolute soon. It implements a number of methods that are expected to come along in the future, so that you can future proof your code now.

In particular, he has a blisteringly fast CSS Selector based DOM search method, the new JS 1.5 enumeration/iteration methods implement and a DOMContentLoaded implementation. Totally worth checking out.

See also: Crockford vs Base2

jQuery

jQuery is a fairly powerful library that is obsessed with conciseness at the expense of sanity. A quick summary of its design is as follows:

  • Everything is accessed either via the jQuery function (often aliased to $) or chained methods from the result of that function.
  • JQuery is overloaded for different behaviors based on different arguments
    • An HTML element – provides convenience methods via chaining for that element.
    • An array or array-like object – provides convenience methods via chainint for that array.
    • A String
      • Looks like CSS – finds nodes that matchs and is equivalent to a nodelist of element above.
      • Looks like some HTML – creates an element for you, and is then equivalent to passing a new element to jQuery
  • It expects you to want be either operating over a collection — and has methods like each, map, filter etc — or that you want to do the same thing to every element in the collection, such as register an event handler or apply css.

So far this is mostly sane, the problem for me is that is noticably more terse than it needs to be, eg:

 jQuery(‘a’).click(function ( ) { alert ($(this).val()); } );

means select all ‘a’ elements in the document, and bind a click handler that alerts the value of this element to each element found. I would prefer it was slightly more long winded eg something like

 jQuery.select(‘a’).each.onclick( function ( ) { 
     alert ($(this).val()); 
 } );

Another trick:

 jQuery(‘a’).click();

That triggers the click handler for all the a elements in the page.

Another oddity is that unlike every other library, each, map etc dont pass you the value as an argument to the function, but bind your function to the object as this, and pass the index into the array in.

Despite this, Resig et al have provided a tool that is very powerful and lets you express yourself quickly.

mattw kinda shares Brehaut‘s concerns, and has had some problems with jQuery. However, jQuery has let him do things easier and far faster than he ever could himself, which has been pretty crucial in getting a number of websites out the door. He will continue using it.

Links

Blog archives:

Some JS related stuff in my blog

Last modified Jan. 16, 2008 | Revision 35