W3ctech

如果你知道jQuery和Coffeescript，要编写一个jQuery插件是很容易的。

我们将通过写一个jQuery的插件，它会允许我们为表中的行添加交替颜色交替。

这里是整个插件：

$ = jQuery

$.fn.zebraTable = (options) ->

    defaults =

        evenColor: '#ccc'

        oddColor : '#eee'

    options = $.extend(defaults, options)

    @each ->

        $("tr:even", this).css('background-color', options.evenColor)

        $("tr:odd" , this).css('background-color', options.oddColor)

让我们看看它是怎么执行的：

1. 我们把为$绑为jQuery对象。
2. 我们创建了一个匿名函数并添加到jQuery$，分配给fn.zebraTable。
3. 在此之后，我们将能够做$（“选择”）。zebraTable（）或`$（选择）。zerbraTable（optionsDict）
4. 此功能将设置交替行的背景颜色。

(function() {

  var $;

  $ = jQuery;
  $.fn.zebraTable = function(options) {

    var defaults;

    defaults = {

      evenColor: '#ccc',

      oddColor: '#eee'

    };

    options = $.extend(defaults, options);

    return this.each(function() {

      $("tr:even", this).css('background-color', options.evenColor);

      return $("tr:odd", this).css('background-color', options.oddColor);

    });

  };
}).call(this);

你可以这样调用它。

$(function() {

  $("table").zebraTable(  {

      evenColor: 'red',

      oddColor: 'yellow'

    });

});

显着特点：

1. 由于Coffeescript将代码括在函数里, $= jQuery不覆盖一切，没有必要附上自己的封闭的插件。
2. 插件里面的this是指选定的jQuery对象，所以也没有必要用$(this)。

参考
翻译自 http://agiliq.com/blog/2012/01/writing-jquery-plugins-using-coffeescript/