当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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
js实现返回顶部效果
Mar 10 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
浅谈React 服务器端渲染的使用
May 08 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
Javascript typeof 用法
2008/12/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python实现的矩阵类实例
2017/08/22 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python如何省略括号方法详解
2020/03/21 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
公司活动策划方案
2014/01/13 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
mybatis 获取更新记录的id
2022/05/20 Java/Android
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS