理解coffeescript语法

Question

我是CoffeeScript的新手，我无法理解它的一些语法。

例如，在此函数调用中：

e('')
    .color('rgb(255,0,0)')
    .attr( x: 20,
           y: 100,
           w: 10,
           h: 100 )

我希望这能编译JS代码，将带有键x，y，w，h的对象传递给attr方法。但是这段代码实际上编译成了这个：

e('').color('rgb(255,0,0)').attr({
  x: 20
}, {
  y: 100,
  w: 10,
  h: 100
});

它将两个对象传递给attr，第一个使用键x，第二个使用键y，w和h。我无法理解为什么x与其他键分开，但其他键没有彼此分开？

由于我想传递attr方法一个对象，我尝试了这个：

e('')
    .color('rgb(255,0,0)')
    .attr({x: 20,
           y: 100,
           w: 10,
           h: 100})

但是这给了我y: 100所在行的编译错误：Error: Parse error on line 4: Unexpected '{'。奇怪的是，第4行没有{。我也尝试删除attr中的parens，但仍然遇到同样的错误。

我可以用这个解决它：

e('')
    .color('rgb(255,0,0)')
    .attr(
           x: 20,
           y: 100,
           w: 10,
           h: 100)

如果我在.attr(之后移除换行符，那么我在第一个示例中得到的代码相同，这不是我想要的。

现在我想知道我是否误解了CoffeeScript语法中的一些要点，或者其中有很多奇怪的东西。或者我是否在CoffeeScript中发现了一个错误？有什么想法吗？

我正在使用CoffeeScript 1.3.1

Answer 1

在coffeescript中，空白是重要的。你不能只是在你认为他们应该去的地方排队。尝试这样的事情：

e('')
  .color('rgb(255,0,0)')
  .attr(
    x: 20
    y: 100
    w: 10
    h: 100
  )

编辑：如果你想让x与方法调用在同一行，你只需要正确缩进：

e('')
    .color('rgb(255,0,0)')
    .attr(x: 20,
    y: 100,
    w: 10,
    h: 100)

Answer 2

这就是你要找的东西：

e('')
  .color('rgb(255,0,0)')
  .attr
    x:20
    y:100
    w:10
    h:100

编译为：

e('').color('rgb(255,0,0)').attr({
  x: 20,
  y: 100,
  w: 10,
  h: 100
});

请记住，CoffeeScript是关于简单性和避免花括号和逗号...

Answer 3

显而易见的解决方案是将对象放在一行，如.attr({x: 20, y: 100, w: 10, h: 100})。 （虽然没有测试过，但我不明白为什么它不起作用。）

虽然有时候你不能使用括号，但我更喜欢在函数调用中使用它们，因为我发现它更具可读性。