coffeescript入门学习

1,coffeescript是什么?

   coffeescript是一门小巧的语言,能够编译为javascript,语法大多借鉴ruby和python。

   我们可以直接在http://coffeescript.org/  try coffeescript

2,CoffeeScript与原生的JavaScript比较
    首先,能够少写代码――CoffeeScript非常简洁,充分地利用空格。以我的经验来看,比起
纯JavaScript的话,它能减少三分之一到一半的代码量。还有,CoffeeScript开有一些优雅的
特性,比方说列表解析、原型符号别名和类等等,能够有效的减少需要你的输入。
   CoffeeScript编译后的JavaScript运行起来相比与之等价的纯JavaScript代码
要慢。但实际情况证明并不是问题。CoffeeScript看起来与徒手写的JavaScript代码运行速度
相当,甚至更快。

   CoffeeScript的劣势是什么?是的,在你和JavaScript之间介多了编译这一步。CoffeeScript
也在尝试尽力通过产生优雅的可读性强的JavaScript,以及在服务器端集成自动编译来弥补
这个问题。

   CoffeeScript的用途并不仅限于浏览器,把它用在JavaScript实现的服务端也非常不错,比方
说在 Node.js上。还有,CoffeeScript越来越广泛,有更多的集成,比方说它已经是Rails3.1
的标配。

3,coffeescript的安装

   在生产环境中,由于会减慢客户端的运行,所以没人愿意在运行时解释执行CoffeeScript。作为替代,CoffeeScript提供了一个Node.js版的编译器来对CoffeeScript文件进行预处理(即编译coffeescript为javascript).

要安装该编译器,首先必须保证你已经有了稳定可用的Node.js和npm(Node程序包管理工
具)。然后你就可以使用npm来安装CoffeeScirpt了:

sudo nmp install -g coffee-script

coffee --compile my-script.coffee #编译并并保存到my-script.coffee这个文件中(默认扩展名.coffee)

如果没有指定--output参数,CoffeeScript会直接将编译后的代码写入到一个同名的
JavaScript文件中,本例中就是my-script.js。已存在该文件的话会被复写掉,因此要当
心你的JavaScript文件被覆盖。
查看coffee的相关命令可以使用coffee --help(ps:学习linux要学会去看命令的说明)

function和var这类JavaScript关键字并不允许在CoffeeScript中使用。如果你正在编写CoffeeScript文件,里面必须完全是纯CoffeeScript代码,你不能把这两种语言揉到一起.

CoffeeScript去掉了分号,它会在编译时为你自动添加。分号在JavaScript社区中引起了大量的争论,以及背后的一些解释器怪异的行为。总之,CoffeeScript为了帮你解决这个问题,简单地从语法上的移除了分号,然后在幕后根据需要添加。

4,语法学习

注释:格式与ruby一致,以一个哈希字符开头 #A comment

         也支持多行格式,使用三个哈希字符包裹即可

###
A multiline comment, perhaps a LICENSE.
###

CoffeeScript修复了JavaScript中一个最让人头疼的问题――全局变量。在JavaScript中,一
不小心的话,就很容易在定义变量时遗漏var关键字导致产生全局变量。CoffeeScript通过
简单的剔除全局变量来解决这个问题。这样大量减少了程序员会在javascript中出现的问题

特殊要求,需要设置全局变量:

exports=this
exports.myvar="caonimei"

在顶级作用域中,this就相当于全局对象,你可以创建一个局部变量exports让阅读你代码的人能够分清楚哪个是脚本创建的全局变量。而且,这还能为支持CommonJS模块铺平了道路

函数:CoffeeScript移除了冗长的function语句,以瘦箭头->替之。函数可以是一行也可以是多行。函数的最后一个表达式会作为隐式的返回值。换句话说,你不再需要使用return关键字,除非你想早一点从函数中返回。

func=->"bar" #编译后,->编译成function 并且bar被自动返回了

func=->

   #多行的函数

   "bar"

函数参数

times=(a,b)->a*b,还可以带默认值:times=(a=1,b=2)->a*b

此外,我们还可以使用参数槽(splats),接受多个参数,使用...表示

sum = (nums...) ->
result = 0
nums.forEach (n) -> result += n
result
在上面的例子中,nums是一个包含传递给函数全部参数的数组。它不是一个arugments对
象,而是一个真实的数组对象,这样的话在你想操作它的时候就不需要先使用
Array.prototype.splice或者jQuery.makeArray()了。
trigger = (events...) ->
events.splice(1, 0, this)
this.constructor.trigger.apply(events)

函数调用:像ruby一样,如果一个函数被至少一个函数跟着的话,coffee会自动调用这个函数

a='hello'

alert a #等价于alert(a)

alert inspect a #等价于alert(inspect(a))

尽管括号不是必须的,但是建议加上括号,这样可以分清哪些是函数哪些是参数

对象字面量与数组定义:可以使用花括号,或者使用换行或者tab来替换花括号

object1={one:1,two:2}

object2=    one:1,two:2 #没有花括号

object3= #使用换行代替逗号

   one:1

   two:2

同样,数组可以使用空格来替代分割作用的逗号,但是方括号还是必须的

array1=[1,2,3]

array = [

   1

   2    

   3

]

流程控制

if true == true

   "hello world"

if true != true then 'close'

(1>0)?"ok":false #等价于 if 1>0 then "ok" else false

coffeescript还支持一项ruby特性,即运行在if语句前面使用前缀表达式

alert "hello" if heat < 5

有些时候我们还可以使用not 来代替感叹号(!)来做取反操作,让代码具有更强的可读性、

if not true then "close"

字符串插值法

favourite_color = "Blue. No, yel..."
question = "Bridgekeeper: What... is your favourite color?
Galahad: #{favourite_color}
Bridgekeeper: Wrong!
"
就上例所示,多行字符串是允许的,不需要在没一行前添加+。

coffeescript的循环和列表解析

for name in ['gou','zhu','ma']
    alert "#{name}"

如果你需要知道当前迭代索引的话,只需要再多传一个参数:
for name, i in ["Roger the pickpocket", "Roderick the robber"]
alert "#{i} - Release #{name}"

就像python一样,我们可以过滤它

names=['zhu','ma','yang']

for name in names when names[0] is 'm'

可以使用推导式来迭代对象的全部属性,不过要使用of代替in关键字。
names = sam: seaborn, donna: moss
alert("#{first} #{last}") for first, last of names

range=[1..5] #等价于var range=[1,2,3,4,5];

在JavaScript中检测数组中是否存在某个值是一件麻烦事,特别是indexOf()并不是所有的
浏览器都支持(IE,我说的就是你!)。CoffeeScript使用in操作符来解决这个问题,例如:
words = ["rattled", "roudy", "rebbles", "ranks"]
alert "Stop wagging me" if "ranks" in words

coffee类

创建类 class Animal @表示this

构造函数实例化类animal=new Animal

定义构造函数:

class Animal
    constructor: (name) ->
        @name=name
#我们可以使用简写模式
class Animal
    constructor:(@name) ->
如你所愿,每个实例化传入的参数都被代理给了构造函数。
animal = new Animal("Parrot")
alert "Animal is a #{animal.name}"

静态变量:this指的就是类,所以可以通过在this上设置类属性

class Animal

   this.find=(name)-> #等价于@find:(name)->

Animal.find("parrot")

继承与Super

class Animal

   constructor:(@name)->

   alive:    ->

       false

class parrot extends Animal

   constructor:->

       super("parrot")#super 对父类原型的一次函数调用

   dead:->

       not @alive






























你可能感兴趣的:(JavaScript,python,优雅)