×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
JavaScript Design Patterns Credit: http://mantia.me
Slide 2
Slide 2 text
Reusable solutions to commonly-occurring problems.
Slide 3
Slide 3 text
Relationships
Slide 4
Slide 4 text
Module Pattern
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
activate: function() { // ... } activeClass: 'current' var pageDot = { }; ,
Slide 7
Slide 7 text
function activate() { // ... } var pageDot = (function(){ var activeClass = 'current'; })();
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Revealing Module Pattern
Slide 10
Slide 10 text
! // ... })(); var pageDot = (function(){
Slide 11
Slide 11 text
! // ... })(); var pageDot = (function(){ return { };
Slide 12
Slide 12 text
! // ... })(); var pageDot = (function(){ return { activate: activate }; ! pageDot.activate();
Slide 13
Slide 13 text
}; return { activate: activate, deactivate: deactivate, isActive: function() { // ... }
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Constructor Pattern
Slide 16
Slide 16 text
function PageDot() { ! // ... ! } ! var pageDot = new PageDot();
Slide 17
Slide 17 text
function PageDot(element) { ! // ... ! } ! var pageDot = new PageDot( ); document.querySelector('.dot-1')
Slide 18
Slide 18 text
dots = document.querySelectorAll('.dot'); var pageDots = [], ! for (var i = 0; i < dots.length; i++) { } pageDots.push( new PageDot(dots[i]) );
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Facade Pattern
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Pagination PageDot PageDot PageDot PageArrow PageArrow
Slide 23
Slide 23 text
}; } function Pagination() { // ... ! return { next: function() { }
Slide 24
Slide 24 text
function Pagination() { // ... ! return { next: function() { }; } } pageDots[previousPage].deactivate(); pageDots[currentPage].activate();
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Observer Pattern
Slide 27
Slide 27 text
var pagination = new Pagination() slideViewer = new SlideViewer();
Slide 28
Slide 28 text
var pagination = new Pagination() slideViewer = new SlideViewer(); ! pagination.addObserver(slideViewer);
Slide 29
Slide 29 text
function Pagination() { var observers = []; ! function addObserver(observer) { observers.push(observer); } // ... }
Slide 30
Slide 30 text
function Pagination() { // ... function notifyObservers(action, data) { for (var i = 0; i < observers.length; i++) { observers[i].update(action, data); } } // ... }
Slide 31
Slide 31 text
function Pagination() { // ... ! return { next: function() { pageDots[previousPage].deactivate(); pageDots[currentPage].activate(); notifyObservers('navigate', currentPage); } }; }
Slide 32
Slide 32 text
function SlideViewer() { ! function update(action, data) { // ... } ! // ... ! }
Slide 33
Slide 33 text
var pagination = new Pagination() slideViewer = new SlideViewer(); ! pagination.addObserver(slideViewer);
Slide 34
Slide 34 text
Relationships
Slide 35
Slide 35 text
Learning JavaScript Design Patterns Addy Osmani
Slide 36
Slide 36 text
@acolangelo