写在前面:

被英文版指南坑了...闹了很久才明白.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. Debian下自动备份文件并上传到远程FTP服务器且删除指定日期前的备份Shell脚本

    说明:  1.备份目录/home/osyunwei下面所有的文件到/home/osyunweibak里面,并且保存为osyunwei20120701.tar.gz的压缩文件格式(2012_07_01是 ...

  2. Netbeans搭建Android环境

    原文:Netbeans搭建Android环境 Netbeans环境的搭建主要依赖于NBAndroid插件,项目地址: http://www.nbandroid.org/p/installation.h ...

  3. Spring Boot的一个测试用例

    package tk.mybatis.springboot.mapper; import org.junit.Assert; import org.junit.Test; import org.jun ...

  4. 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. cocos2dx 坐标和锚点

    cocos2dx中使用opengl坐标系,左下角为坐标原点,在大部分情况下,都是使用这种坐标系的. 当我们创建了一个渲染对象到窗口后,那么这个对象本身也是也是有自己的坐标系的,这种坐标系是节点自己的坐 ...

  6. sql的强大功能(看一条sql解决的复杂业务)

        一条sql语句解决的复杂业务,请往下看:     业务介绍:一个单位有多个立项(立项信息表里有单位id),每个立项可能被预警多次(预警信息表里的uuid字段的值里包含有立项id或单位id),每 ...

  7. 未能加载文件或程序集“**, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项。试图加载格式不正确的程序。

    未能加载文件或程序集“Common, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项.试图加载格式不正确的程序. 原来, ...

  8. POJ 1459 Power Network(网络流 最大流 多起点,多汇点)

    Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 22987   Accepted: 12039 D ...

  9. 获取当前WEB应用全路径

    <%String path = request.getContextPath();String basePath =request.getScheme()+"://"+req ...

  10. Assertion failure in -[UIView layoutSublayersOfLayer:]

    Assertion failure in -[UIView layoutSublayersOfLayer:], /SourceCache/UIKit/UIKit-2935.137/UIView.m:8 ...