JavaScript Design Patterns

A talk illustrating the use of a few simple JavaScript design patterns to create complex systems and improve overall code quality.

Originally given at Jersey Shore Tech on April 15, 2014.

Transcript

1. JavaScript Design Patterns
   Credit: http://mantia.me
   

   View Slide

2. Reusable solutions to
   commonly-occurring
   problems.
   

   View Slide

3. Relationships
   

   View Slide

4. Module Pattern
   

   View Slide

5. View Slide

6. activate: function()
   {
   // ...
   }
   activeClass: 'current'
   var pageDot = {
   };
   ,
   

   View Slide

7. function activate() {
   // ...
   }
   var pageDot = (function(){
   var activeClass = 'current';
   })();
   

   View Slide

8. View Slide

9. Revealing Module

   Pattern
   

   View Slide

10. !
    // ...
    })();
    var pageDot = (function(){
    

    View Slide

11. !
    // ...
    })();
    var pageDot = (function(){
    return {
    };
    

    View Slide

12. !
    // ...
    })();
    var pageDot = (function(){
    return {
    activate: activate
    };
    !
    pageDot.activate();
    

    View Slide

13. };
    return {
    activate: activate,
    deactivate: deactivate,
    isActive: function() {
    // ...
    }
    

    View Slide

14. View Slide

15. Constructor Pattern
    

    View Slide

16. function PageDot() {
    !
    // ...
    !
    }
    !
    var pageDot = new PageDot();
    

    View Slide

17. function PageDot(element) {
    !
    // ...
    !
    }
    !
    var pageDot = new PageDot(
    );
    document.querySelector('.dot-1')
    

    View Slide

18. dots = document.querySelectorAll('.dot');
    var pageDots = [],
    !
    for (var i = 0; i < dots.length; i++) {
    }
    pageDots.push( new PageDot(dots[i]) );
    

    View Slide

19. View Slide

20. Facade Pattern
    

    View Slide

21. View Slide

22. Pagination
    PageDot PageDot PageDot
    PageArrow PageArrow
    

    View Slide

23. };
    }
    function Pagination() {
    // ...
    !
    return {
    next: function() {
    }
    

    View Slide

24. function Pagination() {
    // ...
    !
    return {
    next: function() {
    };
    }
    }
    pageDots[previousPage].deactivate();
    pageDots[currentPage].activate();
    

    View Slide

25. View Slide

26. Observer Pattern
    

    View Slide

27. var pagination = new Pagination()
    slideViewer = new SlideViewer();
    

    View Slide

28. var pagination = new Pagination()
    slideViewer = new SlideViewer();
    !
    pagination.addObserver(slideViewer);
    

    View Slide

29. function Pagination() {
    var observers = [];
    !
    function addObserver(observer) {
    observers.push(observer);
    }
    // ...
    }
    

    View Slide

30. function Pagination() {
    // ...
    function notifyObservers(action, data) {
    for (var i = 0; i < observers.length; i++) {
    observers[i].update(action, data);
    }
    }
    // ...
    }
    

    View Slide

31. function Pagination() {
    // ...
    !
    return {
    next: function() {
    pageDots[previousPage].deactivate();
    pageDots[currentPage].activate();
    notifyObservers('navigate', currentPage);
    }
    };
    }
    

    View Slide

32. function SlideViewer() {
    !
    function update(action, data) {
    // ...
    }
    !
    // ...
    !
    }
    

    View Slide

33. var pagination = new Pagination()
    slideViewer = new SlideViewer();
    !
    pagination.addObserver(slideViewer);
    

    View Slide

34. Relationships
    

    View Slide

35. Learning JavaScript
    Design Patterns
    Addy Osmani
    

    View Slide

36. @acolangelo
    

    View Slide