jquery - tutorial - coffeescript vs typescript

Múltiples funciones como argumentos en CoffeeScript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo pasar dos funciones anónimas como argumentos en CoffeScript? 4 respuestas

No puedo por mi vida resolver esto o encontrar una solución en línea. Estoy tratando de averiguar cómo escribir un script en CoffeeScript desde JavaScript basado en jQuery.

El guión es este:

jQuery(''.post-thumb a'').hover( function() {
    jQuery(this).find(''.overlay'').fadeIn(150);
}, function() {
    jQuery(this).find(''.overlay'').fadeOut(150);
});

Al principio intenté reescribirlo así:

thumb_overlay =>
    $(''.post-thumb a'').hover
        => $(this).find(''.overlay'').fadeIn(150)
        ,=> $(this).find(''.overlay'').fadeOut(150)

Pero eso no funcionó, así que pensé en publicar aquí. Entonces, ¿cómo escribo ese JavaScript en CoffeeScript?

Answer 1

Creo que casi has llegado, pero necesitas algunos paréntesis (para agrupar cosas) y algunas barras invertidas para evitar que CoffeeScript malinterprete las nuevas líneas. Prueba esto:

thumb_overlay =>
    $(''.post-thumb a'').hover /
        (=> $(this).find(''.overlay'').fadeIn(150)), /
        (=> $(this).find(''.overlay'').fadeOut(150))

También puede combinarlo todo en una sola línea, pero puede lamentarlo en unos meses:

thumb_overlay =>
    $(''.post-thumb a'').hover (=> $(this).find(''.overlay'').fadeIn(150)), (=> $(this).find(''.overlay'').fadeOut(150))

Y por cierto, vaya a la página de inicio y presione "Probar CoffeeScript", que es una manera fácil de ordenar pequeños fragmentos de CoffeeScript; Comience con la versión -> para reducir el ruido en el JavaScript y luego cambie a => cuando obtenga el JavaScript correcto.

No estoy seguro de si quiere => formularios en este caso, el formulario -> formulario:

$(''.post-thumb a'').hover /
    (-> $(this).find(''.overlay'').fadeIn(150)), /
    (-> $(this).find(''.overlay'').fadeOut(150))

te daría el JavaScript con el que comenzaste:

$(''.post-thumb a'').hover((function() {
  return $(this).find(''.overlay'').fadeIn(150);
}), (function() {
  return $(this).find(''.overlay'').fadeOut(150);
}));

Y si no te gustan las barras invertidas, puedes hacer esto:

$(''.post-thumb a'').hover( 
    -> $(this).find(''.overlay'').fadeIn(150)
    -> $(this).find(''.overlay'').fadeOut(150)
)

O si sus funciones son más largas, podría darles nombres y omitir gran parte del problema:

fadeIn  = -> $(this).find(''.overlay'').fadeIn(150)
fadeOut = -> $(this).find(''.overlay'').fadeOut(150)
$(''.post-thumb a'').hover(fadeIn, fadeOut)

Tiendo a preferir este enfoque tanto en JavaScript como en CoffeeScript, me parece mejor.

Answer 2

Para aquellos que buscan una respuesta en 2014 CoffeeScript,

$(''someSelector'').hover ->
  alert "hello"
, ->
  alert "world"

compila en

$(''someSelector'').hover(function() {
  return alert("hello");
}, function() {
  return alert("world");
});