Как улучшить виджеты Jquery, написанные на CoffeeScript?

Question

Моя цель: изучить CoffeeScript, перенеся виджет jquery в coffescript.

После превосходного введения в виджет jQuery я перенес пример кода на CoffeeScript: http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

из:

var Green5  = {
    getLevel: function () { return this.options.level; },
    setLevel: function (x) {
        var greenlevels = this.options.greenlevels;
        var level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x)));
        this.options.level = level;
        this.element.css({background: greenlevels[level]});
        this._trigger('change', 0, level);
    },
    _init: function() { this.setLevel(this.getLevel()); }, // grab the default value and use it
    darker: function() { this.setLevel(this.getLevel()-1); },
    lighter: function() { this.setLevel(this.getLevel()+1); },
    off: function() {
        this.element.css({background: 'none'});
        this._trigger('done');
        this.destroy(); // use the predefined function
    },
    options: {
        level: 15,
        greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']
    }
};
$.widget("ui.green5", Green5);

to:

Green5 =
    getLevel: -> @options.level
    setLevel: (x) ->
        greenlevels = @options.greenlevels;
        level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x)));
        @options.level = level;
        @element.css({background: greenlevels[level]});
        @_trigger('change', 0, level);
    _init: -> @setLevel(@getLevel()) # grab the default value and use it
    darker: -> @setLevel(@getLevel()-1)
    lighter: -> @setLevel(@getLevel()+1)
    off: ->
        @element.css({background: 'none'})
        @_trigger('done')
        @destroy() # use the predefined function
    options: {
        level: 15,
        greenlevels:['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']
    }

$.widget("ui.green5", Green5);

Это прекрасно работает, но портировать было так легко, что у меня появилось ощущение, что я еще не получил CoffeeScript.Как бы вы улучшили этот код?

обновление (спасибо Билли!):

Green5 =
    getLevel: -> @options.level
    setLevel: (x) ->
        greenlevels = @options.greenlevels
        level = Math.floor(Math.min(greenlevels.length-1, Math.max(0,x)));
        @options.level = level;
        @element.css
            background: greenlevels[level]
        @_trigger('change', 0, level)
    _init: -> @setLevel @getLevel() # grab the default value and use it
    darker: -> @setLevel @getLevel() - 1 
    lighter: -> @setLevel @getLevel() + 1
    off: ->
        @element.css
            background: 'none'
        @_trigger 'done'
        @destroy() # use the predefined function
    options: {
        level: 15,
        greenlevels:['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']
    }

$.widget "ui.green5", Green5

Answer 1

В конце можно избавиться от точек с запятой, а также избавиться от тонны скобок и фигурных скобок.

Green5 =
    getLevel: -> @options.level
    setLevel: (x) ->
        greenlevels = @options.greenlevels;
        level = Math.floor Math.min greenlevels.length-1, Math.max 0,x
        @options.level = level
        @element.css background: greenlevels[level]
        @_trigger 'change', 0, level
    _init: -> @setLevel this.getLevel() # grab the default value and use it
    darker: -> @setLevel this.getLevel() - 1
    lighter: -> @setLevel this.getLevel() + 1
    off: ->
        @element.css background: 'none'
        @_trigger 'done'
        @destroy() # use the predefined function
    options: level: 15, greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']

$.widget "ui.green5", Green5

Однако синтаксический сахар - не единственное преимущество CoffeeScript. Большим плюсом является то, как он переписывает определенные структуры кода в лучший JavaScript.

Например:

yearsOld = max: 10, ida: 9, tim: 11

ages = for child, age of yearsOld
  child + " is " + age

становится:

var age, ages, child, yearsOld;
yearsOld = {
  max: 10,
  ida: 9,
  tim: 11
};
ages = (function() {
  var _results;
  _results = [];
  for (child in yearsOld) {
    age = yearsOld[child];
    _results.push(child + " is " + age);
  }
  return _results;
})();

Там, где все переменные объявлены правильно, и автоматически добавляется замыкание вокруг ages for loop, написанного с использованием хорошего метода javascript, который, честно говоря, довольно неудобно читать.