El papel del patrón de diseño de JavaScript es mejorar la reutilización y la legibilidad del código, lo que hace que el código sea más fácil de mantener y expandirse.
En JavaScript, una función es una clase de objetos, lo que significa que se puede pasar como un parámetro a otras funciones; Además, la función también puede proporcionar alcance.
Sintaxis para crear una función
Expresiones de funciones nombradas
La copia del código es la siguiente:
// Nombre de la expresión de funciones
var add = function add (a, b) {
devolver a+b;
};
Expresiones de funciones
La copia del código es la siguiente:
// también conocido como función anónima
var add = function (a, b) {
devolver a+b;
};
El valor asignado a la variable ADD es la definición de función en sí. De esta manera, ADD se convierte en una función que se puede llamar a cualquier parte.
Declaración de funciones
La copia del código es la siguiente:
función foo () {
// código aquí
} // No se necesita semicolon aquí
En las semicolones finales, las expresiones de funciones siempre deben usar semicolones, y no se requiere el final de los semicolones en la declaración de la función.
Declaraciones y expresiones de funciones
Promoción de funciones (elevación)
El comportamiento de una declaración de función no es equivalente a una expresión de función con nombre. La diferencia es el comportamiento de elevación. Vea el siguiente ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
// función global
función foo () {alerta ("Global foo!");}
función bar () {alerta ('global bar');}
function hoist () {
console.log (typeof foo); // función
console.log (typeof bar); // indefinido
foo (); // local foo!
bar (); // typeError: 'Undefined' no es una función
// se promueven la variable FOO y el implementador
función foo () {
alerta ('local foo! ');
}
// Solo se promueve la barra variable, la parte de implementación de la función no se promueve
var bar = function () {
alerta ('local bar!');
};
}
izar();
</script>
Para todas las variables, donde sea que se declaren en el cuerpo, se promueven internamente a la parte superior de la función. La razón de la aplicación general de las funciones es que las funciones son solo objetos asignados a variables.
Como su nombre indica, la mejora significa mencionar las siguientes cosas en la cima. En JS, es actualizar las cosas definidas en las siguientes (variables o funciones) a la definición anterior. Como se puede ver en el ejemplo anterior, Foo y bar en la función elevan dentro de la función se mueven hacia la parte superior, cubriendo así las funciones globales de foo y barra. La diferencia entre las funciones locales Bar y Foo es que Foo se promueve a la parte superior y puede ejecutarse normalmente, mientras que la definición de bar () no se ha mejorado, solo se promueve su declaración. Por lo tanto, cuando se ejecuta Bar (), el resultado está indefinido en lugar de ser utilizado como una función.
Modo de función en tiempo real
Las funciones también son objetos, por lo que pueden usarse como valores de retorno. La ventaja de usar funciones de auto-ejecución es declarar directamente una función anónima y usarla de inmediato, para evitar definir una función que no se usa una vez, y está libre del problema de nombrar conflictos. No hay concepto de espacio de nombres en JS, por lo que es fácil tener conflictos de nombre de función. Una vez que se realiza el conflicto de nombres, el último declarado prevalecerá.
Modo 1:
La copia del código es la siguiente:
<script>
(función () {
var a = 1;
Función de retorno () {
alerta (2);
};
} () ()); // Pop 2, los primeros paréntesis se ejecutan a sí mismos, y la segunda paréntesis ejecutan la función anónima interna
</script>
Patrón 2: Señalización de variables de función autojecutiva
La copia del código es la siguiente:
<script type = "text/javaScript">
VAR result = (function () {
regresar 2;
}) (); // La función se ha ejecutado aquí
alerta (resultado); // El resultado apunta al valor de retorno 2 de la función auto-ejecutada; Si aparece resultado (), se producirá un error.
</script>
Patrón tres: funciones anidadas
La copia del código es la siguiente:
<script type = "text/javaScript">
VAR result = (function () {
Función de retorno () {
regresar 2;
};
}) ();
alerta (resultado ()); // 2 aparece cuando está alerta (resultado); function () {return 2}
</script>
Modo 4: la función de autoexecución asigna su valor de retorno a una variable
La copia del código es la siguiente:
var abc = (function () {
var a = 1;
Función de retorno () {
return ++ a;
}
}) (); // La función de auto-ejecutación devuelve la función después de volver a la variable
alerta (ABC ()); // Si está alerta (ABC), el código después de la declaración de devolución aparecerá; Si es abc (), la función después de la devolución se ejecutará
Patrón 5: la función se ejecuta internamente, recursivamente
La copia del código es la siguiente:
// Esta es una función de auto-ejecución, la función se ejecuta internamente, recursivamente
función abc () {abc (); }
Modo de devolución de llamada
Función de devolución de llamada: cuando pasa una función Write () como argumento a otra función de la función (), entonces llamar () puede ejecutar (o llamar) escribir () en algún momento. En este caso, Write () se llama función de devolución de llamada.
Oyente de eventos asíncronos
El modo de devolución de llamada tiene muchos usos, por ejemplo, cuando un oyente de eventos se adjunta a un elemento en la página, en realidad proporciona un puntero a una función de devolución de llamada que se llamará cuando ocurra el evento. como:
La copia del código es la siguiente:
document.addeventListener ("hacer clic", console.log, falso);
El ejemplo del código anterior muestra la función de devolución de llamada console.log () en modo burbuja cuando el documento hace clic.
JavaScript es especialmente adecuado para la programación basada en eventos, porque el modo de devolución de llamada admite programas para ejecutarse de manera asíncrona.
se acabó el tiempo
Otro ejemplo de uso del modo de devolución de llamada es cuando se usa el método de tiempo de espera proporcionado por el objeto de la ventana del navegador: setTimeout () y setInterval (), como:
La copia del código es la siguiente:
<script type = "text/javaScript">
var call = function () {
console.log ("se le preguntará a 100 ms ...");
};
setTimeOut (llamada, 100);
</script>
Modo de devolución de llamada en la biblioteca
Al diseñar una biblioteca JS, la función de devolución de llamada será útil. El código de una biblioteca debe usar el código reutilizable tanto como sea posible, y la devolución de llamada puede ayudar a lograr esta generalización. Cuando diseñamos una enorme biblioteca JS, el hecho es que los usuarios no necesitan la mayor parte, podemos centrarnos en las funciones centrales y proporcionar funciones de devolución de llamada en "forma de gancho", lo que nos facilitará construir, escalar y personalizar métodos de biblioteca
Zurra
El curry es una técnica que convierte una función en una nueva función simplificada (a menos parámetros) llenando múltiples parámetros en un cuerpo de funciones. "【【Competente en JavaScript】
En pocas palabras, la curryización es un proceso de conversión, es decir, el proceso de nuestra conversión de funciones. Como se muestra en el siguiente ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
// función add () basada en curry
función add (x, y) {
var Oldx = x, oldy = y;
if (typeof oldy == "indefinido") {
Función de retorno (Newy) {
devolver Oldx + Newy;
};
}
// aplicación completa
return x+y;
}
//prueba
typeof add (5); // Salida "función"
Agregar (3) (4); // 7
// Crear y almacenar una nueva función
var add2000 = add (2000);
ADD2000 (10); // Salida 2010
</script>
Cuando se llama a add () por primera vez, crea un cierre para la función interna devuelta. Este cierre almacena los valores originales de X e Y en las variables privadas Oldx y Oldy.
Ahora podremos usar métodos comunes de curry de funciones arbitrarias, como:
La copia del código es la siguiente:
<script type = "text/javaScript">
// Funciones normales
función add (x, y) {
return x + y;
}
// curry una función para obtener una nueva función
var newadd = test (add, 5);
newadd (4); // 9
// otra opción, llame directamente a la nueva función
Prueba (agregar, 6) (7); // Salida 13
</script>
Cuando usar curry
Cuando se encuentra que se llama la misma función y la mayoría de los parámetros pasados son los mismos, entonces la función puede ser un buen candidato para la curryización