Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Design Patterns

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.

Anthony Colangelo

April 15, 2014
Tweet

More Decks by Anthony Colangelo

Other Decks in Programming

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