写在前面:

被英文版指南坑了...闹了很久才明白.coffee怎么用。安装前需要有稳定版 Node.js, 和 npm (Node Package Manager). 借助 npm 可以安装 CoffeeScript。安装之后, 运行coffee命令 'coffee -c xxx.coffee' 以执行脚本, 编译.coffee文件到 .js 文件便可直接被.html引用了。另外sublime可以直接install CoffeeScript插件以支持代码高亮(新增编译系统后也可以Build嘎嘎)!

<!--正文废话之间的分割线-->

首先语法方面coffee采用了类似python的缩进以代替分号括号的形式,其次表述上面对JS进行了较大简化。但这也不意味着它脱离了JS,例如JS中.innerHTML在coffee中还是.innerHTML而不是jQuery中的.html(),当且仅当引入了jQuery库时才可以用jQuery的函数。

以下是一些CoffeeScript的语法:

函数

square = (x) -> x * x 

即 var square = function(x) { return x * x; };

//可以看出省略了'var', 'function',并且函数通过一组可选的圆括号包裹的参数, 一个箭头, 一个函数体来定义。参数可设定默认值。

对象和数组

song = ["do", "re", "mi", "fa", "so"]

kids =
brother:
name: "Max"
age: 11
sister:
name: "Ida"
age: 9

//数组的方括号是不可省略的- -,对象的定义采用缩进代替花括号。

if,else

彩蛋:date = if 'friday' then 'sue' else 'jill' 等同于 var date = friday ? sue : jill;

if,then,else if,else,is,isnt跟麦当劳套餐似的- -随意组合,惊喜不断

不定数量的参数

awardMedals = (first, second, others...) ->
gold = first
silver = second
rest = others

//这个太魔性了!省去了写JS的arguments冗长代码的时间

for,while

和python很像的,大致是for a in b, 或 for a in ['xx', 'xx', 'xx'], 或 for a in b when x is(isnt) y

彩蛋1:countdown = (num for num in [10..1]),这是和上一条的结合...省了太多事了- -

彩蛋2:lyrics = while num -= 1, while可返回每次迭代结果

补充一句:有了上一条魔性的... 来表示'多个',可以自己引申很多用法,比如选出数组中的第四个到倒数第三个可以写成 numbers[3...-2]

一些运算符

表达式中引用已知变量

print "My name is #{@name}"

等同于print("My name is " + this.name);  @代表this, #{}代表引用的是变量不是字符串。

类与继承

举个栗子意思意思:

class Animal
constructor: (@name) -> move: (meters) ->
alert @name + " moved #{meters}m."

等同于:

var Animal = (function() {
function Animal(name) {
this.name = name;
} Animal.prototype.move = function(meters) {
return alert(this.name + (" moved " + meters + "m."));
}; return Animal; })();

继承:class Snake extends Animal

Switch

switch day
when "Mon" then go work
when "Tue" then go relax
when "Thu" then go iceFishing
when "Fri", "Sat"
if day is bingoDay
go bingo
go dancing
when "Sun" then go church
else go work

额外彩蛋:

1. 链式比较 e.g. healthy = 200 > cholesterol > 60

2. 转行写就代表实际真的转行喔

html = """
<strong>
cup of coffeescript
</strong>
"""

先总结到这里,可能还有我没发现的彩蛋( ̄_, ̄ ),边用边学。

CoffeeScript 入门笔记的更多相关文章

  1. Ruby小白入门笔记之 <Gemfile 文件>

    因为初学Ruby,四处查资料无果,才来的贴出亲自试过的操作,覆盖整个个人入门笔记博客中,故所有的操作,都以最明了的方式阐述,当你创建完一个新的Rails应用后,你发现JAVA中我们可以编写maven聚 ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  4. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  5. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. redis入门笔记(2)

    redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...

  7. redis入门笔记(1)

    redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...

  8. OpenGLES入门笔记四

    原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...

  9. OpenGLES入门笔记三

    在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...

随机推荐

  1. 用rsync从Linux到Windows远程备份

    论 rsync是Linux系统下的数据镜像备份工具,从软件的命名上就可以看出来 了——remote sync.rsync支持大多数的类Unix系统,无论是Linux.Solaris还是BSD上都经过了 ...

  2. easy ui 学习笔记,不断整理中............

    $.message.show({//浏览器右下角弹框,我列出了几个属性,具体请看API                   title: '提示',                   msg: '恭 ...

  3. Eclips入门教程

    1. 插件推荐 Eclipse默认情况下是一个纯净版的,所以功能简单,而开源IDE最为强大的莫过于各种插件,通过使用插件可以帮助我们减少大量编写代码的工作量,也帮助我们降低了编写代码的难度,所以懂得安 ...

  4. NAND FLASH特性说明

    1.NAND FLASH 的特殊性. 1)存在坏块.由于NAND生产工艺的原因,出厂芯片中会随机出现坏块.坏块在出厂时已经被初始化,并在特殊区域中标记为不可用,在使用过程中如果出现坏块,也需要进行标记 ...

  5. C++中类成员函数作为回调函数

    注:与tr1::function对象结合使用,能获得更好的效果,详情见http://blog.csdn.net/this_capslock/article/details/38564719 回调函数是 ...

  6. QT显示如何减轻闪屏(双缓冲和NoErase)

    很多同志在些QT 程序后会遇见闪屏的问题, 有时速度非常快,但毕竟影响了显示效果,如何做到减轻屏幕抖动或闪屏呢?我曾试过如下的办法:1.使用双缓冲. 比如我们在一个Widget里面绘多个图的话, 先创 ...

  7. 当cpu飙升时,找出php中可能有问题的代码行

    参考大牛: http://www.searchtb.com/2014/04/%E5%BD%93cpu%E9%A3%99%E5%8D%87%E6%97%B6%EF%BC%8C%E6%89%BE%E5%8 ...

  8. hdu 2563 统计问题

    统计问题 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  9. 基于视觉的Web页面分页算法VIPS的实现源代码下载

    基于视觉的Web页面分页算法VIPS的实现源代码下载 - tingya的专栏 - 博客频道 - CSDN.NET 基于视觉的Web页面分页算法VIPS的实现源代码下载 分类: 技术杂烩 2006-04 ...

  10. Advanced Customization of the jQuery Mobile Buttons | Appcropolis

    Advanced Customization of the jQuery Mobile Buttons | Appcropolis Advanced Customization of the jQue ...