[翻译]当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的。