快捷導(dǎo)航

當(dāng)jQuery遭遇CoffeeScript的時(shí)候使用分享

更新時(shí)間：2011年09月17日 19:41:14 作者：

雖然對(duì)ruby不太了解，但是看到CoffeeScript詩(shī)一般的代碼確實(shí)被怔住了，和jQuery之前給我的感覺(jué)是如此的相似——都是一個(gè)字，美，當(dāng)jQuery遭遇到CoffeeScript時(shí)，會(huì)蹦出什么樣的火花呢？

當(dāng)我多年前初次接觸jQuery時(shí)我感覺(jué)我來(lái)到了程序員的天堂。它極大簡(jiǎn)化了DOM操作。函數(shù)式編程變得如此容易，盡管更多適合RIA開(kāi)發(fā)的框架近年來(lái)在浮現(xiàn)，但是我仍舊無(wú)法想象一個(gè)沒(méi)有jQuery的程序人生是多么的罪惡，相信你也有同感~
而來(lái)到CoffeeScript的世界，同樣的美妙故事再次上演。在寫(xiě)了幾行代碼后我相信你將不會(huì)再想念原生的Javascript了。CoffeeScript包含了許多新特性，當(dāng)將它與jQuery結(jié)合時(shí)，你會(huì)發(fā)現(xiàn)一片新天地。
本文的目的就在于展示CoffeeScript和jQuery協(xié)同工作時(shí)美妙場(chǎng)景。
像老板一樣指揮你的代碼
CoffeeScript提供了一堆酷斃了的數(shù)組迭代方法。最好的事莫過(guò)于這不僅僅能工作于數(shù)組，還能工作于jQuery對(duì)象了。來(lái)行詩(shī)一般的代碼吧：
formValues = (elem.value for elem in $('.input'))
這行代碼將會(huì)被翻譯為如下的Javascript：

復(fù)制代碼代碼如下:

 
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; 
})(); 

老實(shí)說(shuō)最初這樣寫(xiě)代碼確實(shí)讓人提心吊膽的，但是一旦你開(kāi)始擁抱CoffeeScript的魔法時(shí)，你會(huì)愛(ài)上它的。
飛一般的方法綁定
在jQuery的回調(diào)中使用"=>"將會(huì)大大減省你手動(dòng)綁定方法到對(duì)象的麻煩。還是來(lái)看段代碼吧：

復(fù)制代碼代碼如下:

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

下面是編譯輸出的Javascript：

復(fù)制代碼代碼如下:

 
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指向了一個(gè)jQuery的對(duì)象，該對(duì)象是在其他地方指定的——比如object.element = $('#some_div').
任何使用"=>"所指定的回調(diào)函數(shù)都會(huì)自動(dòng)綁定到原來(lái)的對(duì)象上，沒(méi)錯(cuò)，這很酷。
在2011年函數(shù)是這樣調(diào)用的
瞅一眼這個(gè)：

復(fù)制代碼代碼如下:

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

使用CoffeeScript，多個(gè)參數(shù)可以寫(xiě)成多行來(lái)調(diào)用，逗號(hào)和大括弧是可選的，這使得一些jQuery中簽名比較長(zhǎng)的方法比如$.post() 和 $.animate() 等更加易讀。這兒還有一個(gè)例子：

復(fù)制代碼代碼如下:

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

很美味的Coffee不是嗎？要注意第一個(gè)參數(shù)是一個(gè)匿名的對(duì)象，你甚至可以省略調(diào)用函數(shù)的元括弧。
讓初始化來(lái)的更性感吧
我最初開(kāi)始使用jQuery時(shí)我是這樣做頁(yè)面初始化的：

復(fù)制代碼代碼如下:

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

CoffeeScript和新版的jQuery使得上面的代碼進(jìn)化的如此性感：

復(fù)制代碼代碼如下:

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

函數(shù)定義語(yǔ)法在CoffeeScript里本身已經(jīng)非?？崃耍茉谏厦孢@些場(chǎng)合使用使得其更酷了。你會(huì)發(fā)現(xiàn)所有需要回調(diào)的函數(shù)調(diào)用在CoffeeScript中都是如此簡(jiǎn)單。
更多關(guān)于CoffeeScript請(qǐng)?jiān)L問(wèn)其官網(wǎng)

注：已經(jīng)有一本關(guān)于CoffeeScript的書(shū)在七月發(fā)行了，其中有一整章的內(nèi)容是關(guān)于jQuery的。

您可能感興趣的文章: