JavaScript Anti-Patterns: Moving from Java to JavaScript

Transcript

1. JAVASCRIPT ANTI-PATTERNS Moving from Java to JavaScript Wednesday, 2 May

   2012

2. EQUALITY AND IDENTITY Wednesday, 2 May 2012

3. if (accountBalance == 0) { rejectTransfer(); } else { acceptTransfer();

   } Wednesday, 2 May 2012

4. if (accountBalance == 0) { rejectTransfer(); } else { acceptTransfer();

   } Wednesday, 2 May 2012

5. “JavaScript has two sets of equality operators: === and !==,

   and their evil twins == and !=” D. Crockford - “JavaScript: The Good Parts” Wednesday, 2 May 2012

6. Equality (==) versus Identity (===) Wednesday, 2 May 2012

7. '' == '0' // false 0 == '' // true

   0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true Wednesday, 2 May 2012

8. SCOPE Wednesday, 2 May 2012

9. The Infamous Loop Problem Wednesday, 2 May 2012

10. function addLinks () { for (var i=0, link; i<5; i++)

    { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function () { alert(i); }; document.body.appendChild(link); } } Wednesday, 2 May 2012

11. Wednesday, 2 May 2012

12. “...unlike C, C++, and Java, JavaScript does not have block-level

    scope. All variables declared in a function, no matter where they are declared, are defined throughout the function.” D. Flanagan “JavaScript: The Definitive Guide” Wednesday, 2 May 2012

13. function addLinks () { var i; for (i=0, link; i<5;

    i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function () { alert(i); }; document.body.appendChild(link); } } Wednesday, 2 May 2012

14. function addLinks () { for (var i=0, link; i<5; i++)

    { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function (num) { return function () { alert(num); } }(i); document.body.appendChild(link); } } Wednesday, 2 May 2012

15. GLOBAL STATE Wednesday, 2 May 2012

16. messages = []; var elem = document.getElementById("messages"); elem.onclick = function

    () { var field = document.getElementById("input"); messages.push(field.value); }; Wednesday, 2 May 2012

17. messages = []; is equivalent to.... public static string[] messages;

    Wednesday, 2 May 2012

18. Why Global Variables Should Be Avoided When Unnecessary... • Non-locality

    • No Access Control or Constraint Checking • Implicit coupling • Concurrency issues • Namespace pollution • Memory allocation issues • Testing and Confinement http://c2.com/cgi/wiki?GlobalVariablesAreBad Wednesday, 2 May 2012

19. var messages = []; var elem = document.getElementById("messages"); var onclick

    = function (messages) { return function () { var field = document.getElementById("input"); messages.push(field.value); }; }; elem.onclick = onclick(messages); Wednesday, 2 May 2012

20. CLASS-ITUS Wednesday, 2 May 2012

21. function PersonDetails() { } PersonDetails.prototype = {}; PersonDetails.prototype.setAge = function

    (age) { this.age = age; }; PersonDetails.prototype.getAge = function () { return this.age; }; PersonDetails.prototype.setName = function (name) { this.name = name; }; PersonDetails.prototype.getName = function () { return this.name; }; var details = new PersonDetails(); details.setAge(28); details.setName("James Thomas"); updateDetailsForPerson(details); Wednesday, 2 May 2012

22. There’s a shorter way.... Wednesday, 2 May 2012

23. updateDetailsForPerson({ age: 28, name: "James Thomas" }); Wednesday, 2 May

    2012

24. “You have no privacy. Get over it.” Scott McNealy Wednesday,

    2 May 2012

25. PERFORMANCE Wednesday, 2 May 2012

26. function addClasses(element, classes) { for (var i = 0; i

    < classes.length; i++) { element.className += " " + classes[i]; } } Wednesday, 2 May 2012

27. “Reflow is the name of the web browser process for

    re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.” https://developers.google.com/speed/articles/reflow Wednesday, 2 May 2012

28. “Reflows are very expensive in terms of performance, and is

    one of the main causes of slow DOM scripts.” http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow Wednesday, 2 May 2012

29. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ •Adding, removing, updating DOM nodes •Hiding a DOM node

    with display: none (reflow and repaint) or visibility: hidden (repaint only, because no geometry changes) •Moving, animating a DOM node on the page •Adding a stylesheet, tweaking style properties •User action such as resizing the window, changing the font size or scrolling Wednesday, 2 May 2012

30. function addClasses(element, classes) { var newClasses = ""; for (var

    i = 0; i < classes.length; i++) { newClasses += " " + classes[i]; } element.className += newClasses; } Wednesday, 2 May 2012

31. Wednesday, 2 May 2012