Можно ли упростить синтаксис CoffeeScript / jQuery?

Question

Я ценю, как синтаксис CoffeeScript может помочь в написании функций обратного вызова и сделать синтаксис JQuery намного легче. Тем не менее, меня все еще беспокоит классическая конструкция $(".foo"): есть 6 символов только для 3 «значимых» символов! Насколько я могу сказать, к сожалению, этот синтаксис не может быть упрощен с 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 как есть, solendil. Вы делаете много разных вещей всего за несколько строк, что будет выглядеть немного шумно на любом языке.

Несколько подробностей:

1. Использование автономного @ вызывает споры среди CoffeeScripters. this ведет себя совсем не так, как любая другая конструкция в JS, поэтому я думаю, что имеет смысл дать ему символ, который появится и напомнит вам спросить: "Вау, ты не ожидал, что я имею в виду то же самое, что и я за пределами этого обратного вызова? "

2. Существует открытый выпуск , который, если он будет принят, позволит вам написать

   $(@).siblings("ul").hide()
   

   в

   $ @ .siblings "ul" .hide()
   

   , который также будет работать с пробелами, например:

   $ @
   .siblings "ul"
   .hide()
   

   Вы должны выразить свою поддержку.

3. Что касается скобок при вызове функций без аргументов, альтернативой является запись do func, которая компилируется в func(). Я не рекомендую это.

Что касается

Тем не менее, меня все еще беспокоит классическая конструкция $(".foo"): есть 6 символов только для 3 "значимых" символов!

Как так? По крайней мере, $ (имя функции) и .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)