当jQuery遭遇CoffeeScript的时候 使用分享
时间：2021-09-29 08:48:36|栏目：jquery|点击： 次
当我多年前初次接触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的回调中使用"=>"将会大大减省你手动绑定方法到对象的麻烦。还是来看段代码吧：
下面是编译输出的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的世界，同样的美妙故事再次上演。在写了几行代码后我相信你将不会再想念原生的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的。
上一篇：jQuery开源组件BootstrapValidator使用详解
栏 目：jquery
下一篇：jQuery制作图片旋转效果
本文标题：当jQuery遭遇CoffeeScript的时候 使用分享
本文地址：http://www.codeinn.net/misctech/178007.html
