Home > HTML, JavaScript, jQuery > Tips for Better use of JavaScript

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);
Advertisements
Categories: HTML, JavaScript, jQuery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: