使用Coffeescript编写jQuery插件

如果你知道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/