CoffeeScript初识

• 前言

    最近参与一个js代码是CoffeeScript写的项目，就去学习了，本文主要介绍下CoffeeScript，对其优势做些分享。

 

• CoffeeScript是什么

    引自维基百科的介绍，"CoffeeScript 是一套 JavaScript 的转译语言。受到 Ruby、Python 与 Haskell 等语言的启发^[1]，CoffeeScript 增强了 JavaScript 的简洁性与可读性。此外，CoffeeScript 也新增了更复杂的功能，例如列表内涵（List comprehension）、模式匹配（Pattern matching）等。一般来说，CoffeeScript 可以在不影响执行效能的情况下，缩短约三分之一的程式码长度^[3] "。

    官方学习网站：http://coffeescript.org/

    可以在这里选择 try coffeescript直接感受下coffeeScript.

 

• CoffeeScript本地环境搭建

   首先, 安装node环境 http://nodejs.org/

   其次，安装基于node的CoffeeScript模块  

npm install coffee-script

至此，coffee环境搭建成功，可以新建hello.coffee文件，编写CoffeeScript代码，在cmd中输入：

coffee -c hello.coffee 

编译生成hello.js文件。

如果对grunt熟悉，基于grunt构建前端代码，可安装grunt的coffee插件 grunt-contrib-coffee对coffee文件进行自动化编译。
https://npmjs.org/package/grunt-contrib-coffee

•   coffeeScript之我的认识

1.    基本的coffeeScrpit语法，大家可以去官网查看详细的说明文档，这里说下典型的几个语法。

 变量：变量申明无需var这样的关键字，例如:

#声明变量并赋值a
a = ”hello coffee”

利用coffee -c命令编译后代码

// Generated by CoffeeScript 1.6.3
(function() {
  var a;

  a = 'hello coffee';

}).call(this);

 函数:无需function这样的关键字，只需写->。

square = (x) -> x * x
cube   = (x) -> square(x) * x

 编译后

var cube, square;

square = function(x) {
  return x * x;
};

cube = function(x) {
  return square(x) * x;
};

数组和对象：对象不需要{ 和 }，只需正确的换行和缩进。

song = ["do", "re", "mi", "fa", "so"]

singers = {Jagger: "Rock", Elvis: "Roll"}

bitlist = [
  1, 0, 1
  0, 0, 1
  1, 1, 0
]

kids =
  brother:
    name: "Max"
    age:  11
  sister:
    name: "Ida"
    age:  9

 编译后

var bitlist, kids, singers, song;

song = ["do", "re", "mi", "fa", "so"];

singers = {
  Jagger: "Rock",
  Elvis: "Roll"
};

bitlist = [1, 0, 1, 0, 0, 1, 1, 1, 0];

kids = {
  brother: {
    name: "Max",
    age: 11
  },
  sister: {
    name: "Ida",
    age: 9
  }
};

关系运算符： &&用户and替换，||用 or等，更接近自然语言。 in在coffee中实现了特殊的功能，可参见：http://coffeescript.org/

in的应用

winner = yes if pick in [47, 92, 13

编译后 

var winner;
if (pick === 47 || pick === 92 || pick === 13) {
  winner = true;
}

class: coffee类似java，ruby等语言引入class，来是先js的对象继承和组合

#声明类
class Animal
  #构造函数
  constructor: (@name) ->
  #对象内方法
  move: (meters) ->
    alert @name + " moved #{meters}m."

#Snake继承Animal
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()

编译后

// Generated by CoffeeScript 1.6.3
(function() {
  var Animal, Horse, Snake, sam, tom, _ref, _ref1,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Animal = (function() {
    function Animal(name) {
      this.name = name;
    }

    Animal.prototype.move = function(meters) {
      return alert(this.name + (" moved " + meters + "m."));
    };

    return Animal;

  })();

  Snake = (function(_super) {
    __extends(Snake, _super);

    function Snake() {
      _ref = Snake.__super__.constructor.apply(this, arguments);
      return _ref;
    }

    Snake.prototype.move = function() {
      alert("Slithering...");
      return Snake.__super__.move.call(this, 5);
    };

    return Snake;

  })(Animal);

  Horse = (function(_super) {
    __extends(Horse, _super);

    function Horse() {
      _ref1 = Horse.__super__.constructor.apply(this, arguments);
      return _ref1;
    }

    Horse.prototype.move = function() {
      alert("Galloping...");
      return Horse.__super__.move.call(this, 45);
    };

    return Horse;

  })(Animal);

  sam = new Snake("Sammy the Python");

  tom = new Horse("Tommy the Palomino");

  sam.move();

  tom.move();

}).call(this);

 以上对coffee一些典型的语法做了说明，很多都是网站的说明，感觉有点累赘了，大家可去官网详细的说明。

    2. coffee的优势和劣势

       前几天公司内网也发起针对该不该用coffeeScript的讨论，其中不乏真知灼见。

       优势：

       1. 更少，更紧凑，和更清晰的代码，从上面的例子和官方的说明可知，CoffeeScript被称为“如诗一样美”，足见其代码更容易规范。

       2. 按照标准的规则编译coffee，最终生成的代码都是js中比较精华的部分，可以避免一些错误，降低bug率。

       3. 在很多常用模式的实现上采用了JavaScript中的最佳实践

       4. CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

       5. CoffeeScript很多语法更接近自然语言，更符合人们思维的顺序

       6. CoffeeScript弥补了js本身语言设计的不足，例如class及其继承，再者，我想coffeeScript中的一些语法优势也会被javascript设计小组发现，从而推动js的发展。

       劣势：

       1. 正因为CoffeeScript的简洁性，代码更少，因此信息量也就少了，这样就会降低代码的可读性。

       2. 现在还没有好的js2Coffee的插件或者平台，基于CoffeeScript的项目需要团队中所有人都比较深入的理解coffee，会增加学习成本。