Fork me on GitHub

Javascript - ECMAScript 5

Javascript Design Patterns

Un patrón es una solución reutilizable para un problema común en el diseño de software, en este caso, una aplicación de JavaScript.

Revealing Module Pattern

Exposer.first();

Exposer.second();

Exposer.methodToExpose;

var Exposer = (function() { var privateVariable = 10; var privateMethod = function() { var increment = privateVariable + 1; return 'Inside a private method!: ' + increment; } var methodToExpose = function() { return 'This is a method I want to expose!'; } var otherMethodIWantToExpose = function() { return privateMethod(); } return { first: methodToExpose, second: otherMethodIWantToExpose }; })();

Revealing Prototype Pattern

car.numWheels;

car.pressGasPedal();

car.pressBrakePedal();

var TeslaModelS = function() { this.numWheels = 4; this.manufacturer = 'Tesla'; this.make = 'Model S'; } TeslaModelS.prototype = function() { var go = function() { return 'Rotate wheels ' + this.numWheels; }; var stop = function() { return 'Apply brake pads'; }; return { pressGasPedal: go, pressBrakePedal: stop } }(); var car = new TeslaModelS();

subject.notifyObserver(observer2);


subject.notifyAllObservers();

var Subject = function() { this.observers = []; } Subject.prototype = { subscribeObserver: function(observer) { this.observers.push(observer); }, unsubscribeObserver: function(observer) { var index = this.observers.indexOf(observer); if (index > -1) { this.observers.splice(index, 1); } }, notifyObserver: function(observer) { var index = this.observers.indexOf(observer); if (index > -1) { return this.observers[index].notify(index); } }, notifyAllObservers: function() { var notifications = []; for (var i = 0; i < this.observers.length; i++) { notifications.push(this.observers[i].notify(i)); }; return notifications; } }; var Observer = function(value) { var number = value; return { notify: function(index) { return "Observer "+number+" ("+index+") is notified!"; } } } var subject = new Subject(); var observer1 = new Observer(1); var observer2 = new Observer(2); var observer3 = new Observer(3); var observer4 = new Observer(4); subject.subscribeObserver(observer1); subject.subscribeObserver(observer2); subject.subscribeObserver(observer3); subject.subscribeObserver(observer4);

Primera instancia

officePrinter1

 

 

¿Está encencida la impresora?


Segunda instancia

officePrinter2

¿Está encencida la impresora?

var printer = (function () { var printerInstance; var turnedOn = false; function create () { function print() { if ( turnedOn === true ) { window.print(); } else { alert('Debes prender la impresora!'); } } function turnOn( value, index ) { turnedOn = value; var buttonLabel = (value) ? 'Apagar impresora' : 'Encender impresora' ; document.getElementById('js-singleton-turnon').innerHTML = buttonLabel; document.getElementById('js-singleton-print').disabled = !value; getIsTurnedOn(index); } function getIsTurnedOn(index) { document.getElementById('js-singleton-getisturnedon-'+index).innerHTML = turnedOn; return turnedOn; } return { // public + private states and behaviors print: print, turnOn: turnOn, getIsTurnedOn: getIsTurnedOn }; } return { getInstance: function() { if(!printerInstance) { printerInstance = create(); } return printerInstance; } }; })(); var officePrinter1 = printer.getInstance(); var officePrinter2 = printer.getInstance();

Compact/corolla:

Convertible/solstice:

SUV/cherokee:

// Parent constructor function CarMaker() {}; // A method of the parent CarMaker.prototype.drive = function() { return 'I have ' + this.doors + ' doors'; }; // the static factory method CarMaker.factory = function(type) { var constr = type, newCar; // error if the constructor doesn't exists if(typeof CarMaker[constr] !== 'function') { throw { name: 'Error', message: constr + "doesn't exists" }; } // inherit the parent but only once if(typeof CarMaker[constr].prototype.drive !== 'function') { CarMaker[constr].prototype = new CarMaker(); } // create new instance newCar = new CarMaker[constr](); return newCar; } //define specific car makers CarMaker.Compact = function() { this.doors = 4; } CarMaker.Convertible = function() { this.doors = 2; } CarMaker.SUV = function() { this.doors = 24; } var corolla = CarMaker.factory('Compact'); var solstice = CarMaker.factory('Convertible'); var cherokee = CarMaker.factory('SUV');

Referencias