文档章节

[翻译]当jQuery遭遇CoffeeScript的时候——妙,不可言

quanpower
 quanpower
发布于 2013/05/27 02:43
字数 882
阅读 1440
收藏 47

原作:How CoffeeScript makes jQuery more fun than ever—— Stefan Buhrmester

翻译:filod

转载声明:请注明原作者、翻译者以及译文链接

译者前言:虽然对ruby不太了解,但是看到CoffeeScript诗一般的代码确实被怔住了,和jQuery之前给我的感觉是如此的相似——都是一个字,美,当jQuery遭遇到CoffeeScript时,会蹦出什么样的火花呢?

当我多年前初次接触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的。

本文转载自:http://www.cnblogs.com/filod/archive/2011/09/17/2179578.html

共有 人打赏支持
quanpower
粉丝 65
博文 166
码字总数 104911
作品 0
嘉定
CTO(技术副总裁)
私信 提问
加载中

评论(11)

xiaobao36
xiaobao36
不错的东东,
回去干活
回去干活
高手眼里,用这些都简单,菜鸟用这些玩意,就开始苦B了
hello_152
hello_152
让它们离我们越来...越远,啦啦啦啦啦~
叶知泉
叶知泉
如果是我,我更愿意手写代码,但是我却不愿意学习这样一个翻译器,我愿意多按几下键盘,不想浪费学习曲线。
Genus
Genus
难看。
朱__朱
朱__朱
对于已经熟练js的人,coffee非常简单,一个下午加晚上就可以学完,看别人程序不是问题。自己用一个礼拜就能用coffee熟练写程序了。
老乔928
过于简单,程序员不一定喜欢
a
alex
如果哪一天你的代码给了某些人维护,估计他们会骂娘的;
这东西要会,就要一个小组的人都会,否则。。。。。
开源无憾
开源无憾
追求代码的简洁会让初学者走上一条不归路。
傅小黑
傅小黑
coffeescript相当漂亮,太过灵活
CoffeeScript 2.0.0-beta5 发布,编译成 JS 的小巧语言

CoffeeScript 2.0.0-beta5 已发布了,更新如下: 升级文档至 Bootstrap 4 beta,包括重构样式;还升级了文档 jQuery 和 CodeMirror 针对移动端,提供更好的文档样式,包括 Try CoffeeScript...

局长
2017/09/04
495
0
16 个新鲜的 CSS3 在线教程

用CSS3制作令人印象深刻的产品展示 使用jQuery和CSS3制作闪亮的旋钮控制 使用 CoffeeScript 创建一个类 iOS 的界面 使用 CSS3 制作报纸阅读 制作一个 CSS3 动画菜单 使用 jQuery 和 CSS3 制作...

红薯
2012/04/29
6.1K
4
Backbone.js 样例站点与入门指南

本文的来源 前段时间,我的工作中开始接触到 Backbone.js 这个开源框架,于是我就在网上搜索了下相关资料开始学习,结果找来找去,发现这些资料都不够全面,都是只涉及到关键点的一部分,只有...

苗哥
2012/08/06
0
3
JavaScript 观察者 (发布/订阅) 模式

定义 观察者模式定义了对象之间一对对多的依赖关系,当一个对象改变了状态,它的所有依赖会被通知,然后自动更新。 和其他模式相比,这种模式又增加了一个原则: 在相互作用的对象之间进行松散...

缪宇
06/29
0
0
编码神器 Sublime Text 包管理工具及扩展大全

Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查...

oschina
2013/10/21
17.5K
58

没有更多内容

加载失败,请刷新页面

加载更多

详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里...

前端小攻略
8分钟前
1
0
一个centos初始化脚本

概述 就是自己无聊写的一个脚本,欢迎使用,star,fork顺便关注我一波 https://github.com/bboysoulcn/centos 使用方法 这个是给最小化安装的centos使用的,在centos 7.5上测试过,当然其他的...

bboysoulcn
13分钟前
0
0
mybatis 自动维护 createdAt, updatedAt

SpringBoot Mybatis Plus公共字段自动填充功能

youngjdong
16分钟前
1
0
Docker之nginx容器中部署静态文件

注: Docker版本如下: Client: Version:17.12.0-ce API version:1.35 Go version:go1.9.2 Git commit:c97c6d6 Built:Wed Dec 27 20:11:19 2017 OS/Arch:linux/amd64Ser......

克虏伯
17分钟前
0
0
搭建git服务器————gitlab

github毕竟是公开的,而私有仓库又得花钱买。所以我们可以想办法搭建一个私有的,只自己公司使用的。Gitlab是个不错的选择。在介绍它之前,先讲述一下命令行的git服务器 找一台服务器,首先要...

chencheng-linux
23分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部