Question

我很欣赏CoffeeScript语法如何帮助编写回调函数并使jQuery语法更轻松。但是，我仍然受到经典$(".foo")结构的困扰：只有3个“有意义”的字符有6个符号！据我所知，遗憾的是，使用CoffeeScript无法使这种语法更简单。或者可以吗？你有jQuery / CoffeeScript宝石分享吗？或者是否有一些CoffeScript库旨在使jQuery的使用更轻？

作为练习，我们可以使这段代码更简单吗？

$ ->                                        # nice!
  $('.menu').hide()                         # no benefit over JS ?
  $('.sub').hover -> 
    offset = $(@).offset()                  # $(@) is $(this) but the syntax feels awkward
    submenu = $(@).siblings "ul"            # optional parens...
    submenu.css 
      left: offset.left + $(@).outerWidth()
      top: offset.top
    submenu.show()                          # can't get rid of parenthesis ?
  , ->                                      # weird
    $(@).siblings("ul").hide()              # ...in this case, non-optional parens

Answer 1

我发现你的代码非常好CoffeeScript as-is，solendil。你只用了几行就做了很多不同的事情，任何语言看起来都会有点吵。

一些细节：

使用独立的@在CoffeeScripters中是分裂的。 this的行为与JS中的任何其他构造都有很大不同，所以我认为给它一个弹出的符号是有意义的，并提醒你问：“哇，哇，你是否希望我的意思是同样的东西，我在这个回调之外做了什么？“
有一个open issue，如果被采用，将允许你写
```
$(@).siblings("ul").hide()
```
作为
```
$ @ .siblings "ul" .hide()
```
也适用于空格，如下：
```
$ @
.siblings "ul"
.hide()
```
你应该表达你的支持。
对于没有参数的函数调用的parens，另一种方法是编写do func，编译为func()。我不推荐这个。

至于

然而，我仍然受到经典$(".foo")构造的困扰：只有3个“有意义”的角色有6个符号！

怎么样？至少，$（函数名称）和.foo（选择器字符串）组成4个有意义的字符。我还没有看到任何主流语言的字符串分隔符的替代品。所以我会说有意义的角色比例非常好。：）

Answer 2

Coffeescript只是用于编写JS的语法糖（我喜欢，顺便说一下）。你无法摆脱JS对CS施加的对象模型。

您可以随时执行以下操作：

menu = $ ".menu"

但这并没有真正给你买任何东西。

就您的代码示例而言，您可以使用任何语言编写不可读的代码。 JS中的等效代码将更加难以理解（对于知道CS以及他们做JS的人来说）。您可以通过将回调分解为更小的部分来使代码更具可读性。如果您真的想要，可以考虑将子菜单代码与偏移代码分开......但不是什么大不了的事：

hoverIn = -> 
  offset = $(@).offset() 
  submenu = $(@).siblings "ul"            
  submenu.css 
    left: offset.left + $(@).outerWidth()
    top: offset.top
  submenu.show()  

hoverOut = -> $(@).siblings("ul").hide()

$ ->
  $('.menu').hide()                        
  $('.sub').hover hoverIn, hoverOut

但是，这是一个可以用于任何语言的提示。

Answer 3

您是否尝试过编写可读代码？

$(function () {
    function hover_in() {
        var offset = sub.offset();

        submenu.css({
            left: offset.left + sub.outerWidth(),
            top: offset.top
        }).show();
    }

    function hover_out() {
        submenu.hide();   
    }

    var sub = $(".sub"),
        submenu = sub.siblings("ul");

    sub.hover(hover_in, hover_out);
    $(".menu").hide();
});

如果你想真正积极地简洁代码使用不同的语言（perl，APL，LISP）

CoffeeScript / jQuery语法可以变得更简单吗？

3 个答案: