当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 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
sails框架的学习指南
Dec 22 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Vue实现本地购物车功能
Dec 05 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
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
详解Python中的日志模块logging
2015/06/19 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
爱心活动计划书
2014/04/26 职场文书
大学生就业求职信
2014/06/12 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
申报优秀教师材料
2014/12/16 职场文书
小学教师岗位职责
2015/04/02 职场文书
二年级数学教学反思
2016/02/16 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
创业计划书之物流运送
2019/09/17 职场文书
导游词之河北白洋淀
2020/01/15 职场文书