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.
JavaScript Design PatternsCredit: http://mantia.me
View Slide
Reusable solutions tocommonly-occurringproblems.
Relationships
Module Pattern
activate: function(){// ...}activeClass: 'current'var pageDot = {};,
function activate() {// ...}var pageDot = (function(){var activeClass = 'current';})();
Revealing Module Pattern
!// ...})();var pageDot = (function(){
!// ...})();var pageDot = (function(){return {};
!// ...})();var pageDot = (function(){return {activate: activate};!pageDot.activate();
};return {activate: activate,deactivate: deactivate,isActive: function() {// ...}
Constructor Pattern
function PageDot() {!// ...!}!var pageDot = new PageDot();
function PageDot(element) {!// ...!}!var pageDot = new PageDot();document.querySelector('.dot-1')
dots = document.querySelectorAll('.dot');var pageDots = [],!for (var i = 0; i < dots.length; i++) {}pageDots.push( new PageDot(dots[i]) );
Facade Pattern
PaginationPageDot PageDot PageDotPageArrow PageArrow
};}function Pagination() {// ...!return {next: function() {}
function Pagination() {// ...!return {next: function() {};}}pageDots[previousPage].deactivate();pageDots[currentPage].activate();
Observer Pattern
var pagination = new Pagination()slideViewer = new SlideViewer();
var pagination = new Pagination()slideViewer = new SlideViewer();!pagination.addObserver(slideViewer);
function Pagination() {var observers = [];!function addObserver(observer) {observers.push(observer);}// ...}
function Pagination() {// ...function notifyObservers(action, data) {for (var i = 0; i < observers.length; i++) {observers[i].update(action, data);}}// ...}
function Pagination() {// ...!return {next: function() {pageDots[previousPage].deactivate();pageDots[currentPage].activate();notifyObservers('navigate', currentPage);}};}
function SlideViewer() {!function update(action, data) {// ...}!// ...!}
Learning JavaScriptDesign PatternsAddy Osmani
@acolangelo