(My) JavaScript Coding Guidelines and Standards

Preface

These JavaScript guidelines are based on usage with the Yahoo! User Interface Libary (YUI). Most of the stuff mentioned can also be applied with no regards which library you use (or if you don’t use one at all). As a general rule, I try to run my JavaScript code through JSLint and most of the following guidelines are based on and often reference Douglas Crockford’s Code Conventions for the JavaScript Programming Language.

Module Declaration

Each JavaScript feature/module should be coded according to a proper JavaScript Programming Pattern, preferably the Revealing Module Pattern. This keeps your JavaScript safe from namespace collisions and also means you can expose only a limited “public” interface whilst keeping the unsightly workings of your module hidden away in a closure. Naming of the module should follow the YAHOO.YourNameSpace.yourFunction convention. I have chosen “CRUSH” as my namespace, so the declaration of someFunction could be like:

YAHOO.CRUSH.someFunction = function() {} ();

Using YUI Methods

I try to use YUI methods over their native equivalents e.g. Use YAHOO.util.Dom.get() instead of document.getElementById(). The YUI equivilents tend to normalise buggy browser behaviour.

To reduce lookup times, use code similar to the following to reduce lookup times to YUI modules:

// shortcuts to modules var YDOM = YAHOO.util.Dom; var YEvent = YAHOO.util.Event; var YConnect = YAHOO.util.Connect;

Indentation

JavaScript code should be indented by 4 spaces.

  • In vi, the setting is: :set shiftwidth=4 tabstop=4 softtabstop=4 expandtab

Programming Constructs

Variables

  • Always declare private vars with var
  • All variables should be declared before used
  • The var statements should be the first statements in the function body

These can be – again – found in Douglas Crockford’s standards.

It is preferred that each variable be given its own line and comment.

var currentEntry; // currently selected table entry var level; // indentation level var size; // size of table

The new operator

Only use the new operator when calling a constructor function to instantiate a new object. It is unnecessary to use the new operator in all other instances, for example to create new arrays, objects, numbers, strings or boolean:

var names = []; // creates a new array, no need to use new Array() var tokenizer = {}; // creates new object, no need to do new Object() var average = 2; // creates new number, no need to use new Number() var message = "An error has occurred!"; // creates a new string, no need to use new String() var hasChildren = true; // creates new boolean, no need to use new Boolean()

As stated by Crockford: Do not use new Function to create function values. Use function expressions instead.

Functions

“Every function should only do one thing“. What this basically means is that you should aim towards keeping your functions as small as possible and rather have 3 different functions with smaller chunks of code than 1 big function. Having smaller chunks enhances readability of your code and makes it more maintainable. A good indicator of whether the function should be split up is the name of the function. If the function actually does more than the name of the function implies, then it sounds like the function should be split up into 2 or more functions.

Statements

Each line should contain at most one statement

Curly Braces should open on the same line and close at the same indent. Example:

if (tags) { // fill array } else { // display error }

When looping through objects using for (variable in object), use the singular for of the object for naming, example:

for (var person in people) { // do something with that Person array }

When looping through arrays, use a fast method for iterating over the elements in the array, e.g.

Page 1 of 3 | Next page