O que é um padrão
Eu estava me preparando para o exame final há um tempo, mas era uma pessoa minuciosa e eu estava muito ocupada. Não tive tempo para atualizar o artigo. Hoje vou falar sobre os padrões de design em JavaScript.
Primeiro de tudo, o que precisamos saber é que o padrão é uma solução reutilizável, enquanto o Anti-padre é uma solução ruim para um certo problema.
Exemplos comuns de anti-padrões de JS
1. Passe as strings para o setTimeout e o setInterval, e não as funções, que desencadeiam o uso interno de Eval ().
2. Defina um grande número de variáveis no contexto global para poluir o espaço de nome global
3. Modifique o protótipo da classe de objeto
4. Use JS Inline e o código JS incorporado em arquivos HTML não pode ser incluído em ferramentas de teste de unidade externa.
5. Documento de abuso.Write. Se você executar o documento.Write após a carga da página, ele reescreverá a página em que estamos. Se você pode usar o documento.CreatElement, tente não usar o Document.Write.
Categoria de padrões de design
Criando um padrão de design
Os padrões de design criativo se concentram em lidar com os mecanismos de criação de objetos para criar objetos de uma maneira que se adapte a uma determinada situação. Os atributos que se enquadram nessa categoria incluem:
Construtor construtor, fábrica de fábrica, abstração abstrata, protótipo protótipo, singleton singleton e gerador de construtor gerador
Padrão de projeto estrutural
Os padrões estruturais estão relacionados a combinações de objetos e geralmente podem ser usados para encontrar maneiras simples de estabelecer relacionamentos entre diferentes objetos.
Os padrões que se enquadram nessa categoria incluem:
Decorador Decorador, Aparência da Facada, Enciclopédia de Mosco, Adaptador Adaptador e Proxy Proxy
Padrão de design de comportamento
Os padrões de comportamento se concentram em melhorar ou simplificar a comunicação entre diferentes objetos no sistema.
Os padrões de comportamento incluem:
Iterador iterador, mediador mediador, observador observador e visitante visitante
Modo de fábrica
Para resolver o problema de várias declarações de objetos semelhantes, podemos usar um método chamado padrão de fábrica, que é resolver o problema de instantar objetos com um grande número de duplicações.
A cópia do código é a seguinte:
<script type = "text/javascript">
função createObject (nome, idade, profissão) {// função instanciada central {//
var obj = new Object ();
obj.name = nome;
obj.age = idade;
obj.profession = profissão;
obj.move = function () {
Retorne this.name + 'em' + this.age + 'envolvido em' + this.profession;
};
retornar obj;
}
var test1 = createObject ('trigkit4', 22, 'programador'); // primeira instância
var test2 = createObject ('mike', 25, 'engenheiro'); // a segunda instância
alerta (test1.move ());
alerta (test2.move ());
</script>
Categoria de modelo de fábrica
O padrão de fábrica é dividido em fábricas simples, fábricas abstratas e fábricas inteligentes. O padrão de fábrica requer o uso de um construtor sem exibi -lo.
Padrão simples de fábrica: use uma classe (geralmente um monômero) para gerar uma instância.
Padrão de fábrica complexo: use subclasses para determinar qual instância de classe específica uma variável de membro deve ser.
Os benefícios do modelo de fábrica
A principal vantagem é que ele pode eliminar o acoplamento entre objetos usando métodos de engenharia em vez de novas palavras -chave. Concentre todo o código instanciado em um local para evitar a duplicação de código.
Desvantagens do modelo de fábrica
A maioria das classes é melhor usada com novas palavras -chave e construtores, o que pode facilitar a leitura do código. Em vez de verificar o método da fábrica para saber.
O padrão de fábrica resolve o problema da instanciação repetida, mas há outro problema, ou seja, identificando o problema, porque é impossível descobrir qual instância do objeto eles são.
A cópia do código é a seguinte:
alerta (tipo de teste1); //Objeto
alerta (teste de teste1 do objeto); //verdadeiro
Quando usar o modo de fábrica?
O modo de fábrica é usado principalmente nos seguintes cenários:
1. Quando um objeto ou componente envolve alta complexidade
2. Quando é necessário gerar facilmente diferentes casos de objetos de acordo com os diferentes ambientes em que estão localizados
3. Ao lidar com muitos pequenos objetos ou componentes que compartilham os mesmos atributos
Modo construtor
No ECMAScript, os construtores (construtores) podem ser usados para criar objetos específicos. Esse modo pode apenas resolver o problema de que o modo de fábrica acima não pode reconhecer instâncias de objetos.
A cópia do código é a seguinte:
<script type = "text/javascript">
Carro de função (modelo, ano, milhas) {// Modo construtor
this.model = modelo;
this.year = ano;
this.miles = Miles;
this.run = function () {
retornar este.model + "fez" + this.miles + "Miles";
}
}
var Benz = novo carro ('Benz', 2014.20000);
var BMW = novo carro ("BMW", 2013.12000);
Alerta (Benz Instância do carro); // eu claramente identifico -o como subordinado ao carro, verdadeiro
console.log (benz.run ());
console.log (bmw.run ());
</script>
O uso do método construtor resolve o problema da instanciação repetida e o problema do reconhecimento de objetos. A diferença entre esse padrão e o padrão de fábrica é:
1. Crie objeto (novo objeto ()) que não é exibido pelo método do construtor;
2. Atribua diretamente atributos e métodos a este objeto;
3. Nenhuma declaração de retorno.
Existem algumas especificações para métodos de construtor:
1. O nome da função e o construtor instanciado são iguais e capitalizados (PS: não obrigatórios, mas escrever isso ajuda a distinguir entre construtores e funções comuns);
2. Para criar um objeto através de um construtor, o novo operador deve ser usado.
Como um objeto pode ser criado através de um construtor, de onde veio esse objeto e de onde novo objeto () foi executado? O processo de execução é o seguinte:
1. Quando o construtor é usado e o novo construtor () é usado, o novo objeto () é executado em segundo plano;
2. Escopo o construtor de um novo objeto (ou seja, o objeto criado por new Object ()), e isso no corpo da função representa o objeto produzido por new Object ().
3. Execute o código dentro do construtor;
4. Retorne o novo objeto (retorne diretamente em segundo plano).
Construtor com protótipo (construtor)
Existe uma propriedade chamada protótipo em JS. Depois de chamar o construtor JS para criar um objeto, o novo objeto terá todas as propriedades do protótipo do construtor. Dessa forma, vários objetos de carro podem ser criados e o mesmo protótipo pode ser acessado.
A cópia do código é a seguinte:
<script type = "text/javascript">
Carro de função (modelo, ano, milhas) {
this.model = modelo;
this.year = ano;
this.miles = Miles;
}
Car.prototype.run = function () {
retornar este.model + "fez" + this.miles + "Miles";
};
var benz = novo carro ('S350', 2010.20000);
var ford = novo carro ('Ford', 2012.12000);
console.log (benz.run ()); // "S350 fez 20000 milhas"
console.log (ford.run ());
</script>
Agora, uma única instância de run () pode ser compartilhada entre todos os objetos do carro.