Patróns de deseño Java Script

Visión global: Neste documento, imos falar sobre os distintos patróns de deseño usados no JavaScript. A maioría dos desenvolvedores de saber a descubrir a exacta ou o patrón de deseño ideal para ser usado no seu programa. Para ser honesto, non hai unha resposta concreta a esta pregunta é non existen os fórmulas que ía descubrir o patrón de deseño correcto para ser usado en unha determinada situación. Así, baixo tal circunstancia, debemos ter un suspiro firme dos patróns de deseño e os problemas específicos que xestione, debemos estar nunha situación mellor para tomar unha decisión sobre cal patrón de deseño para o uso en cal condición.

Introdución:
Un patrón de deseño é unha solución reutilizable que pode ser aplicado a problemas comúns re-aparición no deseño e desenvolvemento de software. Deseño estándar tamén pode ser denominado como modelos utilizados para solucionar problemas comúns. patróns de deseño ten tres vantaxes principais:

Son solucións comprobada: Deseño estándar de proporcionar unha visión sólida no desenvolvemento de software e utiliza técnicas comprobadas.
Poden ser facilmente reutilizadas: Os patróns de deseño son conceptuais e proporcionar fóra da solución caixa de que se adapte ás nosas necesidades. Isto fai que os patróns de deseño máis robusta e que pode ser re-utilizado en condicións similares.
Patróns son expresivos: Cada nivel de proxecto presenta unha estrutura de conxunto predefinido e vocabulario que se pode usar para proporcionar solucións aos problemas maiores.

Deseño estándar non ofrece unha solución exacta para un problema. É importante ter en conta que o papel dos patróns é proporcionar un esquema de solución de.

Tipos de Deseño Patterns
patróns de deseño pode ser dividido en tres categorías seguintes sub:

Deseño Pattern Criacionais : Nesta categoría os seguintes patróns de deseño caída :
- O único
- Constructor
- fábrica
- abstracto
- prototipo
- constructor
Estándar Proxecto Estrutural : Nesta categoría os seguintes patróns de deseño caída :
- decorador
- fachada
- Flyweight
- adaptador
- procuración
Deseño Pattern comportamental : Nesta categoría o seguinte patrón proxecto caída :
- iterator
- visitante
- mediador
- observador

Patróns en JavaScript:
Os seguintes normas son comunmente usados en JavaScript:

estándar constructor
estándar módulo
patrón Singleton
estándar Observer
Mediator
estándar Prototype
Estándar de ordes
estándar fachada
Defecto de fábrica
estándar Decorator
fLYWEIGHT

O defecto Constructor:
Segundo o concepto de programación orientada a obxectos clásica, un constructor é un tipo especial de método que se usa para crear unha instancia dun obxecto na memoria. En JavaScript creación do obxecto está feito usando calquera das tres enfoques seguintes:

Listing 1: Tres enfoques utilizadas JavaScript para crear obxectos

[Code]

// aproximación 1

foi newObject = {};

//aproximación 2

var newObject = Object.create(cero);

//aproximación 3

var newObject = new Object();

[/Code]

Na terceira visión, O obxecto é creado mediante o constructor Object onde ningún valor é pasado ou establecer. Existen varias maneiras de definir valores para un obxecto recén criado. These are:

Listing 2: Formas de definir valores para un constructor

[Code]

//aproximación 1

newObject.someKey = "Ola Mundo"

//aproximación 2

newObject[somekey] = "Ola Mundo"

//aproximación 3

Object.defineProperty( newObject, “somekey”, {

valor : "Ola Mundo"

gravable : certo

enumeráveis : certo

configurable : certo

);

[/Code]

O patrón Singleton:
Todos sabemos que o estándar Singleton restrinxe a creación dun obxecto a única instancia. Singleton estándar é aplicado a través da creación dunha clase con un método que crea unha nova sesión do obxecto só cando non hai outras instancias. En JavaScript singletons servir como un espazo de nomes de recursos compartidos que illa a posta en marcha do espazo de nomes global. en JavaScript, Singleton é aplicado do seguinte xeito:

Listing 3: implantación Singleton en JavaScript

[Code]

foi MySingleton = (función () {

// Instancia almacena unha referencia ao Singleton

instancia var;

función init() {

// O único

// métodos privados e variables

privateMethod función(){

console.log( “estou privada” );

}

foi variable private = “Im tamén privada”;

var privateRandomNumber = Math.random();

return {

// métodos públicos e variables

publicMethod: función () {

console.log( “O público pode verme!” );

publicProperty: “Tamén estou pública”,

getRandomNumber: función() {

volver privateRandomNumber;

}

};

return {

// Obter a instancia Singleton se existe

// ou crear un, se iso non acontecer

getInstance: función () {

se ( !instancia ) {

instance = arranque();

}

voltar instancia;

}

};

})();

foi myBadSingleton = (función () {

// Instancia almacena unha referencia ao Singleton

instancia var;

función init() {

// O único

var privateRandomNumber = Math.random();

return {

getRandomNumber: función() {

volver privateRandomNumber;

}

};

return {

// Sempre crear unha nova sesión Singleton

getInstance: función () {

instance = arranque();

voltar instancia;

}

};

})();

// uso:

foi single1 = mySingleton.getInstance();

foi single2 = mySingleton.getInstance();

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

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

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

[/Code]

Segundo a GoF, Singleton aplicarase nas seguintes situacións:

Non debe existir exactamente na instancia do obxecto.
A única instancia debe ser extensible por sub clasificándose it.

O patrón Observer:
No estándar Observer, the object (tamén chamado como suxeito) mantén unha lista de obxectos, en función de se refería como observadores. O tema automaticamente notifica aos observadores calquera cambio que ocorreu, mediante o mecanismo de transmisión. Implementación do estándar Observer móstrase a continuación.

Listing 4: Lista de Observadores dependentes dun suxeito pode

[Code]

ObserverList función(){ 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 ){ se( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; se( Índice === 0 ){ this.observerList.unshift( obj ); pointer = index; }else if( Índice === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, punteiro = -1; mentres( Eu < this.observerList.length ){ se( this.observerList[Eu] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ se( Índice === 0 ){ this.observerList.shift(); }else if( Índice === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ a ( clave var en extensión ){ obj[key] = extensión[key]; }}

[/Code]

Listing 5: o Asunto

[Code]

función Asunto(){ 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( contexto ){ var observerCount = this.observers.Count(); a(var i=0; Eu < observerCount; i ){ this.observers.Get(Eu).actualizar( contexto ); }};

[/Code]

No exemplo anterior,, utilizando os compoñentes Observer, agora definir:

Un botón para engadir novas caixas observables á páxina
O cadro de control que funcionará como un asunto, notificando outras caixas deben ser verificados
Un recipiente para as novas caixas sendo engadidos

O código HTML é o título

Listing 5: O código HTML

[Code]

<botón ID =”addNewObserver”>Agregar caixa New Observer</button><input id =”mainCheckbox” type =”checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Así, neste artigo eu discutir detalles sobre os patróns de deseño de JavaScript. Os patróns de deseño son aplicables a todos os tipos de linguaxes como orientada a obxecto java linguaxe e tamén linguaxe de script como JavaScript. Pero hai diferenzas e nós a vimos nos exemplos anteriores. Polo tanto, para completar a discusión, podemos dicir que o deseño patróns son usados para facilitar a solución para comunmente ocorren problemas. E lembre de que o deseño patróns son