当前位置: 首页 > 工具软件 > CoffeeScript > 使用案例 >

CoffeeScript 的简介与代码实例

孙自怡
2023-12-01

前段时间公司的一个项目是用CoffeeScript和backbone写的,于是去学了一下CoffeeScript,在此给大家分享一下

CoffeeScript--简介

    我们知道JavaScript是硬绑了C/Java语法,但CoffeeScript却不是,而是改为采用了类似Ruby/Python的语法,所以可以说,采用了这种语法之后,CoffeeScript更加适合函数式+动态语言内核的

    有人说CoffeeScript算是JavaScript的补丁版本,我认为这也是没错的,因为在采用了类似Ruby的语法之后,我们能够更加优美地编写JS代码。何谓优美,我认为就是能够以最少代码量去实现传统JavaScript的操作并且是可使用又易懂的(下面会在实例中给大家展示),不仅如此,CoffeeScript还增加了许多语法糖比如class,extends等等(当然在ES6也增加了,只是CoffeeScript是在ES6之前出现的),这个大家可自行查阅。

    总的来说,CoffeeScript让JavaScript编写起来更加地方便快捷,有一句话是这么形容CoffeeScript的:CoffeeScript是编写起来能够快得飞起的JavaScript。

CoffeeScript--代码实例

    上文提到的CoffeeScript如何优雅编写代码,我们在下面可以示范一下
    比如这是我们常见的一段JavaScript代码(取自CoffeeScript文档)
var cubes, list, math, num, number, opposite, race, square,
 __slice = [].slice;

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() {//Splats
  var runners, winner;
  winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  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;
})();

以上就是在JavaScript中我们会经常用到的代码,那么在CoffeeScript中又是怎样的呢,如下:

# 赋值:
number   = 42
opposite = true

# 条件:
number = -42 if opposite

# 函数:
square = (x) -> x * x

# 数组:
list = [1, 2, 3, 4, 5]

# 对象:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# 存在性:
alert "I knew it!" if elvis?

# 数组 推导(comprehensions):
cubes = (math.cube num for num in list)

有没有一种耳目一新的感觉,CoffeeScript中的变量赋值是不需要用var来定义的,可直接赋值。条件语句可不写小括号和大括号。函数使用'->’代表return(这个和ES6中的箭头函数有点像,但还是区别的,比如ES6的箭头函数是静态上下文,this指针不变,CoffeeScript则不是,保留了JavaScript原本的特点)。对象,数组推导等等和原本的JavaScript来比是不是更加地简洁,而且在编写的时候只要遵守CoffeeScript的规范,你会发现你写JS的速度大大提升。

当然这个实例只是CoffeeScript的一小部分,有兴趣的话可以看看文档http://coffee-script.org/

学习的路还在继续,共勉!


 类似资料: