写在前面:

被英文版指南坑了...闹了很久才明白.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. OP(Over-provisioning)预留空间

    SSD上的OP指的是用户不可操作的容量,大小为实际容量减去用户可用容量,OP区域一般被用于优化操作如:WL,GC和坏块映射等.       OP一般分三层(见下图).第一层容量固定为SSD标称容量的7 ...

  2. 11136-Hoax or what

    Each Mal-Wart supermarket has prepared a promotion scheme run by the following rules: A client who w ...

  3. flexbox 伸缩布局盒

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为   ...

  4. SQL函数经常用到的mark一下

    在项目开发过程中存储过程会用到很多SQL函数,经常用到的mark一下 1.经常用到的mark 一下 经常需要把id字符以','分隔传入存储过程然后SQL语句用in去搜索但是经常是这样的情况id 经常是 ...

  5. ajax 上传图片 并预览

     <img {if !$article[pic]}style="display: none"{/if} width="82" height="6 ...

  6. JSP页面中包含文件

    在JSP中,主要有3种功能可以将外部内容包含到JSP文档中jsp:include动作. jsp:include动作允许我们在请求期间将其他页面的输出包含进来.它的主要优点是:在被包含的页面发生更改时, ...

  7. Android adb 命令图解

    做了这么长时间的开发与管理,在命令上总是自见则过,往往却忽视了在其命令上的分享过程,所以现在稍微有点时间就把 其命令的相关操作来简单的扫盲一番吧,也系统通过这种方式去授之以渔而不是鱼,好了,我以图解的 ...

  8. HDU 3729 二分匹配 反向匹配

    题意: 给定 n个学生 说的 自己 考试排名的 可能范围 确定最多几个人说真话 如果有多种答案,输出字典序最大的那种( 要求字典序最大,所以solve中从最大字典序开始匹配) 思路: 题目给定  点 ...

  9. js基础 1.简单js 语法 关键字 保留字 变量

    简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...

  10. 使用Apache的rewrite技术

    做PHP项目中需要用到URL重定向技术,基本上的需求就是把比如 /user/heiyeluren 重定向到 /user.php?uid=heiyeluren 之类的URL上,当然,你也可以把 /art ...