当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 left,right,mid函数
Jun 10 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue+element表格导出为Excel文件
Sep 26 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python 探针的实现原理
2016/04/23 Python
Python线程创建和终止实例代码
2018/01/20 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
用Python解数独的方法示例
2019/10/24 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
创先争优标语
2014/06/27 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
中标通知书格式
2015/04/17 职场文书
民事诉讼代理词
2015/05/25 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS