原作: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:
formValues = ( function () { |
var _i, _len, _ref, _results; |
for (_i = 0, _len = _ref.length; _i < _len; _i++) { |
_results.push(elem.value); |
老实说最初这样写代码确实让人提心吊胆的,但是一旦你开始拥抱CoffeeScript的魔法时,你会爱上它的。
飞一般的方法绑定
在jQuery的回调中使用”=>”将会大大减省你手动绑定方法到对象的麻烦。还是来看段代码吧:
func: -> $( '#div' ).click => @element .css color: 'red' |
下面是编译输出的JavaScript:
var __bind = function (fn, me){ return function (){ return fn.apply(me, arguments); }; }; |
return $( '#div' ).click(__bind( function () { |
return this .element.css({ |
代码中的@element
指向了一个jQuery的对象,该对象是在其他地方指定的——比如object.element = $('#some_div')
.
任何使用”=>”所指定的回调函数都会自动绑定到原来的对象上,没错,这很酷。
在2011年函数是这样调用的
瞅一眼这个:
使用CoffeeScript,多个参数可以写成多行来调用,逗号和大括弧是可选的,这使得一些jQuery中签名比较长的方法比如$.post()
和 $.animate()
等更加易读。这儿还有一个例子:
很美味的Coffee不是吗?要注意第一个参数是一个匿名的对象,你甚至可以省略调用函数的元括弧。
让初始化来的更性感吧
我最初开始使用jQuery时我是这样做页面初始化的:
$(document).ready( function () { |
CoffeeScript和新版的jQuery使得上面的代码进化的如此性感:
函数定义语法在CoffeeScript里本身已经非常酷了,能在上面这些场合使用使得其更酷了。你会发现所有需要回调的函数调用在CoffeeScript中都是如此简单。
更多关于CoffeeScript请访问其官网
注:已经有一本关于CoffeeScript的书在七月发行了,其中有一整章的内容是关于jQuery的。