本篇文章是对CoffeeScript做一个初步的了解、入门的学习笔记。

什么是CoffeeScript

一种新编程语言,是一套JavaScript的转译语言,可编译成高效的JavaScript。还可以与Node.js技术相结合,构建高效的服务器端应用程序。受到Ruby、Python等语言的启发,CoffeeScript增强了JavaScript的简洁性和可读性。

CoffeeScript解决了JavaScript的一些问题:

  • 简单的语法,减少样板代码,例如括号和逗号
  • 使用空格作为组织代码块的方法
  • 提供表达函数的简单语法
  • 提供基于类的继承

示例代码

CoffeeScript

alert "Hello CoffeeScript!"
x = (a) -> a*2 for i in [0..5]
console.log "Hello #{i}"

等价于如下的代码:

JavaScript

var x;

alert("Hello CoffeeScript!");

x = function(a) {
return a * 2;
}; (function() {
var i;
for (i = 0; i <= 5; i++) {
console.log("Hello " + i);
}
}).call(this);

可以看出,某些语法和Ruby完全一致,但相比JavaScript,要简洁了很多。

Web页面中的CoffeeScript

首先在head区域加上CoffeeScript的编译器:

<script type="text/javascript" src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>

然后就可以在html文件里编写CoffeeScript代码了:

<script type="text/coffeescript">
x = (a) -> a*2
alert x(3)
</script>

自己动手测试一下吧。

Reference

http://coffeescript.org/

http://baike.baidu.com/view/4809539.htm

http://zh.wikipedia.org/wiki/CoffeeScript

http://blog.jobbole.com/29190/

About CoffeeScript的更多相关文章

  1. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  2. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  4. CoffeeScript实现Python装潢器

    在上篇Angular遇上CoffeeScript – NgComponent封装中,我们讲述了CoffeeScript这门小巧的语言,摒弃JavaScript中糟粕(“坑”)部分,并将JavaScri ...

  5. Angular遇上CoffeeScript - NgComponent封装

    CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或者Nodejs平台.JavaScript由于商业原因10天时间就匆忙诞生,所 ...

  6. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  7. coffeeScript中类的多态[学习篇]

    类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.[引自coffeescript深入浅出] class Shape constructor ...

  8. coffeeScript中类的继承[学习篇]

    只是在看深入浅出coffeescript中感觉真的很好,不光是coffe写法简单,生成的js也值得学习,废话不多说了,直接抄个书上的例子 class Pet constructor: -> @i ...

  9. 《CoffeeScript应用开发》学习:第五章 CoffeeScript中的类

    在CoffeeScript中定义类 在CoffeeScript中,使用class定义类,使用关键字new实例化对象. 给类绑定方法 class Airplane takeOff: -> cons ...

  10. 《CoffeeScript应用开发》学习:第三章-构建简单的应用程序

    字符串插值 CoffeeScript提供了一种更好的构建字符串的解决方案.在双引号字符串(单引号无效)中使用#{}包含一个动态的值. str = 'Hello, CoffeeScript.' cons ...

随机推荐

  1. HDU-4510-日期

    http://acm.hdu.edu.cn/showproblem.php?pid=4510 小Q系列故事——为什么时光不能倒流 Time Limit: 300/100 MS (Java/Others ...

  2. Solr简单测试

    import org.apache.solr.client.solrj.SolrClient; import org.apache.solr.client.solrj.SolrQuery; impor ...

  3. Caffe初试

    1.基本概念 Caffe是一个比较流行的神经网络框架,它支持C++.Python等语言,容易上手,但是代码貌似不怎么好读,等有空我...;) 2.Windows10下的部署 我把我Windows下的编 ...

  4. LeetCode OJ:Search a 2D Matrix(二维数组查找)

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  5. React 源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  6. SBT构建工具

    SBT Simple Build Tool. A interactive build tool. install windows可直接到http://www.scala-sbt.org/0.13/do ...

  7. Gif图片验证码类

    新开发的安全验证码类,支持生成Gif图片验证码(带噪点,干扰线,网格,随机色背景,随机自定义字体,倾斜,Gif动画). 上图: 字体及字体文件的路径需要在类中$FontFilePath及$FontFi ...

  8. 转载:将STM32的标准库编译成lib使用【图文】

    from:http://www.cnblogs.com/zyqgold/p/3189719.html 百度上边也有不少关于lib文件的文章,恰巧看到该博文,感觉该博文的条理清晰,步骤明确,故复制到这个 ...

  9. IDEA导出想要的sql供H2数据库使用

    通过Database连接远程oracle数据库. 选择对应的数据库 双击该数据库需要查询的表,进行自动查询,展示结果. 在查询结果中选择某条数据,右键,选择Data Executer,选择对应的方式. ...

  10. 关于 avalon总线理解(整理)

    1,一个基于Avalon接口的系统会包含很多功能模块,这些功能模块就是Avalon存储器映射外设,通常简称Avalon外设.所谓存储器映射外设是指外设和存储器使用相同的总线来寻址,并且CPU使用访问存 ...