CoffeeScript例子

2018-08-23 15:04 更新
在dev或任何其他目录中,建立一个目录,比如js。

在这个文档下,我们创建一个文件,命名为test.coffee。

这时打开cmd,打入下面的命令:

> cd C:\dev\js

> coffee -w -c test.coffee

//-w 的全名是 --watch, 是实时编辑的命令

//-c 的全名是 --compile, 是编译的命令

这时,会看到js目录中生成了test.js。在编辑器中打开test.js,可以看到一个匿名函数。这时当我们在test.coffee中打入任何代码,保存后,可以看到test.js被同步更新。

除此之外,我们还可以看到很多其它的命令:

把src目录中的CoffeeScript文件目录树的js在lib目录中编译成平行树

coffee --compile --output lib/ src/
把多个文件串连成一个文件

coffee --join project.js --compile src/*.coffee


使用实例

(一) 函数

如果我们输入下面的代码:

square = (x) -> x * x
在保存后,看生成的文件,我们可以看到文件的最上方有 square 变量的声明,下面我们把一个匿名函数分配给了这个变量:

var square;

square = function(x) {

    return x * x;

};
当我们再输入下面的代码时:

cube = (x) -> square(x) * x
会显示为:

var cube, square;

square = function(x) {

    return x * x;

};

cube = function(x) {

    return square(x) * x;

};

函数也可能有参数的默认值。用一个非空的参数覆盖默认值。

fill = (container, liquid = "coffee") ->

"Filling the #{container} with #{liquid}..."
会变为:

var fill;

fill = function(container, liquid) {

if (liquid == null) liquid = "coffee";

return "Filling the " + container + " with " + liquid + "...";

};


(二) 对象

下面的CoffeeScript:

kids =

brother:

name: "Max"

age: 11

sister:

name: "Ida"

age: 9
会显示为:

kids = {

    brother: {

        name: "Max",

        age: 11

    },

    sister: {

        name: "Ida",

        age: 9

    }

};
在JavaScript中,你不能使用保留字(???reserved words)。比如在没有用字符串引用它们的情况下,把class作为对象的属性。

CoffeeScript注意到用作键的对象和他们的报价为您的保留字,所以你不必担心它(例如,当使用jQuery)。下面这段:

$('.account').attr class: 'active'

log object.class
会显示为:

$('.account').attr({

"class": 'active'

});

log(object["class"]);


(三) 词法作用域和变量安全

这种行为实际上是相同于Ruby的局部变量作用域。

outer是不能重新声明在内部函数,因为它是已经在作用域内;

另一方面,inner在函数内部,不应该能够改变同名的外部变量的值,因此有自身的声明。

所以下面一段:

outer = 1

changeNumbers = ->

inner = -1

outer = 10

inner = changeNumbers()
会变成:

var changeNumbers, inner, outer;

outer = 1;

changeNumbers = function() {

    var inner;

    inner = -1;

    return outer = 10;

};

inner = changeNumbers();




CoffeeScript中setTimeout用法例子


代码如下
run = (a, b) -> # 定义 run 函数
  // code hear

run 1, 2 # 传递参数1、2给 run 函数并执行,省略了括号

run(1, 2) # 传递参数1、2给 run 函数并执行,带括号

当然,你还可以将参数换行写,比如:

代码如下
run 1,
2

run 1
, 2

run(1,
2)

run(1
, 2)

只要有带上逗号,你想怎么写都可以,CoffeeScript 的编译器都会识别出你的用意。
假如要在 CoffeeScript 定义一个 setTimeout 函数,可以这么写:

代码如下
setTimeout  ->
  console.log a, b
, 1000
编译出的结果是:

代码如下
setTimeout(function() {
  return console.log(a, b);
}, 1000);
如果你以为可以在 CoffeeScript 代码里给 setTimeout 的两个参数加一对括号,反而是错误的 – 这也是 CoffeeScript 某些让人摸不着头脑的地方。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号