Programming

JavaScript DOs and DONTs

JavaScript DOs and DONTs

 

1.     Use Shortcut Notations:

 

This code [Avoid]

Is the same as [Use Instead]

 

var lunch = new Array();

lunch[0]=’Dosa’;

lunch[1]=’Roti’;

lunch[2]=’Rice’;

lunch[3]=’what the heck is this?’;

var lunch = [

   ‘Dosa’,

   ‘Roti’,

   ‘Rice’,

   ‘what the heck is this?’

];

 

if(v){

   var x = v;

} else {

   var x =10;

}

var x = v || 10;

 

var direction;

if(x > 100){

   direction = 1;

} else {

   direction = -1;

}

var direction = (x > 100)
? 1 : –1;

 2.     Avoid Globals:

Reason: You run the danger of your code being overwritten by
any other JavaScript added to the page after yours.

Workaround: use closures and the module pattern.

Problem: all variables are global and can be accessed; access
is not contained, anything in the page can overwrite what you do.

var current = null;var labels = {   ‘home’:‘home’,   ‘articles’:‘articles’,   ‘contact’:‘contact’      };function init(){};function show(){   current = 1;};function hide(){   show();};

Object Literal: Everything is contained
but can be accessed via the object name

 

Problem: Repetition of module name leads to huge code and is
annoying.

demo = {

   current:null,

   labels:{


‘home’:’home’,


‘articles’:’articles’,


‘contact’:’contact’

   },

   init:function(){

   },

   show:function(){


demo.current = 1;

   },

   hide:function(){


demo.show();

   }

}

 

Module Pattern: You need to specify what is global and what isnt –
switching syntax in between.

Problem: Repetition of module name, different syntax for
inner functions.

module = function(){

   var labels = {


‘home’:’home’,


‘articles’:’articles’,

      ‘contact’:’contact’

   };

   return {


current:null,


init:function(){

      },


show:function(){


module.current = 1;

      },


hide:function(){


module.show();

      }

   }

}();

 

Revealing
Module Pattern: Keep consistent syntax and mix and match what to make global
.

module = function(){   var current = null;   var labels = {      ‘home’:‘home’,      ‘articles’:‘articles’,      ‘contact’:‘contact’   };   var init = function(){   };   var show = function(){      current = 1;   };   var hide = function(){      show();   }   return{init:init, show:show, current:current}}();module.init();

Comments

comments

HTML Snippets Powered By : XYZScripts.com
%d bloggers like this: