CoffeeScript教程：简化JS语法与增强表达力

引言：JavaScript的现代演进

JavaScript无疑是Web开发中最伟大的发明之一，几乎所有的网页动态效果都依赖于它强大的计算能力。随着V8等现代JavaScript引擎（如Google Chrome所使用的）的不断发展，JavaScript的性能也在日益增强。

然而，由于JavaScript诞生较早，部分语法定义在如今看来效率较低。一些更先进的语法形式因历史原因无法直接融入原生JavaScript，这被视为一种遗憾。

许多开发者致力于构建更优秀的JavaScript生态，其中最具前景的尝试包括CoffeeScript和TypeScript。我对CoffeeScript有着天然的亲近感，同时也对TypeScript抱有极大兴趣。两者均编译为JavaScript，旨在增强JavaScript的表达力。本文聚焦于CoffeeScript，TypeScript将在后续文章中讨论。

所谓“编译为JavaScript”，是指CoffeeScript和TypeScript并未创建独立的运行时环境，而是将代码编译为等价的JavaScript，随后在JavaScript解释器中执行。

CoffeeScript的核心特性

CoffeeScript

简洁性

CoffeeScript最显著的特征是其简洁的表达方式。以下代码摘自CoffeeScript中文文档：


# 赋值:
number  = 42
opposite = true
# 条件:
number = -42 if opposite
# 函数:
square = (x) -> x * x
# 数组:
list = [1, 2, 3, 4, 5]
# 对象:
math =
 root:  Math.sqrt
 square: square
 cube:  (x) -> x * square x
# Splats:
race = (winner, runners...) ->
 print winner, runners
# 存在性:
alert "I knew it!" if elvis?
# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)

上述代码编译后等价于以下JavaScript代码：


var cubes, list, math, num, number, opposite, race, square,
 __slice = [].slice;
number = 42;
opposite = true;
if (opposite) {
 number = -42;
}
square = function(x) {
 return x * x;
};
list = [1, 2, 3, 4, 5];
math = {
 root: Math.sqrt,
 square: square,
 cube: function(x) {
  return x * square(x);
 }
};
race = function() {
 var runners, winner;
 winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
 return print(winner, runners);
};
if (typeof elvis !== "undefined" && elvis !== null) {
 alert("I knew it!");
}
cubes = (function() {
 var _i, _len, _results;
 _results = [];
 for (_i = 0, _len = list.length; _i < _len; _i++) {
  num = list[_i];
  _results.push(math.cube(num));
 }
 return _results;
})();
run: cubes

CoffeeScript致力于保持简洁，首先体现在去除仅用于语法控制的符号，包括：

取消分号

取消var声明

取消大括号包裹内部代码，改用缩进表示

函数调用在无需消除歧义时可省略括号

var声明涉及复杂且颇具争议的JavaScript变量作用域机制，此处暂不展开。CoffeeScript通过完全移除var声明简化了这一问题。在CoffeeScript中，变量无需预先声明即可直接使用，且这种用法通常没有安全风险。

在CoffeeScript中，缩进不仅用于美化代码，更代表代码的逻辑层次。简言之，不使用大括号包裹内部代码，而是通过缩进来表示层级，不同缩进对应不同的代码层次，形式与内容保持一致。

缩进示例：


#if缩进
if true
 'true'
else
 'false'
#while缩进
while true
 'true'
#函数缩进
(n) ->
 n * n
#对象字面量缩进
kids =
 brother:
  name: "Max"
  age: 11
 sister:
  name: "Ida"
  age: 9

在不引起歧义的情况下，CoffeeScript允许省略函数调用的括号。例如，console.log(object)可简化为console.log object。若出现歧义（如无参数时，console.log可能被误解为获取函数属性log而非调用它），则需保留括号。

CoffeeScript对函数表达式进行了极致精简。单行函数定义如下：


square = (x) -> x * x

多行函数同样通过缩进组织。最简洁的空函数表示为：->。

这种简洁的函数表达使得传递回调函数变得非常便捷。例如，数组的map操作可能如下所示：


list = [1, 2, 3]
list.map (e) -> e+1

而等效的JavaScript代码则显得较为繁琐：


list = [1, 2, 3];
list.map(function(e) { return e + 1; });

增强的表达：语法糖

增强的表达

CoffeeScript提供了JavaScript所不具备的强大语法，即所谓的“语法糖”。这种增强性十分丰富，以下列举两个代表性例子：

字符串插值法

列表解析

字符串插值法是对现有字符串能力的扩充与简化；而列表解析则涉及编程观念的转变。前者是改良，后者则是变革。

字符串插值法

在CoffeeScript字符串中，可使用#{…}嵌入表达式。例如：

"#{ 22 / 7 } is a decent approximation of π"

等价于：

"" + (22 / 7) + " is a decent approximation of π";

插值在此起到占位符作用，使动态内容字符串的构建更加容易。这种表达方式易于被大众接受。

列表解析

列表解析是CoffeeScript的重要组成部分，它改变了循环的思维模式。CoffeeScript不提供类似JavaScript的for循环结构，而是将其转化为列表解析。一个常规的JavaScript for循环如下：


food_list = ['toast', 'cheese', 'wine'];
for (i = 0, len = food_list.length; i < len; i++) {
 food = food_list[i];
 eat(food);
}

