Peter Seibel, autor de Practical Common Lisp, disse uma vez que, se você precisar de um padrão, algo deve estar errado. O problema que ele mencionou se refere à necessidade de buscar e resumir uma solução geral devido às falhas inerentes à linguagem.
Seja um tipo fraco ou forte, uma linguagem estática ou dinâmica, uma linguagem imperativa ou descritiva, cada idioma tem suas próprias vantagens e desvantagens. Um atleta jamaicano tem algumas vantagens em correr e até boxe, mas carece de um pouco de ioga.
Os abarrinhas e os padres das sombras podem facilmente ser um excelente auxiliar, enquanto uma magia inimiga voando com Macon nas costas seria um pouco estranho. Para mudar para o programa, pode ser necessário um esforço para implementar o decorador na linguagem estática. Como o JS pode lançar métodos em objetos a qualquer momento, o padrão do decorador se torna inútil no JS.
Existem alguns livros sobre os padrões de design de JavaScript. "Pro JavaScript Design Patterns" é um livro clássico, mas os exemplos são bastante detalhados; portanto, com base no código que escrevi no trabalho, resumirei meu entendimento. Se meu entendimento for tendencioso, certifique -se de corrigi -lo.
1. Modo Singleton
A definição de um padrão de singleton é produzir uma instância única de uma classe, mas o próprio JS é uma linguagem "sem classe". Muitos artigos que falam sobre o JS Design Pattern Use {} como um singleton e fazem sentido. Como existem muitas maneiras de gerar objetos pelo JS, vamos dar uma olhada em outro singleton mais significativo.
Há um requisito comum de que, ao clicar em um botão, uma camada de máscara precisa aparecer na página. Por exemplo, quando você clica em web.qq.com para fazer login.
Este código que gera uma camada de máscara de fundo cinza é fácil de escrever.
A cópia do código é a seguinte:
var createemask = function () {
Documento de retorno, Body.appendChild (document.createElement (div));
}
$ ('botão') .Click (function () {
Var máscara = createMask ();
mask.show ();
})
O problema é que essa camada de máscara é globalmente única; portanto, toda vez que você chama CreateMask, uma nova div é criada, embora possa ser removida durante o esconder a camada de máscara. No entanto, é obviamente irracional fazer isso.
Vejamos a segunda solução, crie essa div no início da página. Em seguida, consulte com uma variável.
A cópia do código é a seguinte:
var máscara = document.body.appendChild (document.createElement ("div '));
$ ("Button ') .Click (function () {
mask.show ();
})
Isso não significa que apenas uma DIV da camada de máscara será criada na página, mas outro problema seguirá. Talvez nunca precisemos dessa camada de máscara, que desperdiçará uma div e você deve ser muito mesquinho sobre qualquer operação do nó DOM.
Se você pode usar uma variável, determine se uma div foi criada?
A cópia do código é a seguinte:
máscara var;
var createemask = function () {
se (máscara) retornar máscara;
outro{
Mask = document, Body.appendChild (document.createElement (div));
Máscara de retorno;
}
}
Parece bom, mas aqui completei uma função que gera um único objeto de coluna. Vamos dar uma olhada em mais de perto o que há de errado com este código.
Primeiro de tudo, essa função tem certos efeitos colaterais. A função altera a referência à máscara variável externa no corpo da função. Em um projeto de colaboração em várias pessoas, o createemask é uma função insegura. Por outro lado, a máscara variável global não é necessária. Vamos melhorá -lo.
A cópia do código é a seguinte:
var createemask = function () {
máscara var;
Return function () {
Máscara de retorno || (Mask = document.body.appendChild (document.createElement ('div')))))
}
} ()
Um fechamento simples é usado para embrulhar a máscara variável, pelo menos para a função CreateMask, ela está fechada.
Talvez quando vejo isso, acho que o padrão de singleton é muito simples. De fato, alguns padrões de design são muito simples. Mesmo que nunca tenha prestado atenção ao conceito de padrões de design, usei alguns padrões de design no meu código diário sem saber. Assim como quando eu entendi o que é o carrinho de um velho, pensei nisso há muitos anos, acabou que este é o carrinho de um homem velho.
Os 23 padrões de design no GOF também são padrões que existem e usados repetidamente no desenvolvimento de software. Se o programador não perceber claramente que ele usou certos padrões, ele poderá perder um design mais adequado na próxima vez (esta passagem vem do "mundo da programação em Matsumoto".
Vamos voltar ao tópico, o singleton anterior ainda tem suas desvantagens. Ele só pode ser usado para criar camadas de máscara. E se eu precisar escrever uma função para criar um objeto XHR exclusivo? Posso encontrar um invólucro geral de singleton?
As funções no JS são o primeiro tipo, o que significa que as funções também podem ser passadas como parâmetros. Vamos dar uma olhada no código final.
A cópia do código é a seguinte:
var singleton = função (fn) {
VAR resultado;
Return function () {
Resultado de retorno || (resultado = fn .Apply (isto, argumentos));
}
}
var createemask = singleton (function () {
retornar document.body.appendChild (document.createElement ('div'));
})
Use uma variável para salvar o primeiro valor de retorno. Se tiver sido atribuído, a variável será retornada primeiro nas chamadas subsequentes. O código que realmente cria a camada de máscara é passado para o invólucro singleton através da função de retorno de chamada. Este método é realmente chamado de modo de ponte. Em relação ao modo de ponte, é colocado um pouco mais tarde.
No entanto, a função Singleton não é perfeita, sempre requer um resultado variável para registrar a referência à div. Infelizmente, as características funcionais do JS não são suficientes para eliminar completamente as declarações e declarações.