6. This is not about
forcing you to
believe what I
believe.
7. This is about telling you what
worked for me and might as
well work for you.
8. Iâve collected a lot of ideas
and tips over time how to be
more effective.
9. Avoid heavy nesting
Make it understandable
Optimize loops
Avoid globals
Keep DOM access to a
Stick to a strict coding style
minimum
Comment as much as needed
Don't yield to browser whims
but not more
Don't trust any data
Avoid mixing with other
technologies
Add functionality with
JavaScript, not content
Use shortcut notations
Build on the shoulders of
Modularize
giants
Enhance progressively
Development code is not live
Allow for configuration and code
translation
15. For example
isOverEighteen()
might not make sense in
some countries,
isLegalAge() however
works everywhere.
16. Think of your code as a story â
if readers get stuck because
of an unpronounceable
character in your story that
isnât part of the main story
line, give it another, easier
name.
21. var current = null;
var labels = [
âhomeâ:âhomeâ,
âarticlesâ:âarticlesâ,
âcontactâ:âcontactâ
];
function init(){
};
function show(){
};
function hide(){
};
22. var current = null;
Everything is global
var labels = [
and can be accessed
âhomeâ:âhomeâ,
âarticlesâ:âarticlesâ,
âcontactâ:âcontactâ
];
function init(){
};
function show(){
current = 1;
};
function hide(){
show();
};
23. Problem: access is not
contained, anything in the
page can overwrite what you
do.
24. demo = {
Object Literal:
current:null,
Everything is
labels:[
contained but can be
âhomeâ:âhomeâ,
âarticlesâ:âarticlesâ,
accessed via the
âcontactâ:âcontactâ
object name.
],
init:function(){
},
show:function(){
demo.current = 1;
},
hide:function(){
demo.show();
}
}
26. (function(){
Anonymous Module:
var current = null;
Nothing is global.
var labels = [
âhomeâ:âhomeâ,
âarticlesâ:âarticlesâ,
âcontactâ:âcontactâ
];
function init(){
};
function show(){
current = 1;
};
function hide(){
show();
};
})();
28. module = function(){
Module Pattern:
var labels = [
You need to specify
âhomeâ:âhomeâ,
âarticlesâ:âarticlesâ, what is global and
âcontactâ:âcontactâ
what isnât â switching
];
syntax in between.
return {
current:null,
init:function(){
},
show:function(){
module.current = 1;
},
hide:function(){
module.show();
}
}
}();
30. module = function(){
Revealing Module
var current = null;
var labels = [
Pattern:
âhomeâ:âhomeâ,
Keep consistent
âarticlesâ:âarticlesâ,
syntax and mix and
âcontactâ:âcontactâ
];
match what to make
function init(){
global.
};
function show(){
current = 1;
};
function hide(){
show();
};
return{init:init,show:show,current:current}
}();
31. module = function(){
Revealing Module
var current = null;
var labels = [
Pattern:
âhomeâ:âhomeâ,
Keep consistent
âarticlesâ:âarticlesâ,
syntax and mix and
âcontactâ:âcontactâ
];
match what to make
function init(){
global.
};
function show(){
current = 1;
};
function hide(){
show();
};
return{init:init,show:show,current:current}
}();
module.init();
42. Comment what you consider
needed â but donât tell others
your life story.
43. Avoid using the line comment
though. It is much safer to
use /* */ as that doesnât
cause errors when the line
break is removed.
44. If you debug using
comments, there is a nice
little trick:
45. module = function(){
var current = null;
function init(){
};
/*
function show(){
current = 1;
};
function hide(){
show();
};
*/
return{init:init,show:show,current:current}
}();
46. module = function(){
var current = null;
function init(){
};
/*
function show(){
current = 1;
};
function hide(){
show();
};
// */
return{init:init,show:show,current:current}
}();
47. module = function(){
var current = null;
function init(){
};
//*
function show(){
current = 1;
};
function hide(){
show();
};
// */
return{init:init,show:show,current:current}
}();
48. Comments can be used to
write documentation â just
check the YUI doc:
http://yuiblog.com/blog/
2008/12/08/yuidoc/
63. 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â
};
64. 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?â
];
65. if(v){
var x = v;
} else {
var x = 10;
}
is the same as
var x = v || 10;
66. var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}
is the same as
var direction = (x > 100) ? 1 : -1;
/* Avoid nesting these! */
89. Code gets unreadable after a
certain level of nesting â
when is up to your personal
preference and pain
threshold.
90. A really bad idea is to nest
loops inside loops as that also
means taking care of several
iterator variables (i,j,k,l,m...).
91. You can avoid heavy nesting
and loops inside loops with
specialized tool methods.
92. function renderProfiles(o){
var out = document.getElementById(âprofilesâ);
for(var i=0;i<o.members.length;i++){
var ul = document.createElement(âulâ);
var li = document.createElement(âliâ);
li.appendChild(document.createTextNode(o.members[i].name));
var nestedul = document.createElement(âulâ);
for(var j=0;j<o.members[i].data.length;j++){
var datali = document.createElement(âliâ);
datali.appendChild(
document.createTextNode(
o.members[i].data[j].label + â â +
o.members[i].data[j].value
)
);
nestedul.appendChild(datali);
}
li.appendChild(nestedul);
}
out.appendChild(ul);
}
93. function renderProfiles(o){
var out = document.getElementById(âprofilesâ);
for(var i=0;i<o.members.length;i++){
var ul = document.createElement(âulâ);
var li = document.createElement(âliâ);
li.appendChild(document.createTextNode(data.members[i].name));
li.appendChild(addMemberData(o.members[i]));
}
out.appendChild(ul);
}
function addMemberData(member){
var ul = document.createElement(âulâ);
for(var i=0;i<member.data.length;i++){
var li = document.createElement(âliâ);
li.appendChild(
document.createTextNode(
member.data[i].label + â â +
member.data[i].value
)
);
}
ul.appendChild(li);
return ul;
}