2012-07-03 13 views
7

Estoy trabajando en mi camino a través de "Learning jQuery" (Tercera edición).jQuery: ¿Qué es una "devolución de llamada de valor"?

En el capítulo 4: "La manipulación del DOM" hay una sección que explica algo que se llama el "Valor de devolución de llamada ". Esta es una nueva para mí.

El autor explica esto mediante un ejemplo de lista de enlaces en los que los ID de cada deben ser únicos.

Del libro:.

"Una llamada de retorno valor es simplemente una función que se suministra en lugar del valor de un argumento Esta función se invoca entonces una vez por elemento en el conjunto combinado Lo que se devuelven datos. de la función se utiliza como el nuevo valor para el atributo. Por ejemplo, podemos utilizar esta técnica para generar un valor de identificación diferente para cada elemento, de la siguiente manera: "

Chaffer, Jonathan (2011-09-23). Learning jQuery, tercera edición (p.116). Packt Publishing. Versión Kindle.

jQuery(document).ready(function($){ 

// get all external links 
    $('div.chapter a').attr({ 
     rel:'external', 
     title:'Learn more at Wikipedia', 
     id: function (index, oldValue) { 
       return 'wikilink-' + index; 
     } 
    }); 
}) 

funciona como un encanto, pero la mecánica del ello: propiedad me escape.

  1. Cómo qué parámetro 1 (índice) saben a ser un número entero?
  2. ¿Cómo sabe la función incremento index?
  3. ¿Cómo sabe el segundo parámetro (oldValue) mantener el valor anterior de la propiedad (antes de la modificación)?
  4. ¿Es esto una construcción jQuery? Una cosa JSON? Es genial. funciona, pero ... ¿qué diablos es es esta cosa de "devolución de valor" hecha de?

Por favor, asesorar

Respuesta

6

1) ¿Cómo funciona el parámetro 1 (índice) saber para ser un número entero?

jQuery pasa un número entero.

2) ¿Cómo sabe la función incrementar el índice?

La devolución de llamada no incrementa index, el método jQuery sí.

3) ¿Cómo sabe el segundo parámetro (oldValue) mantener el valor anterior de la propiedad (antes de la modificación)?

jQuery lo pasa.

Las respuestas a las preguntas 1-3 son quizás mejor entendido por una función que realiza algo similar a $.attr:

Array.prototype.each = function (f) { 
    var i; 
    for (i=0; i < this.length; ++i) { 
     f(i, this[i]); 
    } 
}; 

['zero', 'one', 'two'].each(function (i,item) {console.log({i: item})}); 

f es una devolución de llamada. each es responsable de iterar sobre una colección y llamar al f para cada elemento de índice &. La misma estructura de código se puede utilizar para las funciones:

/* Map each item in a sequence to something else, 
* returning a new sequence of the new values. 
*/ 
Array.prototype.map = function (f) { 
    var i, result = []; 
    for (i=0; i < this.length; ++i) { 
     result[i] = f(i, this[i]); 
    } 
    return result; 
}; 

['zero', 'one', 'two'].map(function(i,item) {return item.length}); 
// result: [4, 3, 3] 

/* Return a sequence of the items from this sequence 
* for which 'keep' returns true. 
*/ 
Array.prototype.filter = function (keep) { 
    var i, result = []; 
    for (i=0; i < this.length; ++i) { 
     if (keep(i, this[i])) { 
      result.push(this[i]); 
     } 
    } 
    return result; 
}; 

['zero', 'one', 'two'].filter(function(i,item) {return item.length <= 3}); 
// result: ['one', 'two'] 

Implementación de mapconcat, foldl and foldr deja como ejercicio. Como otro ejercicio, vuelva a escribir map y filter en términos de each.

Tenga en cuenta que estas funciones están destinadas a ilustrar cómo funcionan las devoluciones de llamada. Pueden causar problemas en el código de producción.

4) ¿Es esto una construcción jQuery? Una cosa JSON? Es genial. funciona, pero ... ¿de qué está hecha esta cosa llamada "devolución de valor"?

Callbacks son una técnica genérica que jQuery hace un uso extensivo de. Son la característica clave de functional programming, donde las funciones son datos que se pueden operar al igual que otros tipos de datos. Por lo tanto, tiene funciones que toman funciones como argumentos y pueden devolver funciones. En ciertos contextos, callbacks también se conocen como "continuaciones" y forman la base de continuation passing style (CPS). Esto es particularmente importante para asynchronous function calls [2] (donde la función retorna antes de que se complete el cálculo, en oposición a synchronous calls), tal como se usa para solicitudes Ajax. Para ver algo del poder de CPS, lea "Use continuations to develop complex Web applications".

El otro aspecto de esto, el "valor" en "recuperación de valores", es que, como JS es un lenguaje de tipeo dinámico (los tipos están asociados con datos, en lugar de variables), los parámetros formales pueden vincularse a objetos de cualquier tipo. Una función puede comportarse de manera diferente según lo que se pase. Algunas veces esto se implementa examinando el tipo del argumento, que está en efecto ad-hoc polymorphism (la función, en lugar del lenguaje, debe manejar el despacho). Sin embargo, parametric polymorphism o (en su defecto) duck typing siempre deben preferirse a examinar tipos de argumentos. El polimorfismo paramétrico se logra al garantizar que todos los tipos que se pueden pasar a una función determinada admitan la misma interfaz (nombres de métodos, argumentos, condiciones previas, condiciones posteriores &, etc.). Por ejemplo, todos los tipos de secuencia deben tener una propiedad length y deben indizarse por números enteros; Mientras eso se cumpla, puede usar su propio tipo de secuencia con muchas funciones que toman arrays.

No estoy seguro de lo que quiere decir con JSON, pero probablemente no es lo que generalmente se entiende. JSON es un formato de intercambio de datos basado en una versión limitada de la sintaxis literal del objeto JS. JSON no está involucrado en ninguna parte del código de muestra o texto citado.

+0

Great breakdown. ¡Gracias! – sleeper

+0

¡Incluso mejor desglose! Ahora lo entiendo. ¿Entonces este patrón NO es un ejemplo de currying en absoluto? – sleeper

+0

Esta discusión de currying sigue siendo tan nueva 2 me, está por encima de mi cabeza.Sin embargo, su desglose COMPLETAMENTE responde y explica los problemas planteados en mi pregunta. Así que cambié mi elección de respuestas a la tuya. ¡Gracias por todo el trabajo que pones en esta respuesta! – sleeper

4

Es una construcción JQuery. Si mira la fuente, encontrará que JQuery está inspeccionando el parámetro para saber si pasó un valor o una función. Si se trata de una función, se maneja como se ve.

+0

Wow. Muy genial. ¿Puedes recomendar más lecturas sobre este tema? – sleeper

+0

En realidad, '$ .attr' no utiliza currying. Currying es convertir una función * n * -ary (una función que toma * n * argumentos) en * n * funciones unarias, cada una de las cuales (excepto la última) devuelve una función única. – outis

Cuestiones relacionadas