CoffeeScript中作为参数的多个函数[重复]

Question

我终其一生都无法弄清楚这一点，也无法在网上找到解决方案。我想弄清楚如何从基于 jQuery 的 JavaScript 中用 CoffeeScript 编写脚本。

脚本是这样的：

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

我最初尝试这样重写：

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

但这不起作用，所以我想我会在这里发帖。那么如何在 CoffeeScript 中编写 JavaScript 呢？

Answer 1

我想你快到了，但你需要一些括号（对事物进行分组）和一些反斜杠，以防止 CoffeeScript 误解换行符。试试这个：

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

您也可以将所有内容混为一谈，但几个月后您可能会后悔：

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

顺便说一句，转到homepage 并点击“尝试CoffeeScript”，这是一种将少量CoffeeScript 整理出来的简单方法；从 -> 版本开始以减少 JavaScript 中的噪音，然后在获得正确的 JavaScript 时切换到 =>。

我不确定你是否想在这种情况下使用=> 表单，-> 表单：

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

会给你你开始使用的 JavaScript：

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

如果你不喜欢反斜杠，你可以这样做：

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

或者，如果你的函数更长，你可以给它们命名并跳过很多问题：

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

我倾向于在 JavaScript 和 CoffeeScript 中都使用这种方法，对我来说更好读。

Answer 2

对于那些在 2014 CoffeeScript 中寻找答案的人，

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

编译成

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