CoffeeScript例子

2018-08-23 15:04 更新
在dev或任何其他目錄中,建立一個(gè)目錄,比如js。

在這個(gè)文檔下,我們創(chuàng)建一個(gè)文件,命名為test.coffee。

這時(shí)打開cmd,打入下面的命令:

> cd C:\dev\js

> coffee -w -c test.coffee

//-w 的全名是 --watch, 是實(shí)時(shí)編輯的命令

//-c 的全名是 --compile, 是編譯的命令

這時(shí),會(huì)看到j(luò)s目錄中生成了test.js。在編輯器中打開test.js,可以看到一個(gè)匿名函數(shù)。這時(shí)當(dāng)我們?cè)趖est.coffee中打入任何代碼,保存后,可以看到test.js被同步更新。

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

把src目錄中的CoffeeScript文件目錄樹的js在lib目錄中編譯成平行樹

coffee --compile --output lib/ src/
把多個(gè)文件串連成一個(gè)文件

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


使用實(shí)例

(一) 函數(shù)

如果我們輸入下面的代碼:

square = (x) -> x * x
在保存后,看生成的文件,我們可以看到文件的最上方有 square 變量的聲明,下面我們把一個(gè)匿名函數(shù)分配給了這個(gè)變量:

var square;

square = function(x) {

    return x * x;

};
當(dāng)我們?cè)佥斎胂旅娴拇a時(shí):

cube = (x) -> square(x) * x
會(huì)顯示為:

var cube, square;

square = function(x) {

    return x * x;

};

cube = function(x) {

    return square(x) * x;

};

函數(shù)也可能有參數(shù)的默認(rèn)值。用一個(gè)非空的參數(shù)覆蓋默認(rèn)值。

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

"Filling the #{container} with #{liquid}..."
會(huì)變?yōu)椋?br />
var fill;

fill = function(container, liquid) {

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

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

};


(二) 對(duì)象

下面的CoffeeScript:

kids =

brother:

name: "Max"

age: 11

sister:

name: "Ida"

age: 9
會(huì)顯示為:

kids = {

    brother: {

        name: "Max",

        age: 11

    },

    sister: {

        name: "Ida",

        age: 9

    }

};
在JavaScript中,你不能使用保留字(???reserved words)。比如在沒有用字符串引用它們的情況下,把class作為對(duì)象的屬性。

CoffeeScript注意到用作鍵的對(duì)象和他們的報(bào)價(jià)為您的保留字,所以你不必?fù)?dān)心它(例如,當(dāng)使用jQuery)。下面這段:

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

log object.class
會(huì)顯示為:

$('.account').attr({

"class": 'active'

});

log(object["class"]);


(三) 詞法作用域和變量安全

這種行為實(shí)際上是相同于Ruby的局部變量作用域。

outer是不能重新聲明在內(nèi)部函數(shù),因?yàn)樗且呀?jīng)在作用域內(nèi);

另一方面,inner在函數(shù)內(nèi)部,不應(yīng)該能夠改變同名的外部變量的值,因此有自身的聲明。

所以下面一段:

outer = 1

changeNumbers = ->

inner = -1

outer = 10

inner = changeNumbers()
會(huì)變成:

var changeNumbers, inner, outer;

outer = 1;

changeNumbers = function() {

    var inner;

    inner = -1;

    return outer = 10;

};

inner = changeNumbers();




CoffeeScript中setTimeout用法例子


代碼如下
run = (a, b) -> # 定義 run 函數(shù)
  // code hear

run 1, 2 # 傳遞參數(shù)1、2給 run 函數(shù)并執(zhí)行,省略了括號(hào)

run(1, 2) # 傳遞參數(shù)1、2給 run 函數(shù)并執(zhí)行,帶括號(hào)

當(dāng)然,你還可以將參數(shù)換行寫,比如:

代碼如下
run 1,
2

run 1
, 2

run(1,
2)

run(1
, 2)

只要有帶上逗號(hào),你想怎么寫都可以,CoffeeScript 的編譯器都會(huì)識(shí)別出你的用意。
假如要在 CoffeeScript 定義一個(gè) setTimeout 函數(shù),可以這么寫:

代碼如下
setTimeout  ->
  console.log a, b
, 1000
編譯出的結(jié)果是:

代碼如下
setTimeout(function() {
  return console.log(a, b);
}, 1000);
如果你以為可以在 CoffeeScript 代碼里給 setTimeout 的兩個(gè)參數(shù)加一對(duì)括號(hào),反而是錯(cuò)誤的 – 這也是 CoffeeScript 某些讓人摸不著頭腦的地方。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)