Thursday, November 4, 2010

webdeziner - Best practices for modern Javascript development

Use the correct <script> tag

When you have to use some Javascript in an html file, you should always use the following <script> tag:

1.<script type="text/javascript">
2.    ... some JS code
3.</script>

But instead, how many times have you seen this when looking at the source code?

1.<script type="text/javascript" language="javascript">
2.    ... some JS code
3.</script>

In HTML, the language attribute is deprecated due to its redundancy with the type attribute. You should never use it anymore.

Keep your code in an external file

Using an external .js file for your Javascript code is a lot cleaner than writing it in your html document, and it also allows the browser to cache the file, which will result in a faster website.

Put your Javascript code in a .js file, then use the <script> tag in your html document to import the file:

1.<script type='text/javascript' src='http://www.catswhocode.com/myscript.js'></script>

Don’t wrap code in HTML comments

In the 90′s some very old browsers weren’t able to interpret Javascript. In order to prevent unwanted results on those browsers, it was considered good practice in 1994-1997 to wrap Javascript code within html comments, so browsers with no Javascript support will simply ignore it.
Here is an example of some code wrapped within html comments:

1.<script language="JavaScript">
2.<!--
3....some code
4.//-->
5.</script>

However, in 2010, all browsers (Even IE6, that means a lot) can interpret Javascript, so there’s absolutely no need to wrap code within comments anymore. Even worse, if code is wrapped within comments and use the decrement symbol --, you’ll expect some weird problems due to the fact the browser may think it’s the end of the html comment.

Use a framework

Unless your Javascript code is really short and easy, you should always avoid reinventing the wheel by using a framework of your choice. In my opinion, jQuery is the best and has an awesome community, so you should give it a try if you haven’t already.

Always declare your variables using var

You should introduce any variable you create with the var statement, otherwise it gets to the global scope. Also, using var makes your code more readable and self-explanatory.
Example of variable created using the var statement:

1.var name = "Jean";
2.var size = data.length;

Keep your code unobtrusive

Some years ago, when a programmer wanted to add an event to an html element (for example, if you want to validate a date when the user typed something) he simply put Javascript code in the html, using a special attribute such as onblur, onchange, onclick, etc.
Example:

1.<input type="text" name="date" onchange="validateDate()" />

This works great, but it is a bit dirty. HTML should only contain the document description. Just like it’s bad practice to use inline CSS styles, it’s bad practice to use inline Javascript.

Instead, what about using some unobtrusive Javascript? Using jQuery, it is pretty easy to do, as you can see in the following example:

1.$(document).ready(function(){
2.    $('input[name=date]').bind('change', validateDate);
3.});

Include your scripts at the bottom of your HTML files

Not so long ago, it was generally considered good practice to insert your Javascript files within the <head> and </head> tags of your html document.
But browsers read html files from top to bottom, and load external files dynamically. Which mean that inserting scripts within the <head> and </head> tags will make your Javascript load before some of the page content.
In order to always load scripts after the content, Javascript files should always been included at the bottom of your html files, as shown below:

1.    <script src="myscript.js?" type="text/javascript"></script>
2.  </body>
3.</html>

Use JSLint

JSLint is a web-app which takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate solution.
JSLint is great to find bugs in your code, and also things that may be written in a better way. This site is definitely my favorite coding buddy when developing some Javascript.

Don’t use document.write

The good old document.write method has been deprecated for years, however it is still very common to see it while browsing code.

1.document.write("hello world");

Instead of using this deprecated method, you should use the DOM and the innerHTML function to insert text on a page:

1.document.getElementById('hello').innerHTML('hello world');

via webdeziner.livejournal.com

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)