使用CoffeeScript加速JavaScript开发

CoffeeScript是一种很小的语言，可以编译为JavaScript。 它的表达力强而简洁的语法极大地提高了代码的可读性，从而使维护更容易，并且更不可能包含错误。 用其创建者Jeremy Ashkenas的话说 ，CoffeeScript允许您“写您的意思，而不是在历史事故的范围内写”。

编写CoffeeScript的另一个好处是，它编译后的JavaScript将在Internet Explorer的较早版本中运行。 CoffeeScript还可以让您忘记常见的JS陷阱，例如结尾的逗号和自动分号插入。

而且它越来越受欢迎！ 受其在Rails社区中的采用的推动（Rails 3.1+附带内置的CoffeeScript支持）， CoffeeScript最近进入了前100种编程语言的Tiobe索引，在该排名中排名第64位。 这领先于Dart（第66位）和TypeScript（未列出），它们都可以编译为JavaScript。

那么，您准备好尝试使用CoffeeScript吗？ 在本文中，我将演示如何安装它以及它的基本概念。

安装

您可以通过在终端中输入以下命令，使用节点包管理器（npm）在全球范围内安装CoffeeScript：

npm install coffee-script -g

您应该在全局范围内安装它，以便以后可以使用命令coffee在终端中访问它。

如果您需要使用npm的入门知识，请参阅此最近发布的SitePoint文章 。

汇编

CoffeeScript文件具有.coffee文件扩展名。 这些文件是手动编译的，或者您设置了一个监视程序，该监视程序将在每次使用不同内容保存脚本时对脚本进行编译。

要手动编译，请转到脚本所在的目录：

cd E:\apps\something\logic

并运行以下命令：

coffee  -c app.coffee

这将在同一目录中创建一个app.js文件，然后您可以将其包含在项目中。

但是，您很可能希望每次保存文件时都刷新app.js 因此，您可以编译它并通过输入以下内容添加观察者：

coffee -cw app.coffee

请注意，在最新版本的CoffeeScript（1.9.1）中，存在一个导致观察程序无法正常运行的错误 。 以下所有示例均使用CoffeeScript v 1.9.0进行了测试。

CoffeeScript基础

在CoffeeScript中，您不必像在JavaScript中那样声明变量，尽管通常您需要设置初始值。 我们也不必在行尾键入分号（ ; ）。

这意味着您编写：

hasBody = true

代替 ：

var hasBody = true;

您也可以在不使用括号的情况下调用函数，但这仅适用于最外部的函数调用。 因此，您可以执行以下操作：

$(".messages") .show 'slow'

代替：

$(".messages").show('slow');

缩进在CoffeeScript中非常重要。 您应该缩进两个空格或一个制表符：

if hasBody
  alert "Hello Body"
else
  alert "No Body"

布尔和条件

在CoffeeScript中，关键字on ， yes和true都是等效的，并表示布尔值true ，而关键字off ， no和false也是等效的，并表示布尔值false 。

您可以使用is和isnt来检查是否相等（ ===和!== ）。
then ，您可以用来制作单行条件语句。
您可以使用and和or来引用&&和|| 分别。
所有这些都意味着您可以将一个值与其他两个值进行比较，而无需重复自己的操作。

这些概念的示例：

x = 53
y = 40
z = 33
b = true
if b is on and x is 53 and z < y > 11 then alert "ALRIGHT!"

最终声明编译为：

if (b === true && x === 53 && (z < y && y > 11)) {
  alert('ALRIGHT!');
}

迭代，过滤器和范围

CoffeeScript中的for .. in语法用于遍历数组，而for .. of循环用于遍历对象的属性。

arr = [1, 2, 3]

for val in arr
  console.log(val);

spartacus =
  type: "cat"
  legs: 4
  fur: yes

for key, value of spartacus
  console.log "#{key}: #{value}"

注意最后一条语句中的字符串插值。 这是使用#{variableName}语法实现的。

这将输出：

1
2
3
type: cat
legs: 4
fur: true

