Hoy en día, las aplicaciones nativas y las aplicaciones web son la corriente principal, lo que significa que varios marcos de aplicaciones web basados en navegadores se están volviendo cada vez más populares, y aquellos que hacen JS se están volviendo cada vez más prometedores. También decidí pasar gradualmente del desarrollo de fondo al desarrollo frontal y el desarrollo móvil. No hablemos de tonterías, vamos al tema de la "función de devolución de llamada JS".
Hablando de funciones de devolución de llamada, aunque muchas personas conocen el significado, todavía tienen solo unos pocos entendimientos. En cuanto a cómo usarlo, todavía está un poco confundido. Algunas cosas relacionadas en Internet no han explicado en detalle lo que sucedió, y son más unilaterales. A continuación, solo hablaré sobre mi comprensión personal, no me critiques. Echemos un vistazo a una definición aproximada "La función A tiene un parámetro, y este parámetro es una función b. Cuando la función A se ejecuta, la función B se ejecuta. Entonces este proceso se llama devolución de llamada". Esta oración significa que la función B se pasa a la función A en la forma de un parámetro y se ejecuta en el orden de ejecutar primero, y luego ejecutar los parámetros B, B es la llamada función de devolución de llamada. Primero veamos el siguiente ejemplo.
La copia del código es la siguiente:
función a (devolución de llamada) {
alerta ('a');
callback.call (this); // o callback (), callback.apply (this), dependiendo de la preferencia personal
}
función b () {
alerta ('b');
}
//Llamar
a (b);
El resultado es que 'A' aparece primero y 'B' aparece. De esta manera, alguien podría preguntar: "¿Cuál es el punto de escribir dicho código? ¡No parece ser de gran utilidad!"
Sí, en realidad creo que no tiene sentido escribir así, "Si llamas a una función, solo llámalo directamente en la función". Solo estoy escribiendo un pequeño ejemplo para que te dé un entendimiento preliminar. Este tipo de parámetros rara vez se usa en el proceso de escribir código, porque en la mayoría de los escenarios, tenemos que pasar los parámetros. Aquí hay un parámetro:
La copia del código es la siguiente:
función c (devolución de llamada) {
alerta ('c');
callback.call (this, 'd');
}
//Llamar
c (función (e) {
alerta (e);
});
¿Esta llamada parece familiar? Aquí el parámetro E se asigna a 'D'. Simplemente asignamos el valor a los chorros de caracteres, pero de hecho también podemos asignar el valor a los objetos. ¿Hay un parámetro E en jQuery? Hablemos de ello a continuación
¿Cómo se asigna el parámetro E en jQuery por una devolución de llamada?
Creo que todos están familiarizados con el marco jQuery. Se ha lanzado durante mucho tiempo y se usa durante el desarrollo. Es relativamente simple. Es muy conveniente buscar la API en línea y es fácil comenzar. En el marco JQuery, a veces necesitamos obtener algunos parámetros en el evento, como las coordenadas del clic actual y el objeto de elemento del clic. Este requisito es fácil de manejar en jQuery:
La copia del código es la siguiente:
$ ("#id"). bind ('hacer clic', función (e) {
//e.pagex, E.Pagey, E.Target ...... Varios datos
});
Es bastante conveniente de usar. De hecho, la asignación de este parámetro E también se logra a través de la función de devolución de llamada. A este parámetro se le asigna un valor de objeto utilizando el parámetro de devolución de llamada. Los amigos que han estudiado cuidadosamente el código fuente JJQuery deberían haber descubierto esto.
También existe el mismo principio en el parámetro de datos $ .get ('' ', {}, function (data) {}).
Echemos un vistazo a cómo se aplica la función de devolución de llamada en el objeto JQuery Event.
Por conveniencia, simplemente escribí sobre algunas implementaciones relacionadas con $. He escrito antes que "Xiaotan JQuery" tiene un método relativamente cercano a la implementación del marco. Solo estoy escribiendo un selector simple a continuación.
La copia del código es la siguiente:
<div id = "contenedor">
</div>
<script>
var _ $ = function (id)
{
this.element = document.getElementById (id);
}
_ $. Prototype = {
Bind: Función (EVT, devolución de llamada)
{
var que = esto;
if (document.addeventListener)
{
this.element.addeventListener (EVT, function (e) {
callback.call (this, that.standadize (e));
} ,FALSO);
}
else if (document.attachevent)
{
this.element.attachevent ('on'+evt, function (e) {
callback.call (this, that.standadize (e));
});
}
demás
this.Element ['on'+evt] = function (e) {
callback.call (this, that.standadize (e));
};
},
standadize: function (e) {
var evt = e || window.event;
var Pagex, Pagey, Layerx, Cayery;
// Coordenada horizontal Pagex La capa de coordenada vertical Page se encuentra en la capa de coordenadas horizontales, el clic se encuentra en la coordenada vertical del elemento
if (evt.pagex)
{
pagex = evt.pagex;
Pagey = evt.pagey;
}
demás
{
pagex = document.body.scrollleft+evt.clientx-document.body.clientleft;
pagey = document.body.scrolltop+evt.clienty-document.body.clientltop;
}
if (evt.layerx)
{
Layerx = evt.layerx;
Cayery = Evt.layery;
}
demás
{
Layerx = EVT.OffSetX;
Layerxy = evt.offsety;
}
devolver {
Pagex: Pagex,
Pagey: Pagey,
Layerx: Layerx,
Capas: Capas
}
}
}
ventana. $ = function (id)
{
devolver nuevo _ $ (id);
}
$ ('Container'). Bind ('Click', function (E) {
alerta (E.Pagex);
});
$ ('Container1'). Bind ('Click', function (E) {
alerta (E.Pagex);
});
</script>
Principalmente analizamos la implementación de la función Standadize. No diré mucho sobre este código, el objeto de retorno es
La copia del código es la siguiente:
devolver {
Pagex: Pagex,
Pagey: Pagey,
Layerx: Layerx,
Capas: Capas
}
Luego mire la devolución de llamada del código. En realidad, a este código se le asigna un valor al parámetro E, que se implementa utilizando una devolución de llamada.
La función anónima se pasa cuando se llama a la función de devolución de llamada
La copia del código es la siguiente:
función (e) {
}
callback.call (this, que.standadize (e)) es equivalente a ejecutar dicho código de este tipo
La copia del código es la siguiente:
(función (e) {
}) (standadize (e))
Esto también es lo clásico de jQuery usando funciones de devolución de llamada. Así es como se asigna el parámetro E. Después de decir esto, probablemente comprenda bien esto y cómo usarlo.
Las devoluciones de llamada se usan con más frecuencia en varios marcos. A veces, al escribir algo solo, también puede usarlo de acuerdo con la situación real.