JavaScript Patterns to Cleanup your Code
7 likes12,689 views
The document discusses JavaScript patterns for improving code organization and managing variable scope using closures and prototypes. It provides various coding examples, illustrating how to maintain variable accessibility after function returns, as well as creating a calculator object with public methods. References to additional resources, including online training, sample code, and videos, are also included.
JavaScript Patterns to Cleanup your Code
- 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.
- 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.
- 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.
- 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
Editor's Notes
- #6: Discuss what function spaghetti code is (simply listing function after function without a container)
- #7: Uses standards-based CSS
- #11: Uses standards-based CSS
- #12: Uses standards-based CSS
- #13: Uses standards-based CSS
- #25: setVal = function (val) { this.currNumberCtl.innerHTML = val; }, setEquation = function (val) { this.eqCtl.innerHTML = val; }, clearNumbers = function () { lastNumber = null; equalsPressed = operatorSet = false; setVal.call(this, '0'); setEquation.call(this, ''); },
- #26: function extend(o,p){ for(prop in p){o.prototype[prop]=p[prop]; }; return o;}Then:extend(calculator, { numberClick: numberClick, setOperator: setOperator, clearNumbers: clearNumbers})Keith Chadwick