JavaScript Patterns to Cleanup your Code

13,926
-1

Published on

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.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,926
On Slideshare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Discuss what function spaghetti code is (simply listing function after function without a container)
  • Uses standards-based CSS
  • Uses standards-based CSS
  • Uses standards-based CSS
  • Uses standards-based CSS
  • 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, '');       },
  • 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
  • JavaScript Patterns to Cleanup your Code

    1. 1. JavaScript Patterns to Clean Up Your Code Dan Wahlin
    2. 2. This presentation is based on an online training course available at http://www.pluralsight.com
    3. 3.      
    4. 4.       
    5. 5.      
    6. 6.      
    7. 7. function myNonClosure() { var date = new Date(); return date.getMilliseconds(); } Variable lost after function returns
    8. 8. function myClosure() { var date = new Date(); //nested function return function () { return date.getMilliseconds(); }; } Variable stays around even after function returns
    9. 9.      
    10. 10.    var calc = { tempValue: 1, add: function(x, y){ return x + y; } };
    11. 11.  var my = my || {};
    12. 12. my.calc = { tempValue: 1, add: function(x, y) { return x + y; } };
    13. 13.      
    14. 14.         
    15. 15. 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);
    16. 16.      
    17. 17.        
    18. 18. 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);
    19. 19.      
    20. 20.          
    21. 21. 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);
    22. 22.       
    23. 23. Sample Code, Book, and Videos http://tinyurl.com/StructuringJSCode
    24. 24. http://weblogs.asp.net/dwahlin

    ×