Els patrons de disseny Java Script

Visió de conjunt: En aquest document parlarem dels diferents patrons de disseny utilitzats en JavaScript. La majoria dels desenvolupadors es pregunten per esbrinar l'exacta o el patró de disseny ideal per ser utilitzat en el seu programa. Per ser sincer, no hi ha una resposta concreta a aquesta pregunta i no hi ha cap fórmula que esbrinar el patró de disseny que han d'utilitzar en una situació donada. Així que sota aquestes circumstàncies, hem de tenir un panteix ferm dels patrons de disseny i els problemes específics que s'ocupen de, hem d'estar en una millor situació per prendre una decisió sobre el patró de disseny que s'utilitza en què la condició.

Introducció:
Un patró de disseny és una solució reutilitzable que es pot aplicar als problemes comuns tornin a presentar en el disseny i desenvolupament de programari. patró de disseny també pot ser anomenat com plantilles utilitzades per resoldre problemes comuns. Els patrons de disseny tenen tres avantatges principals:

Són solucions provades: patró de disseny proporcionen un sòlid enfocament en el desenvolupament de programari i utilitza tècniques provades.
Pot ser reutilitzat fàcilment: Els patrons de disseny són conceptuals i proporcionen fora de la solució de caixa que s'adapti a les nostres necessitats. Aquesta característica fa que els patrons de disseny més robust i que es pot tornar a utilitzar en condicions similars.
Els patrons són expressiva: Cada patró de disseny presenta una estructura de conjunt predefinit i el vocabulari que es pot utilitzar per proporcionar solucions als problemes més grans.

patró de disseny no ofereix una solució exacta a un problema. És important tenir en compte que el paper dels patrons és proporcionar un esquema de solució.

Tipus de patrons de disseny
Els patrons de disseny es poden dividir en tres categories següents sub:

Creacional del disseny del model : En aquesta categoria els següents patrons de disseny cauen :
- semifallada
- Constructor
- fàbrica
- abstracte
- prototip
- constructor
Estructural del disseny del model : En aquesta categoria els següents patrons de disseny cauen :
- decorador
- Façana
- Pes mosca
- adaptador
- apoderat
Conductual del disseny del model : En aquesta categoria el següent patró de caiguda de disseny :
- iterator
- visitant
- mediador
- observador

Patrons en JavaScript:
Els següents patrons s'utilitzen comunament en JavaScript:

patró constructor
patró mòdul
patró Singleton
patró d'observador
Mediator
Model de prototip
patró d'ordres
Model de la façana
patró de la fàbrica
Decorator
Flyweight

El patró Constructor:
D'acord amb el concepte de programació orientada a objectes clàssica, un constructor és un tipus especial de mètode que s'utilitza per crear una instància d'un objecte en la memòria. En estigui habilitat creació d'objectes es realitza utilitzant qualsevol dels següents tres aspectes:

Listing 1: Tres enfocaments utilitzats en estigui habilitat per a crear objectes

[Code]

// enfocament 1

va ser newObject = {};

//enfocament 2

var = newObject Object.create(zero);

//enfocament 3

var newObject = new Object();

[/Code]

En el tercer enfocament, l'objecte es crea mitjançant el constructor d'objectes on es passa cap valor o conjunt. Hi ha diverses formes de configurar els valors d'un objecte creat. These are:

Listing 2: Formes de configurar els valors d'un constructor

[Code]

//enfocament 1

newObject.someKey = "Hello World"

//enfocament 2

newObject[someKey] = "Hello World"

//enfocament 3

