Design patterns javascript; O padrão Constructor e o padrão Observador
Padrões de design são padrões que podem ser comumente aplicados no desenvolvimento de softwares. Para algo ser considerado um padrão ele deve obedecer a três critérios básicos: serem uma solução provada, serem facilmente reutilizáveis e podem ser usados em diversos sistemas distintos. O padrão de modelo revelador e o Padrão Singleton que falaremos hoje não foge a essa regra.
1 - Padrão Construtor
O padrão construtor é um padrão simples. Objetos construtores são um tipo especial de função, responsáveis por instanciar um novo objeto e alocar um espaço na memória para ele. No javascript não existe o conceito de classes convencionais, como vemos em linguagens orientadas a objetos. Mas existem algumas formas engenhosas de se conseguir os mesmos efeitos
1.1 - Exemplo
function Car( model, year, miles ) {
this.model = model;
this.year = year;
this.miles = miles;
this.toString = function () {
return this.model + " has done " + this.miles + " miles";
};
} // Usage: // We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 ); // and then open our browser console to view the// output of the toString() method being called on// these objects
console.log( civic.toString() );
console.log( mondeo.toString() );
_______ modelo retirado do livro "Learning JavaScript Design Patterns - Addy Osmani 2012-2020."
No exemplo acima é mostrado como conseguimos atingir o efeito do padrão construtor no javascript. Ao adicionar a palavra chave 'new' anteriormente a uma função construtora nós dizemos ao javascript que gostaríamos que essa função se comportasse como um construtor.
Dentro do construtor, a palavra chave 'this' fica responsável por referenciar o novo objeto que esa sendo criado.
2 - Padrão Observador
O conceito do padrão observador diz que uma instância mantém uma lista com uma coleção de observadores (objetos) e os notifica em todas as mudanças em seus estados.
Quando uma instância (também conhecida como assunto ) precisa notificar notificar algum acontecimento, ela envia a todos os observadores na forma de broadcast.
Outra forma de pensar é a seguinte:
Observadores são como pessoas e instância são os assuntos que as pessoas podem se interessar. Como observador, seu trabalho é ficar por dentro das novidades que os assuntos trazem. Portanto, cada vez que acontecer alguma alteração no assunto que você tem interesse você será notificado e poderá tomar alguma ação com base naquilo.
Assunto: mantém uma lista de observadores, facilita a adição ou remoção de observadores
Observador: fornece uma interface de atualização para objetos que precisam ser notificados sobre as mudanças de estado de um Assunto
ConcreteSubject: transmite notificações para observadores sobre mudanças de estado, armazena o estado de ConcreteObservers
ConcreteObserver: armazena uma referência para o ConcreteSubject, implementa uma interface de atualização para o Observer para garantir que o estado seja consistente com o do Assunto
1.1 - Exemplo
//Primeiro, vamos modelar a lista de Observadores dependentes que um sujeito pode ter:
function ObserverList(){
this.observerList = [];
}
ObserverList.prototype.add = function( obj ){
return this.observerList.push( obj );
};
ObserverList.prototype.count = function(){
return this.observerList.length;
};
ObserverList.prototype.get = function( index ){
if( index > -1 && index < this.observerList.length ){
return this.observerList[ index ];
}};
ObserverList.prototype.indexOf = function( obj, startIndex ){
var i = startIndex;
while( i < this.observerList.length ){ if( this.observerList[i] === obj ){
return i;
}
i++;
} return -1;
};
ObserverList.prototype.removeAt = function( index ){ this.observerList.splice( index, 1 );
};
//A seguir, vamos modelar o Assunto e a capacidade de adicionar, remover ou notificar observadores na lista de observadores.
function Subject(){
this.observers = new ObserverList();
}
Subject.prototype.addObserver = function( observer ){
this.observers.add( observer );
};
Subject.prototype.removeObserver = function( observer ){
this.observers.removeAt( this.observers.indexOf( observer, 0 ) );
};
Subject.prototype.notify = function( context ){
var observerCount = this.observers.count(); for(var i=0; i < observerCount; i++){
this.observers.get(i).update( context );
}};
//Em seguida, definimos um esqueleto para a criação de novos Observadores. A funcionalidade de atualização aqui será substituída posteriormente pelo comportamento personalizado.
// The Observer
function Observer(){
this.update = function(){ // ... };
}
Em nosso aplicativo de amostra usando os componentes do Observer acima, agora definimos: Um botão para adicionar novas caixas de seleção observáveis à página Uma caixa de seleção de controle que funcionará como um assunto, notificando outras caixas de seleção que devem ser marcadas Um contêiner para as novas caixas de seleção adicionadas Em seguida, definimos os manipuladores ConcreteSubject e ConcreteObserver para adicionar novos observadores à página e implementar a interface de atualização. Veja abaixo os comentários embutidos sobre o que esses componentes fazem no contexto do nosso exemplo. ______modelo retirado do livro "Learning JavaScript Design Patterns - Addy Osmani 2012-2020."