您可以将其与CoffeeScript的when关键字结合使用以过滤数组中的项目：

spartacus =
  type: "cat"
  legs: 4
  fur: yes

shrimpy =
  type: "fish"
  legs: 0
  fur: no

pets = [spartacus, shrimpy]
myPet = pet for pet in pets when pet.type is "cat"
console.log myPet

输出：

Object {type: "cat", legs: 4, fur: true}

注意，在编写循环之前，您可以指定要在循环中执行的语句。 编写单线循环时，这很有用。

也可以写成：

for pet in pets when pet.type is "cat"
  myPet = pet
  console.log myPet

CoffeeScript的一项非常有用的功能是能够创建数字范围。 这些可以是包含性和排他性的：

someValues = [0..10]
sameValues = [0...11]

当编译为JavaScript时，数组如下所示：

someValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
sameValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

如果您创建一个包含20个以上元素的范围，那么从生成的JavaScript中可以看到，CoffeScript会变得更聪明。 请注意，执行是在匿名函数中进行的，以防止范围泄漏和变量冲突。

var someValues, _i, _results;

someValues = (function() {
  _results = [];
  for (_i = 0; _i <= 21; _i++){ _results.push(_i); }
  return _results;
}).apply(this);

函数和“ this”关键字

要创建函数，请使用->后跟定义。 如果必须添加参数，可以在->之前将其添加到括号（）中

您可以通过将参数设置为相等值来添加默认值。

CoffeeScript的功能示例：

myCoffee = ->
  console.log "C'est un cafe"

makeCoffee = (brand = "Hogwarts") ->
  console.log "Making a coffee #{brand}-style"

myCoffee()
makeCoffee()

记录到控制台：

C'est un cafe
Making a coffee Hogwarts-style

您可以使用@代替this关键字：

$("a").click ->
  $(@).hide 'slow'

编译为：

$("a").click(function() {
  return $(this).hide('slow');
});

ES6样式类和OOP

CoffeeScript还可促进面向对象的编程和继承。 您可以这样定义类：

class Animal
  constructor: (@name, @breed) ->
    @.introduce = ->
      console.log "Hi, I am #{@.name}, one hell of a #{@.breed}"

husky = new Animal("Johnny", "Siberian Husky")
husky.introduce()

控制台中的输出：

Hi, I am Johnny, one hell of a Siberian Husky

在构造函数中，在参数名称之前键入@会导致立即在构造函数中设置参数。 另外，您也可以在构造函数中编写@.name = name 。

您也可以扩展类：

class Dog extends Animal

Dog.prototype.bark = ->
      console.log "#{@name} barks!"

newHusky = new Dog("Lassy", "Labrador Husky")
newHusky.introduce()
newHusky.bark()

此代码输出：

Hi, I am Lassy, one hell of a Labrador Husky
Lassy barks!

如果在参数后添加... （省略号），则函数可以接受不限数量的参数。 在这种情况下，该参数之后（包括该参数）的所有值都以数组的形式添加。

这是您可以实现的方法：

showAwards = (awards...) ->
  console.log ("Awards collected : #{awards.join ', '}")

showAwards "Award 1", "Award 2", "Award 3"

上面的代码输出：

Awards collected : Award 1, Award 2, Award 3

我想在这里最后提到的是，当您在任何函数中时，CoffeeScript都会自动返回上一次执行的语句的结果。 因此，所有函数都具有隐式返回值（就像您在上面处理锚定点击的匿名函数中看到的那样）。

结论

在本文中，我演示了许多使CoffeeScript如此令人愉悦地使用的功能。 在以后的文章中，我将使用CoffeeScript来创建著名的游戏TicTacToe，以此为基础。 在此之前，请告诉我您的想法：您是否已经在使用CoffeeScript？ 这篇文章是否使您好奇尝试一下？ 还是CoffeeScript仅提供了不必要的复杂性？

From: https://www.sitepoint.com/accelerate-javascript-development-coffeescript/