当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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
Javascript玩转继承(三)
May 08 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 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
模拟xcopy的函数
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
php 变量定义方法
2009/06/14 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php中strtotime函数性能分析
2016/11/20 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
php5与php7的区别点总结
2019/10/11 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
低碳环保倡议书
2014/04/14 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
单位单身证明样本
2014/10/11 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
岁月神偷观后感
2015/06/11 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
用Python实现屏幕截图详解
2022/01/22 Python