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. ! // ... })(); var pageDot = (function(){ return {

    activate: activate }; ! pageDot.activate();
  2. function PageDot() { ! // ... ! } ! var

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

    pageDot = new PageDot( ); document.querySelector('.dot-1')
  4. dots = document.querySelectorAll('.dot'); var pageDots = [], ! for (var

    i = 0; i < dots.length; i++) { } pageDots.push( new PageDot(dots[i]) );
  5. function Pagination() { // ... ! return { next: function()

    { }; } } pageDots[previousPage].deactivate(); pageDots[currentPage].activate();
  6. function Pagination() { // ... function notifyObservers(action, data) { for

    (var i = 0; i < observers.length; i++) { observers[i].update(action, data); } } // ... }
  7. function Pagination() { // ... ! return { next: function()

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