Object.defineProperty( newObject, “someKey”, {

valor : "Hola món"

gravable : veritable

numerable : veritable

configurable : veritable

);

[/Code]

El patró Singleton:
Tots sabem que el patró Singleton restringeix la creació d'un objecte d'instància única. patró Singleton es porta a terme mitjançant la creació d'una classe amb un mètode que crea una nova instància de l'objecte únicament quan no hi hagi altres casos. En estigui habilitat únics serveixen com un espai de noms de recursos compartits que aïlla l'aplicació de l'espai de noms global. en JavaScript, singleton s'implementa de la manera següent:

Listing 3: Singleton aplicació en JavaScript

[Code]

va ser mySingleton = (funció () {

// Instància emmagatzema una referència a la Singleton

instància var;

funció init() {

// semifallada

// Els mètodes privats i variables

privateMethod funció(){

console.log( “sóc privada” );

}

era variable privada = “Im també privada”;

var = privateRandomNumber Math.random();

return {

// Els mètodes públics i variables

publicMethod: funció () {

console.log( “El públic pot veure!” );

publicProperty: “També estic pública”,

GetRandomNumber: funció() {

tornar privateRandomNumber;

}

};

return {

// Obtenir la instància Singleton si existeix

// o crear-ne un si no ho fa

getInstance: funció () {

si ( !instància ) {

instància = init();

}

tornar instància;

}

};

})();

va ser myBadSingleton = (funció () {

// Instància emmagatzema una referència a la Singleton

instància var;

funció init() {

// semifallada

var = privateRandomNumber Math.random();

return {

GetRandomNumber: funció() {

tornar privateRandomNumber;

}

};

return {

// Sempre ha de crear una nova instància Singleton

getInstance: funció () {

instància = init();

tornar instància;

}

};

})();

// Ús:

va ser single1 = mySingleton.getInstance();

va ser single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // veritable

var = badSingle1 myBadSingleton.getInstance();

var = badSingle2 myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // veritable

[/Code]

D'acord amb la GoF, Singleton és aplicable a les següents situacions:

No hi ha d'haver exactament en la instància de l'objecte.
L'única instància ha de ser extensible per sub-classificant.

El patró Observador:
En el patró Observador, l'objecte (també anomenat com a subjecte) manté una llista d'objectes que en depenen es fa referència com a observadors. El subjecte notifica automàticament als observadors qualsevol canvi que ha passat, utilitzant el mecanisme d'emissió. Aplicació del patró Observer es mostra a continuació.

Listing 4: Llista d'Observadors dependents d'un subjecte pot tenir

[Code]

ObserverList funció(){ this.observerList = [];} ObserverList.prototype.Add = function( obj ){ return this.observerList.push( obj );}; ObserverList.prototype.Empty = function(){ this.observerList = [];}; ObserverList.prototype.Count = function(){ return this.observerList.length;}; ObserverList.prototype.Get = function( index ){ si( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; si( índex === 0 ){ this.observerList.unshift( obj ); pointer = index; }més si( Índex === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, = punter -1; mentre( jo < this.observerList.length ){ si( this.observerList[jo] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ si( índex === 0 ){ this.observerList.shift(); }més si( Índex === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ per ( var clau en l'extensió ){ obj[clau] = extensió[clau]; }}

[/Code]

Listing 5: El subjecte

[Code]

assumpte funció(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( observador ){ this.observers.Add( observador );}; Subject.prototype.RemoveObserver = function( observador ){ this.observers.RemoveAt( this.observers.IndexOf( observador, 0 ) );}; Subject.prototype.Notify = function( context ){ var observerCount = this.observers.Count(); per(var i=0; jo < observerCount; i ){ this.observers.Get(jo).actualització( context ); }};

[/Code]

En l'exemple anterior, utilitzant els components de l'observador, que ara definim:

Un botó per afegir noves caselles de verificació observables a la pàgina
Una casella de verificació de control que actuarà com un subjecte, notificar a altres caselles de verificació i han de ser avaluats
S'afegeix una contenidor per a les noves caixes de selecció

El codi HTML és tan baix

Listing 5: El codi HTML

[Code]

<id = botó”addNewObserver”>Afegir casella Nou Observador</botó><Identificació d'entrada =”mainCheckbox” type =”caixa”/><div id =”observersContainer”></div>

[/Code]

Summary: Així que en aquest article he discutit els detalls sobre els patrons de disseny de JavaScript. Els patrons de disseny són aplicables a tots els tipus de llenguatges com Java orientat a objectes llenguatge i també el llenguatge de scripts com JavaScript. Però hi ha diferències i hem vist en els exemples anteriors. Per concloure la discussió, podem dir que els patrons de disseny s'utilitzen per proporcionar la solució als problemes que ocorren comunament. I si us plau, tingui en compte que són patrons de disseny