CoffeeScript:10 个提高生产力的技巧与实例

红薯 发布于 2012/06/13 09:08
阅读 4K+
收藏 37

有些人可能不知道 CoffeeScript,它最终将编译成 JavaScript,今天我们要给出 10 个提高 CoffeeScript 生产力的技巧和实例。

 

Tip 1: 可变参数个数
CoffeeScript 允许使用可变参数个数,下面是一个简单例子:

mySplat = (args...) ->
    console.log "#{args.join()}"
 
mySplat(1,2,3,4,5)

输出结果:

1,2,3,4,5


Tip 2: 使用布尔型变量

你可以使用 onyes 相当于 true, 使用 offno 相当于 false

lightSwitch = false
 
if lightSwitch is off
    console.log 'Turn on the lights!'
else
    console.log 'Turn off the lights!'

输出结果:

Turn on the lights!


Tip 3: 存在操作符

这是用来检测一个变量是否存在的方法:

myValue1 = 'Hello World'
 
if myValue1? then console.log myValue1
 
# This next variable doesn't exist
if myValue2? then console.log myValue2

输出结果:

Hello World

你也可以这样做:

class MyClass
    myFunction1: (val) ->
        console.log "You passed #{val} to myFunction1"
 
myClass = new MyClass()
myClass?.myFunction1(123)
 
# This next function doesn't exist
myClass.myFunction2?(123)

一旦 myFunction2 不存在于 MyClass 类中,你就可以看到如下输出:

You passed 123 to myFunction1


Tip 4: 使用 ‘in’ 来测试数组中是否包含某个值

通过关键字 in 你可以快速的检查数组中是否包含某个值

foods = ['apple', 'orange', 'potatoe', 'strawberries']
 
if 'potatoe' in foods then console.log 'Found potatoe'
if 'carrot' in foods then console.log 'Found carrot'

输出结果:

Found potatoe


Tip 5: 对象迭代

我们创建一个简单的对象,并展示迭代是多么的简单:

dragon =
    level: 1
    alignment: 'neutral'
    age: 'Youngling'
    attack: 'Fire'
    damage: '1d4'
 
for key, val of dragon
    console.log "#{key}: #{val}"

输出结果:

level: 1
alignment: neutral
age: Youngling
attack: Fire
damage: 1d4


Tip 6: 类

类是非常简单的,下面创建一个简单的类并演示使用构造器和继承:

class Spaceship
 
    constructor: (@speed  = 1, @spaceShipType = 'spaceship') ->
        console.log "New #{@spaceShipType} created with a speed of #{@speed}"
 
    move: () ->
        console.log "The #{@spaceShipType} is moving now at a speed of #{@speed}"
 
class FlyingSaucer extends Spaceship
 
    constructor: ->
        super 5, 'Flying Saucer'
 
    useDeathRay: ->
        console.log "The flying saucer is using a death ray!"
 
spcshp = new Spaceship()
spcshp.move()
 
flySaucr = new FlyingSaucer()
flySaucr.move()
flySaucr.useDeathRay()


Tip 7: ‘this’ 的快捷用法

你可以使用 @ 符号来代替 this

class MyClass
 
    constructor: (@greeting) ->
        console.log "You set the greeting as: #{@greeting}"
 
    greet: ->
        console.log "You said: #{@greeting}"
 
myClass = new MyClass('Bonjour')
myClass.greet()

你可看到 @greeting 是一个有效的类函数。

输出结果:

You set the greeting as: Bonjour
You said: Bonjour


Tip 8: 默认值

实际上,上面的代码中我在构造器中设置了一个默认的 greeting 值,这里做个小改动:

class MyClass
 
    constructor: (@greeting = 'Hola') ->
        console.log "You set the greeting as: #{@greeting}"
 
    greet: ->
        console.log "You said: #{@greeting}"
 
myClass = new MyClass()
myClass.greet()

运行结果:

You set the greeting as: Hola
You said: Hola


Tip 9: 字符串块

如果你想对字符串进行引号和撇的快速转义,可使用如下方法:

markup = """
    <form action="/" method="post">
        <input type="submit" />
    </form>
"""
 
console.log markup

输出:

<form action="/" method="post">
    <input type="submit" />
</form>


Tip 10: 字符串插值

我在我的很多例子都用到了这个方法,在双引号中的所有内容都将被解析,你可以在其中嵌入某个变量:

myValue = 'Hello World'
 
console.log "You said: #{myValue}"

或者是:

val1 = 5;
val2 = 7;
 
console.log "Your answer for 5 * 7 is: #{val1 * val2}"

输出结果:

Your answer for 5 * 7 is: 35

你也可以这样:

console.log "Your answer for 5 * 7 is: #{5 * 7}"

英文原文OSCHINA原创翻译

加载中
0
兰哑蚊
兰哑蚊
coffeescript 是个好东西啊..  有机会尝试下
0
VincentTone
VincentTone
风格很像ruby,用起来挺省心
0
arden
arden
挺不错~
0
arden
arden
异步问题怎么解决?
红薯
红薯
异步试试老赵的 Jscex 吧 :)
返回顶部
顶部