[翻譯]當jQuery遭遇CoffeeScript的時候——妙，不可言

原做：How CoffeeScript makes jQuery more fun than ever—— Stefan Buhrmester

翻譯：filod

轉載聲明：請註明原做者、翻譯者以及譯文連接。

譯者前言：雖然對ruby不太瞭解，可是看到CoffeeScript詩通常的代碼確實被怔住了，和jQuery以前給個人感受是如此的類似——都是一個字，美，當jQuery遭遇到CoffeeScript時，會蹦出什麼樣的火花呢？

當我多年前初次接觸jQuery時我感受我來到了程序員的天堂。它極大簡化了DOM操做。函數式編程變得如此容易，儘管更多適合RIA開發的框架近年來在浮現，可是我仍舊沒法想象一個沒有jQuery的程序人生是多麼的罪惡，相信你也有同感~

而來到CoffeeScript的世界，一樣的美妙故事再次上演。在寫了幾行代碼後我相信你將不會再想念原生的Javascript了。CoffeeScript包含了許多新特性，當將它與jQuery結合時，你會發現一片新天地。

本文的目的就在於展現CoffeeScript和jQuery協同工做時美妙場景。

像老闆同樣指揮你的代碼

CoffeeScript提供了一堆酷斃了的數組迭代方法。最好的事莫過於這不單單能工做於數組，還能工做於jQuery對象了。來行詩通常的代碼吧：

formValues = (elem.value for elem in $('.input'))

這行代碼將會被翻譯爲以下的Javascript：

var elem, formValues;
formValues = (function() {
  var _i, _len, _ref, _results;
  _ref = $('.input');
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    elem = _ref[_i];
    _results.push(elem.value);
  }
  return _results;
})();

老實說最初這樣寫代碼確實讓人提心吊膽的，可是一旦你開始擁抱CoffeeScript的魔法時，你會愛上它的。

飛通常的方法綁定

在jQuery的回調中使用"=>"將會大大減省你手動綁定方法到對象的麻煩。仍是來看段代碼吧：

object =
  func: -> $('#div').click => @element.css color: 'red'

下面是編譯輸出的Javascript：

var object;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
object = {
  func: function() {
    return $('#div').click(__bind(function() {
      return this.element.css({
        color: 'red'
      });
    }, this));
  }
};

代碼中的@element指向了一個jQuery的對象，該對象是在其餘地方指定的——好比object.element = $('#some_div').

任何使用"=>"所指定的回調函數都會自動綁定到原來的對象上，沒錯，這很酷。

在2011年函數是這樣調用的

瞅一眼這個：

$.post(
  "/posts/update_title"
  new_title: input.val()
  id: something
  -> alert('done')
  'json'
)

使用CoffeeScript，多個參數能夠寫成多行來調用，逗號和大括弧是可選的，這使得一些jQuery中籤名比較長的方法好比$.post()和$.animate()等更加易讀。這兒還有一個例子：

$('#thing').animate
  width: '+20px'
  opacity: '0.5'
  2000
  'easeOutQuad'

很美味的Coffee不是嗎？要注意第一個參數是一個匿名的對象，你甚至能夠省略調用函數的元括弧。

讓初始化來的更性感吧

我最初開始使用jQuery時我是這樣作頁面初始化的：

$(document).ready(function() {
  some();
  init();
  calls();
})

CoffeeScript和新版的jQuery使得上面的代碼進化的如此性感：

$->
  some()
  init()
  calls()

函數定義語法在CoffeeScript裏自己已經很是酷了，能在上面這些場合使用使得其更酷了。你會發現全部須要回調的函數調用在CoffeeScript中都是如此簡單。

更多關於CoffeeScript請訪問其官網

注：已經有一本關於CoffeeScript的書在七月發行了，其中有一整章的內容是關於jQuery的。