just half cup of coffee

排版若乱掉，参考https://www.zybuluo.com/bornkiller/note/35825。

前言

coffeescript，某种程度上来说，只是一个单纯的预处理器，而其对javascript编写带来的便利性甚至不如less对于css开发带来的效率提升。先说个人意见，不适合场景如下：

• 大比重Nodejs任务（参见class即可）
• 团队皆具备扎实javascript功底，且引入jshint等工具作规范检查

理由比较简单，nodejs提供了类继承的方法（util.inherit），使用coffee的类反而啰嗦。coffee本质上封装强制性的代码规范，对于团队中新老成员代码功力，规范意识参差不齐的情况，无疑可以减轻沟通的时间成本。但如果功力相当，无疑是道枷锁，限制开发人员的手脚。

参考

• coffeescript文档 http://coffeescript.org/

示例

数组，对象相关操作方法

coffee的iteration，主要用于数组与对象的遍历。示例为foreach, map, filter的coffee使用。相较来说，手写代码量更少。

movies = [
  '500 days with summer'
  'the dark knight'
  'inception'
]
###
遍历，array.foreach
映射，array.map
筛选，array.filter
###

watch movie for movie in movies

movieMap = (resolve movie for movie in movies)

movieFilter = (movie for movie in movies when movie isnt 'inception')

编译后输出

var movie, movieFilter, movieMap, movies, _i, _len;

movies = ['500 days with summer', 'the dark knight', 'inception'];


/*
遍历，array.foreach
映射，array.map
筛选，array.filter
 */

for (_i = 0, _len = movies.length; _i < _len; _i++) {
  movie = movies[_i];
  watch(movie);
}

movieMap = (function() {
  var _j, _len1, _results;
  _results = [];
  for (_j = 0, _len1 = movies.length; _j < _len1; _j++) {
    movie = movies[_j];
    _results.push(resolve(movie));
  }
  return _results;
})();

movieFilter = (function() {
  var _j, _len1, _results;
  _results = [];
  for (_j = 0, _len1 = movies.length; _j < _len1; _j++) {
    movie = movies[_j];
    if (movie !== 'inception') {
      _results.push(movie);
    }
  }
  return _results;
})();

同时引入Destructuring assignment 的赋值方式，感觉类似于占位符的工作机制， 数组利用对应的位置赋值，对象使用对应的key赋值，在类声明内部使用。

movies = [
  '500 days with summer'
  'the dark knight'
  'inception'
]

recommend = 
  'comedy': '500 days with summer'
  'hero': 'the dark knight'
  'fantasy':'inception'
lists = 'youth is not time of life'

[comedy, hero, fantasy] = movies

{comedy, hero, fantasy} =recommend

[first, ..., last] = lists.split(' ')

编译后代码为

var comedy, fantasy, first, hero, last, lists, movies, recommend, _ref;

movies = ['500 days with summer', 'the dark knight', 'inception'];

recommend = {
  'comedy': '500 days with summer',
  'hero': 'the dark knight',
  'fantasy': 'inception'
};

lists = 'youth is not time of life';

comedy = movies[0], hero = movies[1], fantasy = movies[2];

comedy = recommend.comedy, hero = recommend.hero, fantasy = recommend.fantasy;

_ref = lists.split(' '), first = _ref[0], last = _ref[_ref.length - 1];

类声明

选用coffee后，不建议再通过直接构造函数的方式进行类声明，改而使用class处理。声明一个Animal类，再声明Cat继承Animal类。

class Animal
  constructor: (origin) ->
    @origin = origin

class Cat extends Animal
  constructor: (origin) ->
    super origin
    @type = 'cat'
    @barkSound = "mew mew mew"

  bark: () ->
    console.log @barkSound

  ancestor: () ->
    console.log @origin

cat = new Cat 'reptile'
cat.bark()
cat.ancestor()

采用构造函数，如下实现

Animals = (origin) ->
  @origin = origin
  this

Dog = (origin) ->
  Animals.call(this, origin)
  @type = 'dog'
  @barkSound = 'wang wang wang'
  this

Dog.prototype.bark = () ->
  console.log @barkSound

Dog.prototype.ancestor = () ->
  console.log @origin
dog = new Dog 'reptile'
dog.bark()

容易造成混淆，所以既然采用coffee，就用coffee的推荐方案实现，混搭效果，无疑会造成潜在问题。

注意点

• 函数内部遍历时注意return返回值，如下情况编译结果明显差异

for movie in movies
  resolve(movie)

sample = () ->
  for movie in movies
    resolve(movie)

• 括号的使用
  括号之于我有两种用途，一种是无参数函数的调用

sample = () ->
  for movie in movies
    resolve(movie)

sample()

另一种类似于四则运算不确定顺序时使用，在if分支语句中需要注意。如下使用，去掉括号后，会把 _source && judge.isNumber value结果作为judge.isNumber的参数，不是期望的结果。

if (judge.isNumber _source) and (judge.isNumber value)

• webstorm
  webstorm支持coffee file watcher，只需要安装coffee-script之后，稍加配置，即可实时预览编译后结果，不建议通过grunt, gulp开watch来预览。
  

后记

因为个人原因，不喜欢python，所以带着python影子的coffee也不是很喜欢。不过学习成本并不高，大概两天就可以流畅coding，在某些场合之下对团队开发效率提升有帮助，建议掌握。