weblog
Five quick JavaScript tips
When we’re hiring JavaScript developers at Multimap we sometimes ask them to build a little application, or mash-up, with the Multimap API. It’s a pretty simple little task but it allows us to see how people approach building a web application.
This is a list of five things I often notice when looking at these little applications that could be improved. They may be obvious to some people, but certainly not to all. So, without more ado: five quick JavaScript tips to improve the quality of your code.
Use the submit event on forms
When attaching event handlers to forms, always use the submit event of the form and not the click event of the submit button.
If something is clickable, make sure it’s a link
Don’t attach click events to elements other than anchors. This is particularly important for users navigating the site with methods other than the mouse, where they may have difficulty getting focus on non-anchor elements.
Simple loop optimisation
There’s a very simple change you can make to a for loop to improve it’s performance.
In the second example the length of the elements array is stored in the j variable, so it’s not queried on every iteration of the loop.
Use anonymous functions for event handlers
Particularly with short functions like the below, it is far more readable to create an anonymous function than to reference another named function elsewhere. It also allows you to use closures of course.
Use Array.join instead of concatenating strings
When working with long strings that need to be joined up, it is more readable and better for performance to place strings in an array and use the join method to return a string.
Update
A number of people have mentioned to me that the Array.join technique for string concatenation is a bad one, particularly if you're only doing it with a small number of strings. Our benchmarks show it being faster for IE when you get to about 6/7 string concatenations, so it's been useful to us in some situations. But I'd agree with Stuart below that for the average situation it's not going to be worth it. However, I don't see using Array.join() for string concatenation as an abuse of JavaScript.
Comments:
regarding #2, i'd say "make sure it's an element which can receive focus". Buttons can be a perfect replacement for links if you don't want to deal with preventing default event behavior.
As for #4, it's purely personal preference (imho) and a matter of not repeating yourself (which is why it makes sense to define functions for even few lines)
Other than that, all valid points
I think #2 is not necessary and #5 was not familiar for javascript developers.
Re: "Use anonymous functions for event handlers"
This is exactly what you're 'not' supposed to do. This creates memory leaks in Internet Explorer. By attaching an anonymous function to a DOM element, the garbage collector has no reference of cleaning up after itself.
Hi Dustin,
As far as I understand it, you'd have to have a reference inside the event handler that pointed back to the DOM node it is attached to. The above code doesn't do that so wouldn't cause any memory leak problems in IE. Please someone correct me if I've misunderstood this.
If it did contain that reference, then yes, you might want to deal with that by adding 'anchor = null' after the event handler has been attached.
Hmm, OK. Now I think about it, I guess there is a reference to the 'anchor' element within the event handler, created by the closure? Hence a circular reference. Hmmm... bit more thought required here methinks.
Hmmmm...
Not sure about the loop optimisation. Are you sure "j" doesn't get assigned on each loop, thus querying elements.length anyway?
As for anonymous functions, there's some profiling to do there. If you want to assign more than one element, caching essentially the same function over and over might be an issue. In such a case, named function could be better. Also, using closure could be a maintenance issue.
As for joining arrays, I can see people maintaining that code at 3:00 AM going... "huh..."? Performance drawbacks of concatenating probably doesn't warrant making code difficult to understand. This is client side coding, so performance benefits are negligible.
I did link the link.onclick one. Seldomely take into account the handicapped. In any event, it would probably be worth while testing the onclick event on all "tab-stopping" and focusable elements?
Add your comment:
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
On 12 Sep 07
Stuart Colville said:
I'd disagree with the last item on using Array.join for concatenating strings: Firstly, the only real benefit in using this approach is when you are concatenating a lot of strings together. With three strings it may also actually be slower due to the overhead of initialising the array.
Secondly the performance increase from using Array.join in the right situation is generally only seen in IE due to it's slow JavaScript engine which has not seen the same levels of optimisations that have been made in other browsers.