6. R eadable code
• Indent your code
• C omment your code
– E ach method
– Large sections of code
– D ifficult-to-understand algorithms
– Hacks
7. Naming
• Use logical names for variables and
functions
– D on’t worry about length
• Variable names should be nouns (i.e., car)
• Function names should begin with a verb
(i.e., getName())
– For functions returning Boolean values, prefix
with “is”, such as isValid()
• Avoid useless names such as foo, bar,
temp
8. Indicate variable type
• Initialization
var found = false;
• Hungarian Notation
var sName = quot;Nicholasquot;;
• Type C omments
var cost /*:float*/ = 5.23;
10. C lient-s ide Layers
Behavior Presentation
(JavaScript) (CSS)
Structure
(HTML)
11. S eparate HTML and
JavaS cript
• JavaS cript in HTM L
<a onclick=quot;sayHi()quot;>text</a>
• HTM L in JavaS cript
element.innerHTML = quot;<div>quot;
+ quot;<a href=quot;/js/quot;>text</a></div>quot;;
12. S eparate C S S and
JavaS cript
• JavaS cript in C S S
div.hd {
width:
expression(ref.offsetWidth+quot;pxquot;);
}
• C S S in JavaS cript
element.style.color = quot;redquot;;
13. E vent handlers handle
events
function handleKeyPress(event){
if (event.keyCode == 13){
var value = 5 *
parseInt(txt.value);
div.innerHTML = value;
alert(quot;Updatedquot;);
}
}
14. E vent handlers handle
events
function handleKeyPress(event){
if (event.keyCode == 13){
performCalculation();
updateUI();
}
}
16. Don’t Modify Objects You
Don’t Own
• D on’t add methods
• D on’t override methods
• You don’t own O bject, Array, R egE xp,
S tring, Number, B oolean, D ate,
Function
17. Avoid g lobals
• All publicly-accessible
functions/ variables should be attached
to an object
• Namespace your objects
– D on’t go overboard
– Three levels is enough
YAHOO.Way.Too.Long.Namespace
18. Don’t overus e popular
techniques
• C losures/nested functions
– Use sparingly
• O bject literals
– S ingletons
– P ass data
19. Throw your own errors
function add5(value) {
if (arguments.length < 1) {
throw new
Error(quot;add5: Not enough argsquot;);
}
return value + 5;
}
20. Avoid null comparis ons
function sortArray(value) {
if (value != null) {
value.sort();
}
}
21. Avoid null comparis ons
function sortArray(value) {
if (value instanceof Array) {
value.sort();
}
}
22. Avoid null comparis ons
function sortArray(value) {
if (value instanceof Array) {
value.sort();
} else {
throw new Error(quot;sortArray:
argument must be an array.quot;);
}
}
23. Avoid null comparis ons
• Use instanceof for specific types of
objects
if (value instanceof
constructor){
• Use typeof to test for string, number,
B oolean
if (typeof value == quot;stringquot;) {
24. Us e C ons tants
function validate(value) {
if (!value) {
alert(quot;Invalid valuequot;);
location.href =
quot;/errors/invalid.phpquot;;
}
}
25. Us e C ons tants
var Constants = {
INVALID_MSG : quot;Invalid valuequot;,
INVALID_URL : quot;/errors/invalid.phpquot;
};
function validate(value) {
if (!value) {
alert(Constants.INVALID_MSG);
location.href =
Constants.INVALID_URL;
}
}
26. Us e C ons tants
• R epeated unique values
• UI strings
• UR Ls
• Any value that may change in the future
29. R ecommendations
• O ne object or object definition per file
– Indicate dependencies
• Use a build step
– C ombine files in appropriate order
– S trip comments/ whitespace
– Validate code