技术天书馆 / 网站技术 / JavaScript框架的新宠儿:CoffeeScript VS...

0 0

   

JavaScript框架的新宠儿:CoffeeScript VS jQuery

2013-05-29  技术天书馆

译者前语:虽然对ruby不太知道,可是看到CoffeeScript诗通常的代码的确被怔住了,和jQuery之前给我的感受是如此的类似——都是一个字,美,当jQuery遭遇到CoffeeScript时,会蹦出什么样的火花呢?

当我多年前初度触摸jQuery时我感受我来到了程序员的地狱。它极大简化了DOM操作。函数式编程变得如此简略,虽然更多合适RIA开发的结构这些年在显现,可是我依旧无法幻想一个没有jQuery的程序人生是多么的罪恶,相信你也有同感~

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

这篇文章的意图就在于展现CoffeeScript和jQuery协同作业时美好场景。

 

像老板相同指挥你的代码

 

CoffeeScript供给了成堆酷毙了的数组迭代办法。最佳的事莫过于这不仅仅能作业于数组,还能作业于jQuery目标了。来行诗通常的代码吧:

formValues = (elem.valueforelemin$('.input'))

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

varelem, 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:

varobject;
var__bind =function(fn, me){returnfunction(){returnfn.apply(me, arguments); }; };
object = {
func:function() {
return$('#div').click(__bind(function() {
returnthis.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中都是如此简略。

本文地址:http://www.5ishare.com/bzwdk/browser_script/js/368977.shtml

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多