CoffeeScript 简介

作者: 乐百川 | 来源:发表于2017-04-15 21:02 被阅读85次

    简介

    JavaScript也是一门经历了很多年的语言了,自从浏览器兴起,JavaScript就一直在被使用。但是,JavaScript有一些特性没有实现,为了让JavaScript更好用,CoffeeScript这个东西被发明出来。CoffeeScript可以看成是JavaScript的补丁版本,语法和JavaScript非常相似,但是增加了许多语法糖,CoffeeScript最后编译的结果也是JavaScript。另外CoffeeScript和JavaScript的互操作性也很好,它们两者编写的库之间可以无缝互相调用。

    JavaScript的新标准ESMAScript 2015 添加了类、await/asyc等支持。相应地,CoffeeScript 2 也添加这些特性的支持。不过需要注意,CoffeeScript 2和CoffeeScript 1 并不兼容,而且现在浏览器对ESMAScript 2015的支持还有限。所以在使用CoffeeScript 2的时候需要注意。

    安装

    安装CoffeeScript很简单,首先先安装NodeJS。然后用npm安装。

    npm install --global coffee-script
    

    安装完成之后,我们就可以使用coffee命令行了。直接运行该命令会进入交互操作终端,使用-c参数可以编译Coffee文件。详细命令行参数参考Usage

    概览

    以下就是CoffeeScript官网的示例代码,列出了的一些语法糖。我们可以看到CoffeeScript支持很多现代的语法糖,例如if表达式、lambda表达式、elvis运算符、数组理解等等。

    我们还可以从中看到CoffeeScript的一些特点:不需要手动编写var,编译器会自动判断作用范围;不需要编写分号,代码作用域使用所进来判断;而且方法调用的括号也可以省略。还有其他一些特性,直接看官方文档吧。

    # Assignment:
    number   = 42
    opposite = true
    
    # Conditions:
    number = -42 if opposite
    
    # Functions:
    square = (x) -> x * x
    
    # Arrays:
    list = [1, 2, 3, 4, 5]
    
    # Objects:
    math =
      root:   Math.sqrt
      square: square
      cube:   (x) -> x * square x
    
    # Splats:
    race = (winner, runners...) ->
      print winner, runners
    
    # Existence:
    alert "I knew it!" if elvis?
    
    # Array comprehensions:
    cubes = (math.cube num for num in list)
    

    上面的代码会被编译为等价的JavaScript。可以看到,CoffeeScript确实比普通的JavaScript的表达能力更强,怪不得Atom编辑器主要就是使用CoffeeScript写的,如果完全使用JavaScript编写,代码量肯定会大不少。

    var cubes, list, math, num, number, opposite, race, square;
    
    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(winner, ...runners) {
      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;
    })();
    

    进一步学习

    如果希望进一步学习CoffeeScript的话,直接看官方文档就好了。这个官方文档做得很不错,有很多交互式例子,编辑左边的Coffee代码,右边就会编译出JavaScript代码,还能在线运行,非常方便。

    我倒是找到了一个CoffeeScript的中文网站,不过更新不够及时,网络访问好像也不太通畅。所以大家还是看原版吧。

    相关文章

      网友评论

      • 最后一只天蝎:都被淘汰了。。 作者都不维护了😁😅😅😅
        乐百川:哎呦,不是吧,我看Atom上用的还不少,心说这玩意大概也挺流行的吧

      本文标题:CoffeeScript 简介

      本文链接:https://www.haomeiwen.com/subject/ypcoattx.html