当jQuery遭遇CoffeeScript的时候 使用分享


Posted in Javascript onSeptember 17, 2011

当我多年前初次接触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的回调中使用"=>"将会大大减省你手动绑定方法到对象的麻烦。还是来看段代码吧:
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的。

Javascript 相关文章推荐
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
easyui validatebox验证
Apr 29 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 #Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 #Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 #Javascript
jquer之ajaxQueue简单实现代码
Sep 15 #Javascript
js substr、substring和slice使用说明小记
Sep 15 #Javascript
javascript 闭包
Sep 15 #Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 #Javascript
You might like
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
详解JS函数重载
2014/12/04 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
详解Python验证码识别
2016/01/25 Python
彻底搞懂Python字符编码
2018/01/23 Python
python一键去抖音视频水印工具
2018/09/14 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python中的错误如何查看
2020/07/08 Python
python实现马丁策略的实例详解
2021/01/15 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
2014幼儿教师个人工作总结
2014/12/03 职场文书
作文评语集锦
2014/12/25 职场文书
2015年统战工作总结
2015/05/19 职场文书
员工升职自我评价
2019/03/26 职场文书
银行求职信范文
2019/05/13 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL