introducir
Este artículo presenta principalmente algunas técnicas utilizadas en la función (Parte 1). Usando funciones de función, puede escribir mucho código muy interesante. Este artículo incluye principalmente: modo de devolución de llamada, objeto de configuración, función de retorno, programa de distribución y curry.
Función de devolución de llamada
En JavaScript, cuando una función A es uno de los parámetros de otra función B, la función A se denomina función de devolución de llamada, es decir, A se puede ejecutar dentro del período de la función B (tanto de inicio, intermedio y final).
Por ejemplo, hay una función que genera nodos
La copia del código es la siguiente:
var compleComputation = function () { /* manejar internamente y devolver un nodo* /};
Hay una declaración de función FindNodes para encontrar todos los nodos y luego ejecutar el código a través de la devolución de llamada.
La copia del código es la siguiente:
var findNodes = function (devolución de llamada) {
var nodos = [];
var nodo = complejoComputation ();
// Si la función de devolución de llamada está disponible, ejecútela
if (typeof llamado === "función") {
devolución de llamada (nodo);
}
nodos.push (nodo);
nodos de retorno;
};
Con respecto a la definición de devolución de llamada, podemos definirla por adelantado para usar:
La copia del código es la siguiente:
// Definir devolución de llamada
var hide = function (nodo) {
node.style.display = "ninguno";
};
// Encuentra nodos y esconde todos los nodos
var hiddenNodes = findNodes (ocultar);
También puede usar definiciones anónimas directamente al llamar, como sigue:
La copia del código es la siguiente:
// Use funciones anónimas para definir la devolución de llamada
var blockNodes = findNodes (function (nodo) {
node.style.display = 'bloque';
});
Los más utilizados son probablemente las llamadas al método AJAX de JQuery. Al definir la devolución de llamada en Ded/Faild, podemos procesar más cuando la llamada AJAX tiene éxito o falla. El código es el siguiente (este código se basa en jQuery versión 1.8):
La copia del código es la siguiente:
var menúD = $ ("ul.nav"). Primero (). attr ("id");
request de var = $ .AJAX ({
URL: "script.php",
Tipo: "Publicar",
Datos: {id: MenuID},
DataType: "HTML"
});
// procesamiento de devolución de llamada cuando la llamada es exitosa
request.done (function (msg) {
$ ("#log"). html (msg);
});
// procesamiento de devolución de llamada cuando falla la llamada
request.fail (function (jqxhr, textstatus) {
alerta ("Solicitud fallida:" + TextStatus);
});
Objetos de configuración
Si el parámetro de una función (o método) tiene solo un parámetro y el parámetro es un objeto literal, llamamos a este patrón el patrón de objeto de configuración. Por ejemplo, el siguiente código:
La copia del código es la siguiente:
var conf = {
Nombre de usuario: "Shichuan",
Primero: "Chuan",
Último: "Shi"
};
addperson (conf);
En Addperson, puede usar el valor de conf a voluntad, que generalmente se usa para el trabajo de inicialización. Por ejemplo, AjaxSetup en jQuery se implementa de esta manera:
La copia del código es la siguiente:
// Establecer el valor inicial con anticipación
$ .AJAXSETUP ({
url: "/xmlhttp/",
Global: Falso,
Tipo: "Publicar"
});
// Luego vuelve a llamar
$ .AJAX ({data: myData});
Además, muchos complementos jQuery también tienen esta forma de transmisión de parámetros, pero tampoco se pueden transmitir. Cuando no pasan, se utilizará el valor predeterminado.
Función de retorno
Devolver una función se refiere a una nueva función que se crea de manera flexible en función de condiciones específicas cuando el valor de retorno de una función es otra función, o una nueva función se crea de manera flexible de acuerdo con condiciones específicas. El código de ejemplo es el siguiente:
La copia del código es la siguiente:
var setup = function () {
console.log (1);
Función de retorno () {
console.log (2);
};
};
// llama a la función de configuración
var my = setup (); // Salida 1
mi(); // Salida 2
// o también puede llamarlo directamente
configuración()()();
O puede usar la función de cierre para registrar un número de contador privado en la función de configuración y aumentar el contador por cada llamada. El código es el siguiente:
La copia del código es la siguiente:
var setup = function () {
Var Count = 0;
Función de retorno () {
return ++ Count;
};
};
// Uso
var next = setup ();
próximo(); // devolver 1
próximo(); // devolver 2
próximo(); // Regreso 3
Aplicable
La aplicación parcial aquí es para separar los parámetros entrantes. A veces, una serie de operaciones puede tener uno o varios parámetros siempre iguales. Luego podemos definir una función parcial primero y luego ejecutar esta función (los diferentes parámetros restantes se pasan durante la ejecución).
Por ejemplo, el código es el siguiente:
La copia del código es la siguiente:
var parteialany = (function (APS) {
// Esta función es el resultado de su propia ejecución de la expresión de la función y se asigna a la variable parcialania
función func (fn) {
var argsorig = aps.call (argumentos, 1);
Función de retorno () {
var args = [],
argSpartial = aps.call (argumentos),
i = 0;
// Todos los conjuntos de parámetros originales de variables,
// Si el parámetro es un marcador de posición parcialanía, use el valor correspondiente al siguiente parámetro de función
// de lo contrario, use el valor en el parámetro original
para (; i <argsorig.length; i ++) {
Args [i] = argsorig [i] === FURC._
? argsPartial.hift ()
: argsorig [i];
}
// Si hay parámetros adicionales, agregue al final
return fn.apply (this, args.concat (argsPartial));
};
}
// para la configuración del marcador de posición
func._ = {};
regreso func;
}) (Array.prototype.slice);
Cómo usarlo es el siguiente:
La copia del código es la siguiente:
// Definir funciones de procesamiento
función hex (r, g, b) {
return '#' + r + g + b;
}
// Defina la función parcial, tome el primer parámetro R de Hex como el valor de parámetro no cambiado FF
var redmax = parcialany (hex, 'ff', parcialany._, parcialany._);
// El método de llamada de la nueva función REDMAX es el siguiente, y solo se necesitan 2 parámetros:
console.log (Redmax ('11 ',' 22 ')); // "#FF1122"
Si crees que parcialany._ es demasiado largo, puedes usar __ en su lugar.
La copia del código es la siguiente:
var __ = parcialany._;
var greenmax = parcialany (hex, __, 'ff');
console.log (Greenmax ('33 ',' 44 '));
var blueMax = parcialany (hex, __, __, 'ff');
console.log (Bluemax ('55 ',' 66 '));
var magentamax = parcialany (hex, 'ff', __, 'ff');
console.log (magentamax ('77 '));
De esta manera, será mucho más simple.
Zurra
El curry es una característica de la programación funcional, convirtiendo el procesamiento de múltiples parámetros en el procesamiento de parámetros individuales, similar a las llamadas de la cadena.
Demos un ejemplo simple de función ADD:
La copia del código es la siguiente:
función add (x, y) {
var Oldx = x, oldy = y;
if (typeof oldy === "indefinido") {// parcial
Función de retorno (Newy) {
devolver Oldx + Newy;
}
}
return x + y;
}
De esta manera hay muchas formas de llamar, como:
La copia del código es la siguiente:
// prueba
typeOf add (5); // "función"
agregar (3) (4); // 7
// Esto también es posible
var add2000 = add (2000);
add2000 (10); // 2010
A continuación, definamos una función de curry más general:
La copia del código es la siguiente:
// El primer parámetro es la función que se aplicará, y el segundo parámetro es el número mínimo de parámetros que se pasarán en
function curry (func, minargs) {
if (minargs == indefinido) {
Minargs = 1;
}
función funcwithargsfrozen (frozenargs) {
Función de retorno () {
// Procesamiento de optimización, si no hay parámetros al llamar, devuelva la función misma
var args = array.prototype.slice.call (argumentos);
var newargs = frozenargs.concat (args);
if (newargs.length> = minargs) {
regresar FURC.Apply (this, Newargs);
} demás {
return Funcwithargsfrozen (Newargs);
}
};
}
return funcwithargsfrozen ([]);
}
De esta manera, podemos definir nuestro comportamiento comercial a voluntad, como definir la adición:
La copia del código es la siguiente:
var más = curry (function () {
resultado var = 0;
para (var i = 0; i <arguments.length; ++ i) {
resultado += argumentos [i];
}
resultado de retorno;
}, 2);
Cómo usarlo es real y variado.
La copia del código es la siguiente:
más (3, 2) // llamada normal
Plus (3) // Aplicar, devuelva una función (el valor de retorno es 3+ Valor de parámetros)
Plus (3) (2) // Solicitud completa (volver a 5)
más () (3) () () (2) // Devolver 5
más (3, 2, 4, 5) // puede recibir múltiples parámetros
más (3) (2, 3, 5) // De manera similar
El siguiente es un ejemplo de resta
La copia del código es la siguiente:
var menos = curry (function (x) {
resultado var = x;
para (var i = 1; i <arguments.length; ++ i) {
resultado -= argumentos [i];
}
resultado de retorno;
}, 2);
O si desea cambiar el orden de los parámetros, puede definirlo así
La copia del código es la siguiente:
var flip = curry (function (func) {
return curry (función (a, b) {
return func (b, a);
}, 2);
});
Resumir
Las funciones en JavaScript tienen muchas funciones especiales y pueden usar características de parámetros de cierres y argumentos para implementar muchas técnicas diferentes. En el próximo artículo, continuaremos introduciendo las técnicas de uso de la función para la inicialización.