JavaScript: Things I have seen or have done wrong in the past
June 9th, 2008“Learning is fun because you realize just how stupid you once were.” – Ryan Holder
1) Never use navigator.userAgent to test for which browser the user is using. The reason for this is because the browser lies to you about what it is. IE6 spits out Mozillia/4.0 in its user agent string. Instead, test for browser specific features like attachEvent (IE) vs. addEventListner.
Example:
function addEventHandler(node, eventType, handlerFunc)
{
if (node.attachEvent)
{
// IE
node.attachEvent(”on” + eventType, handlerFunc);
}
else if (node.addEventListner)
{
// non IE
node.addEventListner(eventType, handlerFunc, false);
}
else
{
// works for all browsers
node["on" + eventType] = handlerFunc;
}
}
2) In AJAX applications, do not use DOM functions such as alert, confirm, or prompt. Since the browser is a single thread, displaying an alert prompt will block the thread execution for the asynchronous call back function.
3) Prevent memory leaks in IE 6 by removing the event handler(s) before deleting nodes. Functions such as removeChild, replaceChild, and even innerHTML cause deletion of nodes. The problem lies in how IE 6 does garbage collection. It uses a reference counter to keep track of valid data. If you have two objects that only point to each other, they are valid references but can’t be reclaimed. When you add an event handler to a DOM node, you have a reference to JavaScript space. This handler has a reference to the DOM node (usually a var), creating a cyclical reference. Set the “on event” handler to null before removing the node.
4) The use of <script language=”javascript”> is deprecated. Instead, use the mine type <script text=”text/javascript”>. FYI: if you are including an external javascript file with the include tag, the mime type is ignored. The browser relies on the server to tell it what the file type being included is.
5) Place all include JavaScript file tags (<script src=”blah.js”/>) as close to the bottom of the body tag as possible. This can improve the load time performance of your code. Also, place all CSS as close to the top of the header tag as possible.
6) When declaring an array, do not use the new Array() notation. Instead, use the array literals: var newArray = [“value1”, “value2”,….]
7) Add a trim function to the string prototype. This way all strings will have it.
String.prototype.trim = function()
{
return this.replace(/^\s+|\s+$/g, “”);
}
8 ) JavaScript has function scope. There is no point in declaring variables inside of sub blocks. Just put them all at the top of the function block and they will be visible everywhere in the function.
9) Always declare your variables! JavaScript stores any undeclared variables in the global namespace. This can clobber any global variables.
10) Always compare values with ===, !==, etc… Using !=, ==, etc… causes type coercion.
11) Always put semicolons at the end of every line of code. JavaScript will throw in a line feed plus a semicolon to try to handle syntax errors. This can cause other errors or even mask existing ones. Also, be careful with line breaks. Do not break to a new line after a name, string, number, or ) ] ++ –
12) The use of the html comment to ‘hide’ JavaScript code from old browsers (<!– // –>) is pointless. I see this everywhere in code and it was a hack for very old browsers like mosaic, which didn’t support JavaScript..
13) When building HTML using string concatenation in JavaScript, use the join function instead of +. The problem is that the + operator has to create temp strings (same as in Java). Only use this when concatenating many strings. It is still faster to use the plus operator when concatenating only a couple of strings.
14) Run all of your JavaScript code thru JSLint: http://www.jslint.com/
