写在前面:

被英文版指南坑了...闹了很久才明白.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. Android SDK与API版本的对应关系

    看教程.开发Android程序等很多地方,需要设置Android SDK的版本,而其要我们写的却是API版本的数字, 为了方便查看 Android SDK与API版本的对应关系 我在SDK Manag ...

  2. Gartner 认定 Microsoft 为具有远见卓识的云基础结构即服务提供商

    四个月前, Windows Azure 基础结构服务结束了预览版阶段,正式发布了,它具有业内领先的 SLA.随后, 凭借愿景的完整性和执行力,Gartner 很快认可了 Microsoft 在市场中的 ...

  3. Html 语法学习笔记二

    1.图像标签(<img>)和源属性(Src) 在 HTML 中.图像由 <img> 标签定义.        <img> 是空标签,意思是说,它仅仅包括属性,而且没 ...

  4. HDU 1002 A + B Problem II(大整数相加)

    A + B Problem II Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u De ...

  5. Android Intent的几种使用方法全面总结

    Intent应该算是Android中特有的东西.你能够在Intent中指定程序要运行的动作(比方:view,edit,dial),以及程序运行到该动作时所须要的资料.都指定好后,仅仅要调用startA ...

  6. HTML系列(一):创建HTML文档

    从本学期开始我打算把我以前学的知识点系统地总结一下,先从HTML开始.(本系列内容总结自博文视点出版社•代码逆袭系列书籍,包括代码片段.) 一.HTML文档类型 HTML版本众多,浏览器如何得知使用的 ...

  7. 两个textarea 同时变化高度

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  8. 第八章 C#面向对象编程(Object-Oriented Programming,OOP)简介

    .NET OOP 一.面向对象编程的含义 1.函数(过程化)编程常常导致单一的应用程序,即所有的功能都包含在几个代码模块中(常常是一个代码模块) 而使用OOP技术,常常使用许多代码模块,每个模块提供特 ...

  9. C++中头文件(.h)和源文件(.cpp)都应该写些什么

    头文件(.h): 写类的声明(包括类里面的成员和方法的声明).函数原型.#define常数等,但一般来说不写出具体的实现. 在写头文件时需要注意,在开头和结尾处必须按照如下样式加上预编译语句(如下): ...

  10. Dojo实现Tabs页报错(一)

    1.在用Dojo写tab页的过程中出现了一些错误 dojo源码如下: <%-- Document : grid Created on : 2013-12-15, 18:05:47 Author ...