coffeescript - 理解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，第一个是 key x，第二个是 keys 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但仍然出现相同的错误。

我可以用这个解决它：

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

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

现在我想知道我是否误解了 CoffeeScript 语法中的一些要点，或者其中确实有一些奇怪的东西。还是我在 CoffeeScript 中发现了一个错误？有任何想法吗？

我正在使用 CoffeeScript 1.3.1

score 3 · Accepted Answer

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

score 1 · Accepted Answer

这就是你要找的：

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 是关于简单性和避免花括号和逗号...

score 0 · Accepted Answer

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

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

3 回答 3