O papel do padrão de design de JavaScript é melhorar a reutilização e a legibilidade do código, facilitando a manutenção e a expansão do código.
No JavaScript, uma função é uma classe de objetos, o que significa que ele pode ser passado como um parâmetro para outras funções; Além disso, a função também pode fornecer escopo.
Sintaxe para criar uma função
Expressões de função nomeadas
A cópia do código é a seguinte:
// Expressão da função de nome
var add = function add (a, b) {
retornar a+b;
};
Expressões de função
A cópia do código é a seguinte:
// também conhecido como função anônima
var add = function (a, b) {
retornar a+b;
};
O valor atribuído à variável Add é a própria definição de função. Dessa forma, Add se torna uma função que pode ser chamada em qualquer lugar.
Declaração de funções
A cópia do código é a seguinte:
function foo () {
// código aqui
} // Nenhum semicolon é necessário aqui
Nos semicolons à direita, as expressões de função devem sempre usar semicolons, e o final dos semicolons não é necessário na declaração da função.
Declarações e expressões de função
Promoção de funções (elevação)
O comportamento de uma declaração de função não é equivalente a uma expressão de função nomeada. A diferença é o comportamento de elevação. Veja o seguinte exemplo:
A cópia do código é a seguinte:
<script type = "text/javascript">
// Função global
function foo () {alert ("global foo!");}
barra de função () {alert ('global bar');}
function hoist () {
console.log (typeof foo); // função
console.log (bareof bar); // indefinido
foo (); // Foo local!
bar (); // typeError: 'indefinido' não é uma função
// variável foo e implementador são promovidos
function foo () {
alerta ('Foo local!');
}
// Somente a barra de variável é promovida, a parte da implementação da função não é promovida
var bar = function () {
alerta (barra local! ');
};
}
içar();
</script>
Para todas as variáveis, onde quer que sejam declaradas no corpo, elas são promovidas internamente ao topo da função. O motivo da aplicação geral das funções é que as funções são apenas objetos atribuídos a variáveis.
Como o nome sugere, a melhoria significa mencionar as seguintes coisas até o topo. No JS, é atualizar as coisas definidas no seguinte (variáveis ou funções) para a definição anterior. Como pode ser visto no exemplo acima, foo e bar na função iista dentro da função se movem para o topo, cobrindo as funções globais de Foo e barra. A diferença entre a barra de funções locais e o Foo é que o Foo é promovido ao topo e pode ser executado normalmente, enquanto a definição de bar () não foi melhorada, apenas sua declaração é promovida. Portanto, quando o bar () é executado, o resultado é indefinido em vez de ser usado como uma função.
Modo de função em tempo real
As funções também são objetos, para que possam ser usados como valores de retorno. A vantagem de usar funções auto-executadas é declarar diretamente uma função anônima e usá-la imediatamente, de modo a evitar definir uma função que não seja usada uma vez e é evitada do problema de nomear conflitos. Não existe um conceito de espaço para nome no JS, por isso é fácil ter conflitos de nomes de funções. Uma vez que um conflito de nomenclatura é feito, o último declarado prevalecerá.
Modo 1:
A cópia do código é a seguinte:
<Cript>
(function () {
var a = 1;
Return function () {
alerta (2);
};
} () ()); // pop 2, os primeiros parênteses se executam, e os segundos parênteses executam a função anônima interna
</script>
Padrão 2: apontando variáveis de função auto-executiva
A cópia do código é a seguinte:
<script type = "text/javascript">
var resultado = (function () {
retornar 2;
}) (); // A função foi executada aqui
alerta (resultado); // resultado aponta para o valor de retorno 2 da função auto-executada; Se o resultado () aparecer, ocorrerá um erro.
</script>
Padrão três: funções aninhadas
A cópia do código é a seguinte:
<script type = "text/javascript">
var resultado = (function () {
Return function () {
retornar 2;
};
}) ();
alerta (resultado ()); // 2 aparece quando alerta (resultado); function () {return 2}
</script>
Modo 4: a função de auto-execução atribui seu valor de retorno a uma variável
A cópia do código é a seguinte:
var abc = (function () {
var a = 1;
Return function () {
retornar ++ a;
}
}) (); // A função autoexecutiva retorna a função após o retorno à variável
alerta (ABC ()); // Se estiver alerta (ABC), o código após a declaração de retorno será exibida; Se for ABC (), a função após o retorno será executada
Padrão 5: a função se executa internamente, recursivamente
A cópia do código é a seguinte:
// Esta é uma função auto-executiva, a função se executa internamente, recursivamente
função abc () {abc (); }
Modo de retorno de chamada
Função de retorno de chamada: Quando você passa uma função Write () como um argumento para outra chamada de função (), Call () pode executar (ou chamar) write () em algum momento. Nesse caso, Write () é chamado de função de retorno de chamada.
Ouvinte de eventos assíncronos
O modo de retorno de chamada tem muitos usos, por exemplo, quando um ouvinte de evento é anexado a um elemento na página, ele realmente fornece um ponteiro para uma função de retorno de chamada que será chamada quando o evento ocorrer. como:
A cópia do código é a seguinte:
document.addeventListener ("clique", console.log, false);
O exemplo de código acima mostra o console da função de retorno de chamada.log () no modo bolha quando o documento clicar.
O JavaScript é especialmente adequado para programação orientada a eventos, porque o modo de retorno de chamada suporta programas para executar de forma assíncrona.
tempo esgotado
Outro exemplo de uso do modo de retorno de chamada é ao usar o método de tempo limite fornecido pelo objeto de janela do navegador: setTimeout () e setInterval (), como:
A cópia do código é a seguinte:
<script type = "text/javascript">
var chamado = function () {
console.log ("100ms serão solicitados ...");
};
setTimeout (ligue, 100);
</script>
Modo de retorno de chamada na biblioteca
Ao projetar uma biblioteca JS, a função de retorno de chamada será útil. O código de uma biblioteca deve usar o código reutilizável o máximo possível, e o retorno de chamada pode ajudar a alcançar essa generalização. Quando projetamos uma enorme biblioteca JS, o fato é que os usuários não precisam da maior parte dela, podemos nos concentrar nas funções principais e fornecer funções de retorno de chamada em "forma de gancho", o que facilitará a construção, a escala e a personalização dos métodos de biblioteca.
Currying
A curry é uma técnica que converte uma função em uma nova função simplificada (para menos parâmetros), preenchendo vários parâmetros em um corpo de função. ― 【Proficiente em JavaScript】
Simplificando, a curryização é um processo de conversão, ou seja, o processo de nossa conversão de funções. Conforme mostrado no exemplo a seguir:
A cópia do código é a seguinte:
<script type = "text/javascript">
// função add () baseada em curry
função add (x, y) {
var Oldx = x, Oldy = y;
if (typeof Oldy == "indefinido") {
Função de retorno (Newy) {
Retornar Oldx + Newy;
};
}
// Aplicação completa
retornar x+y;
}
//teste
TIPO DE ADD (5); // Saída "Função"
Adicione (3) (4); // 7
// Crie e armazene uma nova função
var add2000 = add (2000);
Add2000 (10); // Saída 2010
</script>
Quando add () é chamado pela primeira vez, ele cria um fechamento para a função interna retornada. Este fechamento armazena os valores originais de X e Y nas variáveis privadas OldX e Oldy.
Agora poderemos usar métodos comuns de curry de função arbitrária, como:
A cópia do código é a seguinte:
<script type = "text/javascript">
// Funções normais
função add (x, y) {
retornar x + y;
}
// curry uma função para obter uma nova função
var newadd = teste (add, 5);
Newadd (4); // 9
// Outra opção, chame a nova função diretamente
teste (add, 6) (7); // saída 13
</script>
Quando usar curry
Quando se vê que a mesma função está sendo chamada e a maioria dos parâmetros passados é a mesma, então a função pode ser um bom candidato à curryização