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.

4b9a52ce862b15437f17695c02c61467?s=128

Anthony Colangelo

April 15, 2014
Tweet

Transcript

  1. 5.
  2. 7.
  3. 8.
  4. 12.

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

    activate: activate }; ! pageDot.activate();
  5. 14.
  6. 16.

    function PageDot() { ! // ... ! } ! var

    pageDot = new PageDot();
  7. 17.

    function PageDot(element) { ! // ... ! } ! var

    pageDot = new PageDot( ); document.querySelector('.dot-1')
  8. 18.

    dots = document.querySelectorAll('.dot'); var pageDots = [], ! for (var

    i = 0; i < dots.length; i++) { } pageDots.push( new PageDot(dots[i]) );
  9. 19.
  10. 21.
  11. 24.

    function Pagination() { // ... ! return { next: function()

    { }; } } pageDots[previousPage].deactivate(); pageDots[currentPage].activate();
  12. 25.
  13. 30.

    function Pagination() { // ... function notifyObservers(action, data) { for

    (var i = 0; i < observers.length; i++) { observers[i].update(action, data); } } // ... }
  14. 31.

    function Pagination() { // ... ! return { next: function()

    { pageDots[previousPage].deactivate(); pageDots[currentPage].activate(); notifyObservers('navigate', currentPage); } }; }