来点CoffeeScript吗？

简单易懂的介绍

CoffeeScript是什么？

首先，它是一门小巧的编程语言。有一本关于CoffeeScript的指南，写做“The Little Book on CoffeeScript”：

很小，是吗？

而后，它是一门JavaScript的转译语言。这个转译过程看起来像这样：

.coffee的文件将会被编译为.js的文件，而后，就像使用JavaScript那样使用它！

在[coffeescript.org][]上有这样一句话：

The golden rule of CoffeeScript is: "It's just JavaScript".

也就是说，良好的面对CoffeeScript的心态是，“它只是JavaScript”！

更少代码

CoffeeScript可让你少写一点代码。请看下图：

可见，CoffeeScript精简了JavaScript的{}、()、;等符号的使用，并为function、this等关键字定义了简单的符号表示法。这些风格转换都使得CoffeeScript代码量更少。

通常来讲，CoffeeScript能够缩短大约1 / 3的代码长度。

语言特性加强

CoffeeScript较JavaScript在语言特性上进行了改善。在CoffeeScript中，全部的变量声明都再也不使用var关键字：

number = 1.0

CoffeeScript在编译时会自动分析上面这样的语句，若是被赋值的变量未被定义，会在做用域顶部用var定义变量（由.coffee编译获得的.js）。这就避免了意外建立全局变量。若是要在CoffeeScript中声明全局变量，必须用显式的代码定义：

window.paintSize = 10

CoffeeScript为字符串拼接提供了更方便的写法，例如：

drawTitle = "Start from #{number}."

其中number会取做用域中的对应变量。

CoffeeScript使用is表示===，不推荐的==和!=将不能使用。例如：

"draw" if 1 is true

其余的语义化的转化：

CoffeeScript默认将最后一条语句做为返回值（受启发于Ruby），例如：

description = ->
    console.log "Thinking."
    @

将等同于：

description = function() {
    console.log("Thinking.");
    return this;
};

可能有用的一些说明

隐式括号

在CoffeeScript中，容许用空格的形式来表示括号，这称为隐式括号。可是，隐式括号使用不当会带来一些问题，例如：

console.log Math.floor 1.7, Math.ceil 1.7

编译为.js将是：

console.log(Math.floor(1.7, Math.ceil(1.7)));

这可能不是你想要的结果。关于隐式括号须要理解的一点是：直到表达式末尾，隐式括号才会闭合。因此，建议的写法是，单条语句只在第一处位置使用隐式括号，其余位置都显式地把括号写出来。例如：

console.log Math.floor(1.7), Math.ceil(1.7)

将正确编译为：

console.log(Math.floor(1.7), Math.ceil(1.7));

此外，不带参数的函数调用，将不能省略括号。例如你想要init();语句，那么在CoffeeScript中你也须要写做init()。

语句都是表达式

在CoffeeScript中，全部的语句都视为表达式。请看这样的语句：

name = if 1 is true 
    "green tea" 
else 
    "black tea"

这在CoffeeScript中是合法的，将被编译为：

name = 1 === true ? "green tea" : "black tea";

所以能够正常运行。相似的，其余种类的语句也能够这样使用，CoffeeScript都会很好地处理它们。

从CoffeeScript中学习JavaScript

CoffeeScript所作的不少语言特性加强，都来源于JavaScript的最佳实践。看一看编译后的JavaScript，就能够了解到CoffeeScript是如何实现的，这可能对学习JavaScript也有所帮助。例如，CoffeeScript可以使用?在赋值以前检查变量是否存在：

draw?.tool = "pencil"

编译后的代码：

if (typeof draw !== "undefined" && draw !== null) {
    draw.tool = "pencil";
}

这里CoffeeScript展现了JavaScript的“空比较”的最正确的方法。

再例如，CoffeeScript可以使用=>来定义绑定上下文（this）的函数：

rest = (drink) =>
    @status = "Have a #{drink}!"

对应.js是：

rest = (function(_this) {
    return function(drink) {
        return _this.status = "Have a " + drink + "!";
    };
})(this);

能够看到CoffeeScript用了一个特定结构实现了函数绑定，这个写法也一样是有用的参考。

CoffeeScript调试的问题

你可能也想到了，若是须要调试，浏览器的错误提示是针对编译后的JavaScript而不是原CoffeeScript，所以调试分析会比较麻烦。这是事实，但我认为影响不大，有如下几点缘由：

• 语法错误会在CoffeeScript编译时提示，这个提示针对CoffeeScript源码，能够预先看到（若是不修正，是不能获得编译后的JavaScript的）。

• CoffeeScript和JavaScript实现同一逻辑功能的结构差别较小，若是有错误，能够类比推断。

• CoffeeScript支持Source Maps，能够在编译同时生成.map文件，帮助调试。

其余JavaScript的转译语言

能够转译为JavaScript的语言通常称为altJS（Alternative JavaScript）。JavaScript语言自己有较多不方便、有缺陷的地方，且自由度太高，因人和JavaScript库的不一样，代码风格可能会相差很大，难于维护。所以，使用altJS将是有效的解决方法之一。

除本文介绍的CoffeeScript外，主流alsJS还有TypeScript[]。其中Haxe除JavaScript外，还能够编译为其余各种平台的语言，如C++、C#、Java等，算是通用型编程语言。根据实际开展工做的须要，这些altJS也都值得尝试。

结语

总的来讲，CoffeeScript相比JavaScript，写起来代码会少一点，好用的语言特性要多一点，大概就像是在用一种更标准的形式使用JavaScript。

“它只是JavaScript”，保持这样的心态，CoffeeScript也许能够帮到你。

（从新编辑自个人博客，原文地址：http://acgtofe.com/posts/2014/11/have-a-cup-of-coffeescript）