Tips for Better use of JavaScript

Variables notation and initialization

Object    var oObject = null;
Array    var aArray = [];
Number    var nNumber = -1;
String    var sString = ”;
Boolean    var bBoolean = false;
jQuery    $object

Cache results of DOM search

Twice the same DOM request, not efficient:

document.getElementById(‘tal’).style.display = ‘block’;
document.getElementById(‘tal’).value = ‘Could be cached’;

Better, save the element into a variable:
var oTal = document.getElementById(‘tal’);

oTal.style.display = ‘block’;
oTal.value = ‘Is cached’;

Example of a commented method

/**
* This method does stuff, talk about it here.
* @author Author
* @member ClassName.prototype
* @param {type} oParam Describe the parameter.
* @returns {type} Describe the return value.
*/
ClassName.prototype.aFunction = function(oParam){}

Reference: jsdoc-toolkit

jQuery to Native snippets

jQuery	Native
$(‘#idElement’);	document.getElementById(‘idElement’);
$(‘#idElement’).jQueryMethod();	$(document.getElementById(‘idElement’)).jQueryMethod()  ;
$(‘#idElement’).click(function(){});	$(document.getElementById(‘idElement’)).bind(‘click’, function(){});
$(‘.className’);	more than one element:var aArray = $.makeArray($(‘.className’)) // turns a jQuery collection into an array of DOM elements;only one element: $(‘.className’)[0] // returns the DOM element only;
$object.val()	oObject.value;
$object.attr(‘name’)	oObject.name // Works for most the attributes of an element
$object.css(‘styleName’, ‘value’)	oObject.style.[styleName] = ‘value’
$(‘.className’).each();	var aArray = $.makeArray($(‘.className’));var nArrayLen = aArray.length;var nCounter = 0; // Here initialized at 0 rather than -1!; for(; nCounter < nArrayLen ; nCounter++){}
$object.addClass(‘className’);	oObject.className += ‘ className’;
$object.removeClass(‘className’);	oObject.className = oObject.className.replace(‘className’, ”);
$object.html(‘tal’);	oObject.innerHTML = ‘tal’;
$object.append(”);	oObject.innerHTML = ”;oroObject.appendChild(oChild);