Coffeescript 学习笔记

2019-01-14

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.
CoffeeScript 的指导原则是: “她仅仅是 JavaScript”. 代码一一对应地编译到 JS, 不会在编译过程中进行解释. 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然. 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.

1.coffee注释：

注释是用 ‘ # ‘ 来标记的。coffee不需要 ‘ ; ‘ 作为结束标签。有时候你想把整块的注释传给生成的 JavaScript. 使用“###”比如在文件顶部嵌入协议. 块级的注释, 仿照了块级字符串的语法, 将会在生成的代码当中保留.

js:

/*
SkinnyMochaHalfCaffScript Compiler v1.0
Released under the MIT License
*/

coffee:

1 2	# SkinnyMochaHalfCaffScript Compiler v1.0 # Released under the MIT License

2.创建对象：

js：

obj = {
  Name: "Bevis",
  Sex: "male"
}
e = obj.Name

coffee：

obj =
  Name: "Bevis"
  Sex: "male"
e = obj.Name

3.创建数组

js：

1
2
3

arr = [
  3,45,457,3242
]

coffee：

1
2
3

arr =［
  3,45,457,3242
］

4.创建嵌套对象（对象的’{}’是去掉不写）

coffee：

school =
  teacher:
  name:'utopia'
  sex:'male'
  student:
  name:'bevis'
  sex:'male'
a = school.teacher.name

5.coffee可以与jquery结合（jquery的dom查询的方法和jquery原先一样）

coffee：

$ '.demo1'.addClass 'demo2'
$ 'body'.click (e) ->
  $ '.box'
    .fadeIn 'fast'
    .addClass '.active'
  .css 'background', 'white'

6.if else语句

第1种方式：then后参数是为true，else后参数是false

coffee：

1 2	singing = true mood = if singing then 'happy' else 'sad'

第2种方式,就是原始的if else，但是不用’{}’

coffee：

high = true
if high
  ...
else
  ...

也可以把条件里面的运行函数单独写成方法

coffee：

one = ->
  console.log 1
two = ->
  console.log 2
if high
  one()
else
  two()

7.变参(splats)…

coffee：

gold = silver = rest = "unknown"
awardMedals = (first, second, others) ->
  gold = first
  silver = second
  rest = others
contenders = [
  "Michael Phelps"
  "Liu Xiang"
  "Yao Ming"
]
awardMedals contenders...
console.log gold
console.log silver
console.log rest

8.循环

coffee：

foods = ['toast','cheese','wine']
an = (food for food in foods)
console.log an
student = {
  excellentWork:false
  okayStuff:true
  triedHard:false
}
grade = (a) ->  #function = (x) -> x为代入的参数
if a.excellentWork
  "A+"
else if a.okayStuff
  if a.triedHard then "B" else "B-"
else
  "C"
console.log grade(student)

9.操作符

CoffeeScript 会把 == 编译为 ===, 把 != 变异为 !==. 此外, is 编译我 ===, 而 isn’t 编译为 !==
not 可以作为 ! 使用.
逻辑操作方面, and 编译为 &&, 而 or 编译为 ||
在 while, if/else, switch/when 的语句当中, then 可以被用来分隔判断条件跟表达式, 这样就不用强制写换行或者分号了
unless 可以认为是 if 相反的版本.
this.property 简短的写法可以用 @property

js：

1
2
3

if (ignition === true) {
  launch();
}

coffee：

1	launch() if ignition ison

js：

1
2
3

if (band !== SpinalTap) {
  volume = 10;
}

coffee：

1	volume = 10if band isnt SpinalTap

js：

1
2
3

if (answer !== false) {
  letTheWildRumpusBegin();
}

coffee：

1	letTheWildRumpusBegin() unless answer isno

js：

1
2
3

if (car.speed < limit) {
  accelerate();
}

coffee：

1	if car.speed < limit then accelerate()

ps：这个使用then因为前面的是一个表达式，加入前面只是一个正确判断则不要写then，加入为表达式防止表达式混淆，用then

js：

1
2
3

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

coffee：

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

ps：if pick in [47, 92, 13]这里 in 的意思是是否包含里面元素中的一个

extends 操作符可以用来恰当地定义任何一对构造函数的原型链; 用 :: 可以快速访问对象的原型; super() 可以编译为一个父类上同名方法的调用.

js：

1
2
3

String.prototype.dasherize = function() {
  returnthis.replace(/_/g, "-");
};

coffee：

1	String::dasherize = ->this.replace /_/g, "-"

##10.解构赋值

CoffeeScript 实现 ECMAScript Harmony 的提议解构赋值语法, 这样从复杂的数组和对象展开数据会更方便一些. 当你把数组或者对象的字面量赋值到一个变量时, CoffeeScript 把等式两边都解开配对, 把右边的值赋值给左边的变量. 最简单的例子, 可以用来并行赋值:

js：

var theBait, theSwitch, _ref;
theBait = 1000;
theSwitch = 0;
_ref = [theSwitch, theBait], theBait = _ref[0], theSwitch = _ref[1];

coffee：

1
2
3

theBait   = 1000
theSwitch = 0
[theBait, theSwitch] = [theSwitch, theBait]

这样theBait的值就为0，theSwitch的值为1000了，就是一一对应的关系

##11.Switch语句

js：

switch (day) {
  case"Mon":
    go(work);
    break;
  case"Tue":
    go(relax);
    break;
  case"Thu":
    go(iceFishing);
    break;
  case"Fri":
  case"Sat":
    if (day === bingoDay) {
      go(bingo);
      go(dancing);
    }
    break;
  case"Sun":
    go(church);
    break;
  default:
    go(work);
}

CoffeeScript 支持多行字符串. 行与行会用一个空格拼接, 除非结尾用了反斜杠. 其中缩进会被忽略.

coffee：

switch day
when"Mon"then go work
  when"Tue"then go relax
  when"Thu"then go iceFishing
  when"Fri", "Sat"if day is bingoDay
    go bingo
    go dancing
  when"Sun"then go church
  else go work

coffee中switch语句的写法是when … then …，最后一个default用else来替代