写在前面:

被英文版指南坑了...闹了很久才明白.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. Linux 查看支持的语言,日期,时间,计算器

    1.查看系统目前支持的语言 echo %LANG 2.查看日历 cal 3.查看日期时间 date 4.计算器 bc

  2. VS2010/MFC字体和文本输出:文本输出

    字体和文本输出:文本输出 本节主要讲解文本输出的方法和实例. 文本输出过程 在文本输出到设备以前,我们需要确定字体.字体颜色和输出的文本内容等信息.Windows窗口的客户区由应用程序管理,所以我们还 ...

  3. 随手写了一个linux服务端与window客户端的epoll程序,当做练习把。

    linux服务端:监听链接,处理消息 #include <sys/socket.h>     #include <sys/epoll.h>     #include <n ...

  4. Spoj 2713 Can you answer these queries IV 水线段树

    题目链接:点击打开链接 题意: 给定n长的序列 以下2个操作 0 x y 给[x,y]区间每一个数都 sqrt 1 x y 问[x, y] 区间和 #include <stdio.h> # ...

  5. String、StringBuffer和StringBuild的区别

    public class Test1 { public static void stringReplace (String text) { text = text.replace('j','i') ; ...

  6. MyEclipse性能调优初体验

    MyEclipse性能调优初体验 简介一下工作环境,MyEclipse2014,你懂的 项目中有一个基于web的工作流引擎,仅仅要执行起来就CPU差点儿耗尽(尽管看似27%,事实上已经把俺4核的CPU ...

  7. [置顶] ios 在一定选项范围随机选取选项demo

    原创文章,转载请注明出处:http://blog.csdn.net/donny_zhang/article/details/9408285 demo功能:ios 在一定范围随机选取demo,如截屏.在 ...

  8. winform treeview 通过节点名称添加子节点

    /// <summary> /// 添加人员节点(利用TreeNodeCollection) /// </summary> /// <param name="t ...

  9. js发送post请求下载文件

    大家都知道ajax是不能直接下载文件的,所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了 如下是一个工具方法(依赖jque ...

  10. C#复习三(Day 22)

    哈哈,又到了总结的时间了.今天还是在继续复习C#的基础语法.这次总结主要以一下小程序为主. Split()的运用 123-456---789-----123-2把类似的字符串中重复符号去掉,得到123 ...