This is a talk I gave at the AngleBrackets / DevIntersection conference in Vegas in April of 2013 covering JavaScript patterns that can be used to structure code and clean it up.

1. JavaScript Patterns
to Clean Up Your Code
Dan Wahlin

3. This presentation is based on an
online training course available at
http://www.pluralsight.com

4. 






6. 







7. 






9. 






11. function myNonClosure() {
var date = new Date();
return date.getMilliseconds();
}
Variable lost after
function returns

12. function myClosure() {
var date = new Date();
//nested function
return function () {
return date.getMilliseconds();
};
}
Variable stays around
even after function
returns

13. 






14. 


var calc = {
tempValue: 1,
add: function(x, y){
return x + y;
}
};

15. 
var my = my || {};

16. my.calc = {
tempValue: 1,
add: function(x, y) {
return x + y;
}
};

17. 






18. 









19. var Calculator = function(eq) {
this.eqCtl = document.getElementById(eq);
};
Calculator.prototype = {
add: function (x, y) {
var val = x + y;
this.eqCtl.innerHTML = val;
}
};
var calc = new Calculator('eqCtl');
calc.add(2,2);

20. 






21. 








22. var calculator = function(eq) {
var eqCtl = document.getElementById(eq),
doAdd = function(x,y) {
var val = x + y;
eqCtl.innerHTML = val;
};
return { add: doAdd }; //Expose public member
}('eqCtl');
calculator.add(2,2);

23. 






24. 










25. var Calculator = function (eq) {
this.eqCtl = document.getElementById(eq);
};
Calculator.prototype = function() {
var doAdd = function (x, y) {
var val = x + y;
this.eqCtl.innerHTML = val;
};
return { add : doAdd };
}();
var calc = new Calculator('eqCtl');
calc.add(2,2);

26. 







27. Sample Code, Book, and Videos
http://tinyurl.com/StructuringJSCode

28. http://weblogs.asp.net/dwahlin