jquery - 如何改进用 CoffeeScript 编写的 Jquery Widget？

Question

我的目标:通过将 jquery 小部件移植到 coffescript 来学习 CoffeeScript。

按照优秀的 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);

至:

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 循环 周围自动添加一个闭包，该闭包是用良好的 javascript 技术编写的，老实说，阅读起来相当困难。