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 full-size slide

  2. Reusable solutions to
    commonly-occurring
    problems.

    View full-size slide

  3. Relationships

    View full-size slide

  4. Module Pattern

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Revealing Module

    Pattern

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Constructor Pattern

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Facade Pattern

    View full-size slide

  17. Pagination
    PageDot PageDot PageDot
    PageArrow PageArrow

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Observer Pattern

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Relationships

    View full-size slide

  29. Learning JavaScript
    Design Patterns
    Addy Osmani

    View full-size slide