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呢？

- Dave Long

---

重复的问题：https://dev59.com/mGw15IYBdhLWcg3wqNqM - Trevor Burnham

抱歉，Tever。我不知道那些是匿名函数，所以我无法通过搜索找到任何东西。 - Dave Long

http://js2coffee.org/ - Ivan Black

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))

顺便提一句，去主页，点击“尝试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 中，我倾向于使用这种方法，我认为这样更易读。

- mu is too short

---

第二个反斜杠是不必要的。第一个反斜杠只有在省略括号时才是必需的，因为CoffeeScript解析器会假定该行是完整的函数调用，除非您明确包含一个反斜杠来指示该行继续。如果您使用括号，则不需要任何反斜杠。 - Chuck

@Chuck：我们可以称之为个人偏好。我实际上喜欢括号，所以我会使用它们（并忽略那些不屑的眼神），但很多人似乎不喜欢它们。在现实生活中，我可能会选择我的（更新后的）最后一个版本，但我并没有太多的CoffeeScript经验，所以我还在摸索中。 - mu is too short

我一直在尝试使用Try CoffeeScript来确保它能正常工作，但是除了hover方法（没有任何参数）之外，没有任何代码能够编译通过，所以我知道肯定出了问题。有没有办法加载带有jQuery的交互式控制台进行测试呢？ - Dave Long

@Dave：据我所知没有。不过你可以尝试使用jsfiddle和http://jsfiddle.net/kaleb/neEp4/来实现一些功能。 - mu is too short

我找到了一个 Coda 插件，可以让我使用 jQuery 编译和测试 coffeescript。 - Dave Long

Answer 2

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

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

编译成

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

- c0d3rman