About CoffeeScript
本篇文章是对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://baike.baidu.com/view/4809539.htm
http://zh.wikipedia.org/wiki/CoffeeScript
http://blog.jobbole.com/29190/
About CoffeeScript的更多相关文章
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- CoffeeScript实现Python装潢器
在上篇Angular遇上CoffeeScript – NgComponent封装中,我们讲述了CoffeeScript这门小巧的语言,摒弃JavaScript中糟粕(“坑”)部分,并将JavaScri ...
- Angular遇上CoffeeScript - NgComponent封装
CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或者Nodejs平台.JavaScript由于商业原因10天时间就匆忙诞生,所 ...
- CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- coffeeScript中类的多态[学习篇]
类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.[引自coffeescript深入浅出] class Shape constructor ...
- coffeeScript中类的继承[学习篇]
只是在看深入浅出coffeescript中感觉真的很好,不光是coffe写法简单,生成的js也值得学习,废话不多说了,直接抄个书上的例子 class Pet constructor: -> @i ...
- 《CoffeeScript应用开发》学习:第五章 CoffeeScript中的类
在CoffeeScript中定义类 在CoffeeScript中,使用class定义类,使用关键字new实例化对象. 给类绑定方法 class Airplane takeOff: -> cons ...
- 《CoffeeScript应用开发》学习:第三章-构建简单的应用程序
字符串插值 CoffeeScript提供了一种更好的构建字符串的解决方案.在双引号字符串(单引号无效)中使用#{}包含一个动态的值. str = 'Hello, CoffeeScript.' cons ...
随机推荐
- Django进阶Model篇003 - 数据库同步技巧
一.认识一个目录 目录名:migrations 作用:用来存放通过makemigrations命令生成的数据库脚本,不熟悉的情况下,里面生成的脚本不要轻易修改.app目录下必须要有migrations ...
- python fire库的使用
一. 介绍 fire是python中用于生成命令行界面(Command Line Interfaces, CLIs)的工具,不需要做任何额外的工作,只需要从主模块中调用fire.Fire(),它会自动 ...
- 【spark】示例:连接操作
我们有这样两个文件 任务:找出用户评分平均值大于4的电影. 我们看两个文件结果,第一个文件有电影的ID和名字,第二个文件有电影的ID和所有用户的评分 对于任务结果所需要的数据为电影ID,电影名字,平均 ...
- Prism5.0新内容(纯汉语版)
Prism 5.0 包含很多新东西,新的快速入门示例,新的范例,更新的文档,Prism类库代码的改变.用来解决已有问题,回应社区所提的需求.(这句话跟 What's New in Prism Libr ...
- LeetCode OJ:Combination Sum II (组合之和 II)
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- sphinx使用
一. 1.先得包含下载的文件 include'./sphinx/api/sphinxapi.php'; $sphinx= new SphinxClient(); $sphinx->SetServ ...
- 利用selenium webdriver点击alert提示框
在进行元素定位时常常遇到这样的alert框: 那么该如何定位并点击确定或取消按钮呢?stackoverflow上找到了这个问题的答案. OK, Show you the code: driver.fi ...
- Tiny4412 Android5.0 定制:编译生成img后如何删除原厂的apk
在android-5.0.2/build/core/Makefile的315行可以看到,这里是apk生成签名相关的地方. 315 name := $(TARGET_PRODUCT) 316 ifeq ...
- 基于Photon 的 PUN+ 如何自动实现RPC呼叫的.
基于Photon 的 PUN+ 如何自动实现RPC呼叫的. 简单说函数标记成 RPC 类型的. void Hello() { Debug.Log("Hello"); PhotonV ...
- 从无到有开发自己的Wordpress博客主题---主页模板
在只做完成了header和footer的模板之后,我们首先在之前Hello World的基础上做一个最简单的调用测试 //修改index.php内容如下 <?php get_header(); ...