中国领先的IT技术网站
|
|

当jQuery遭遇CoffeeScript——妙不可言

虽然对ruby不太了解,但是看到CoffeeScript诗一般的代码确实被怔住了,和jQuery之前给我的感觉是如此的相似——都是一个字,美,当jQuery遭遇到CoffeeScript时,会蹦出什么样的火花呢?

作者:filod来源:filod|2011-09-19 10:11

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


虽然对ruby不太了解,但是看到CoffeeScript诗一般的代码确实被怔住了,和jQuery之前给我的感觉是如此的相似——都是一个字,美,当jQuery遭遇到CoffeeScript时,会蹦出什么样的火花呢?

当我多年前初次接触jQuery时我感觉我来到了程序员的天堂。它极大简化了DOM操作。函数式编程变得如此容易,尽管更多适合RIA开发的框架近年来在浮现,但是我仍旧无法想象一个没有jQuery的程序人生是多么的罪恶,相信你也有同感~

而来到CoffeeScript的世界,同样的美妙故事再次上演。在写了几行代码后我相信你将不会再想念原生的Javascript了。CoffeeScript包含了许多新特性,当将它与jQuery结合时,你会发现一片新天地。

51CTO推荐专题:jQuery从入门到精通

本文的目的就在于展示CoffeeScript和jQuery协同工作时美妙场景。

像老板一样指挥你的代码

CoffeeScript提供了一堆酷毙了的数组迭代方法。最好的事莫过于这不仅仅能工作于数组,还能工作于jQuery对象了。来行诗一般的代码吧:

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

这行代码将会被翻译为如下的Javascript:

  1. var elem, formValues;  
  2. formValues = (function() {  
  3.   var _i, _len, _ref, _results;  
  4.   _ref = $('.input');  
  5.   _results = [];  
  6.   for (_i = 0, _len = _ref.length; _i < _len; _i++) {  
  7.     elem = _ref[_i];  
  8.     _results.push(elem.value);  
  9.   }  
  10.   return _results;  
  11. })(); 

老实说最初这样写代码确实让人提心吊胆的,但是一旦你开始拥抱CoffeeScript的魔法时,你会爱上它的。

飞一般的方法绑定

在jQuery的回调中使用"=>"将会大大减省你手动绑定方法到对象的麻烦。还是来看段代码吧:

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

下面是编译输出的Javascript:

  1. var object;  
  2. var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };  
  3. object = {  
  4.   func: function() {  
  5.     return $('#div').click(__bind(function() {  
  6.       return this.element.css({  
  7.         color: 'red' 
  8.       });  
  9.     }, this));  
  10.   }  
  11. }; 

代码中的@element指向了一个jQuery的对象,该对象是在其他地方指定的——比如object.element = $('#some_div').

任何使用"=>"所指定的回调函数都会自动绑定到原来的对象上,没错,这很酷。

在2011年函数是这样调用的

瞅一眼这个:

  1. $.post(  
  2.   "/posts/update_title" 
  3.   new_title: input.val()  
  4.   id: something  
  5.   -> alert('done')  
  6.   'json' 

使用CoffeeScript,多个参数可以写成多行来调用,逗号和大括弧是可选的,这使得一些jQuery中签名比较长的方法比如$.post() 和 $.animate() 等更加易读。这儿还有一个例子:

  1. $('#thing').animate  
  2.   width: '+20px' 
  3.   opacity: '0.5' 
  4.   2000  
  5.   'easeOutQuad' 

很美味的Coffee不是吗?要注意第一个参数是一个匿名的对象,你甚至可以省略调用函数的元括弧。

让初始化来的更性感吧

我最初开始使用jQuery时我是这样做页面初始化的:

  1. $(document).ready(function() {  
  2.   some();  
  3.   init();  
  4.   calls();  
  5. }) 

CoffeeScript和新版的jQuery使得上面的代码进化的如此性感:

  1. $->  
  2.   some()  
  3.   init()  
  4.   calls() 

函数定义语法在CoffeeScript里本身已经非常酷了,能在上面这些场合使用使得其更酷了。你会发现所有需要回调的函数调用在CoffeeScript中都是如此简单。

更多关于CoffeeScript请访问其官网

注:已经有一本关于CoffeeScript的书在七月发行了,其中有一整章的内容是关于jQuery的。

原作:How CoffeeScript makes jQuery more fun than ever—— Stefan Buhrmester

翻译:filod

转载声明:请注明原作者、翻译者以及译文链接。

【编辑推荐】

  1. Web开发者爱不释手的18款超赞jQuery插件
  2. jQuery给力插件大阅兵
  3. 25个超棒的jQuery日历和日期选取插件
  4. 从零开始学习jQuery之让页面动起来
  5. 分享10个超炫的jQuery网站
【责任编辑:陈贻新 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

一目了然——Web软件显性设计之路

本书阐述了为什么以及如何设计出简单易用的基于Web的软件,让用户单凭常识即可有效地使用它。主要内容包括:显性设计的概念、如何理解用户...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言