Javascript Best Practices

Javascript Best Practices from http://www.slideshare.net/cheilmann/javascript-best-practices-1041724

 

无意之中看到这篇文章，想到自己平时写JS时都不注意这些细节，把其中一些有用的记下

 

Avoid globals,Global variables are a terribly bad idea.You run the danger of your code being overwritten by any other javascript added to the page after yours. the workaround is to use closures and the module pattern.

var current=null; var labels=[ 'home':'home', 'articles':'articles', 'contact':'contact' ]; function init(){ }; function show(){ } function hide(){ }

 

Everything is global and can be accessed

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

Problem:access is not contained,anything  in the page can overwrite what you do.

 

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

var demo={ current:null, labels:[ 'home':'home', 'articles':'articles', 'contact':'contact' ], init:function(){ }, show:function(){ demo.current=1; }, hide:function(){ demo.show(); } }

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

Anonymous Module Nothing is global.

(function(){ var current=null; var labels:[ 'home':'home', 'articles':'articles', 'contact':'contact' ]; function init(){ } funciton show(){ current=1; } function hide(){ show(); } })();

Problem:No access from the outside at all (callbacks,event handlers)

Module Pattern: You need to specify what is global and what isn't-switching syntax in between.

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

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

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

var module=function(){ var current=null; var labels=[ 'home':'home', 'articles':'articles', 'contact':'contact' ]; funciton init(){ } function show(){ current=1; } function hide(){ show(); } return {init:init,show:show,current:current}; }();

Shortcut notatitions keep your code snappy and easier to read once you got used to it.

var cow=new Object(); cow.colour='white and black'; cow.breed='Holstein'; cow.legs=4; cow.front='moo'; cow.bottom='milk';

is the same as

var cow={ colour='white and black', breed:'Holstein', legs:4, front:'moo', bottom:'milk' };

 

var lunch=new Array(); lunch[0]='Dosa'; lunch[1]='Roti'; lunch[2]='Rice'; lunch[3]='what the heck is this?';

is the same as

var lunch=['Dosa','Roti','Rice','what the heck is this'];

 

 if(v){ var x=v; } else{ var v=10; }

is the same as

var x=v||10;

 

var direction; if(x>100){ direction=1; } else{ direction=-1; }

is the same as

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

 

By putting these into a configuration object and making this one public we make maintenance very easy adn allow for customization.

var carousel=function(){ var config={ CSS:{ classes:{curent:'current', scrollContainer:'scroll'}, IDs:{maincontainer:'carousel'} }, Labels:{ previous:'back', next:'next', auto:'paly' }, setting:{ amount:5, skin:'blue', autoplay:false } }; function init(){ }; function scroll(){ }; function highlight(){ }; return {config:config,int:init} }();

 

 

var names=['George','Ringo','Paul','John']; for(var i=i0;i<names.length;i++){ doSomeThingWith(names[i]); }

This means that every time the loop runs,JavaScript needs to read the length of the array.You can avoid that by storing the length value in a different variable:

var names=['George','Ringo','Paul','John']; var all=names.length; for(var i=0;i<all;i++){ doSomeThingWith(names[i]); }

An even shorter way of achieving this is to create a second variable in the preloop condition

var names=['George','Ringo','Paul','John']; for(var i=0,j=names.length;i<j;i++){ doSomeThingWith(names[i]); }