使用CoffeeScript实现则为：

food_list = ['toast', 'cheese', 'wine'] eat food for food in food_list #补充说明：for循环单条语句的写法

上述示例虽展示了简洁性，但尚未完全体现列表解析的强大。在深入之前，有必要补充CoffeeScript的核心理念：一切皆表达式。

在CoffeeScript中，所有语句均为表达式语句，并返回值。函数调用默认返回最后一条语句的值。if条件结构也返回值，即执行的最后一条语句的值。循环结构略有不同，它将每次循环的结果保存在数组中，作为整个循环结构的值。例如，以下代码的list结果为[5, 4, 3, 2, 1]。


num = 6
list = while num -= 1
 num

回到列表解析主题。与while类似，for结构也是一种循环表达，其结果同样是一个数组。回到先前的例子，以下小代码的list结果为['t', 'c', 'w']。


food_list = ['toast', 'cheese', 'wine']
list = (food[0] for food in food_list)

我们已经看到了for循环的each形式


eat food for food in food_list

以及它的map形式


(food[0] for food in food_list)

下面给出它的filter形式


(food for food in food_list when food is 'wine')

列表解析的特色在于它改变了组织循环和解析数组的方式。这是一种声明式编程方法，告诉程序你想要什么，而不关心构建过程。

类的支持

类是CoffeeScript对JavaScript的重要补充。JavaScript的原型功能强大但写法别扭，正确设置原型链以实现继承关系极具挑战。CoffeeScript从语法层面直接支持类定义，自然且隐藏了细节。


class Animal
 constructor: (@name) ->
 move: (meters) ->
  alert @name + " moved #{meters}m."
class Snake extends Animal
 move: ->
  alert "Slithering..."
  super 5
class Horse extends Animal
 move: ->
  alert "Galloping..."
  super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()

从实现角度看，CoffeeScript的类与JavaScript的构造函数和原型链机制并无二致。因此，理解原型机制是理解CoffeeScript类的基础。

消除JavaScript的糟粕

关于JavaScript的糟粕

CoffeeScript的另一个目标是从语法层面直接消除JavaScript中备受诟病的部分。前文已提及分号和var声明。分号机制暂且不表，总之CoffeeScript无需编写分号。

在JavaScript中，最为人诟病的糟粕有两处，因其使用频繁且易出错：

全局变量

相等比较

全局变量

JavaScript的作用域规则复杂，涉及var声明机制和变量提升。在JavaScript中，构造全局变量有三种方式：

在全局环境中使用var声明


var name = 'name';

在函数内省略var定义


function foo() {
  name = 'name';
}

绑定到window属性

window.name = 'name';

其中第1种和第2种方式是最常见的错误用法。首先，不推荐直接在全局环境中编码，而应使用匿名函数包裹程序，将作用域限制在该匿名函数内。第二种用法完全是忘记var声明。在实际JavaScript编码中，忘记var声明是常有的事（如同经常忘记在行末加分号）。

而在CoffeeScript中，完全无需担心此问题。首先，编译后的JavaScript代码不会暴露在全局环境中，所有代码自动包裹在匿名函数(function(){ ... })()内。其次，所有变量自动加上var声明。这使得意外污染全局的情况极难发生，除非显式赋值给window。

相等比较

我们知道JavaScript有两种比较运算符：==和===。由于==在使用过程中容易出错，平时更倾向于多打一个字符使用===。CoffeeScript仅有一种比较运算符==，但它会编译为JavaScript的===，从而很好地避开了这一陷阱。

是否该使用CoffeeScript

CoffeeScript简化和增强了JavaScript的表达力，尽可能从语法层面避免JavaScript的一些陷阱。使用它编写代码，能带来更清晰舒适的感觉，且不易犯错。CoffeeScript的初衷就是提供更好的JavaScript。

然而，CoffeeScript与JavaScript并不兼容。它既不是JavaScript的子集，也不是超集，而是一种思路截然不同的语言。使用CoffeeScript编程必然需要转换观念，尽管这种观念更优越自然，但却是部分固步自封者望而却步的主要原因。

CoffeeScript并非适合所有人。有些人完全无法接受用缩进组织代码层次，也无法接受箭头函数表达法。对他们而言，去掉function关键字和大括号的组织方式怎么看都不顺眼。

列表解析虽然强大，但也显得过于简洁。对于习惯编写冗杂JavaScript程序的人来说，并不习惯这种表达方式。

总之，不可强求他人学习使用CoffeeScript。JavaScript已足够强大，只要足够小心，完全可以使用JavaScript出色地完成工作。对于那些尝试CoffeeScript的人，我们应持鼓励态度，他们是求新求变的勇士。CoffeeScript确实值得一试，且它非常小巧，完全掌握并非难事。

关于在团队中推行CoffeeScript，我持保守看法。如果团队从开始就使用CoffeeScript还好。若要从CoffeeScript转向JavaScript，则需谨慎行事。一种可行的方式是在小项目中先尝试使用CoffeeScript，观察效果。

对于个人而言，则无此限制。如果真的喜欢，就去尝试吧。你可以使用CoffeeScript编写脚本、构建网站或制作小工具。

以上内容是小编给大家介绍的使用CoffeeScript优美方式编写JavaScript代码，希望大家喜欢。

使用CoffeeScript优雅地编写JavaScript代码