CoffeeScript快速入门
CoffeeScript快速入门
CoffeeScript是最近比较流行的一个小的编程语言,它有自己的语法(受Python和Ruby影响比较多,个人觉得更象Ruby),其编译器将其编译输出javascript。至于生成的javascript则可以在浏览器运行也可以在服务器端运行(NodeJS)。例如最简单的helloWorld函数(你可以点击这个链接进入CoffeeScript提供的在线工具)
# ===========
# CoffeeScript
# ===========
helloWorld = (name)->alert "Hello World #{name}"// ==========
// Javascript
// ==========
var helloWorld;helloWorld = function(name) {return alert("Hello World " + name);
};
下面我们可以就上面的代码简单介绍CoffeeScript的语法。
简单语法
空格/缩进很重要
跟Ruby一样,没有分号作为语句的分隔符,而是以换行;也没有花括号来表示一个语句块,而是以缩进来表示。所以在上面的代码中
alert
语句是缩进了两个空格。当然你可以缩进三个,四个,任意个,只是同一个语句块要有同样的缩进。变量不需要声明
所有的变量都会自动定义成局部变量,以消除全局变量。例如上面例子的helloWorld函数。熟悉javascript的都知道,没有var声明的变量,自动成为全局变量,那样容易造成变量名的混乱。而不声明var是可能发生的手误,尤其对于新手来说。所以如果想要定义全局变量,习惯上可能会以
g_
作为前缀,这样便于代码的阅读和维护。当然现在的Javascript讲究的是尽量不要用全局变量,最大的理由就是变量的覆盖,尤其是在采用了很多类库的情况下,如果大家都用全局变量就完蛋了。举个例子来说,大家都知道大名鼎鼎的$
,JQuery的简写。如果我自己的代码也定义一个全局变量为$
,并且加载在jQuery之后,那么就覆盖了jQuery的$
,你再想用它就不是jQuery了。函数声明采用箭头(->)
究其原因是没有的,反正语法就是这么规定,所以需要记住。类似与上面的例子,在箭头后面我们定义了函数的实现。至于函数的参数需要在箭头的左边声明,并且置于括号之中。如果没有参数的话,你可以在括号中置空,也可以连括号都不要。CoffeeScript支持设置默认参数,可变参数,具体可以参考CoffeeScript。
函数调用可以不要括号
你可以看到alert函数调用是没有加括号的,这也是Ruby里面的习惯用法。这样更佳符合英文的书写和阅读,对于我们中国人来说可能有括号更加容易理解,至少象我这样从C语言过来的。但是要注意,如果一个函数没有参数的话,那么调用的时候一定要加括号,应为CoffeeScript它不确定你是当当要引用这个函数还是要调用它。其实Ruby是默认认为调用。这里也可以看到CoffeeScript只是实现了Javascript的一个子集,因为它也可以调用alert方法。
双引号的字符串中可插值
在调用alert时候生成的字符串,我们直接在字符串中引入了变量name。这个方法还是很不错的。注意一定是双引号的字符串,单引号是不行的。
函数返回值默认是最后一句的值
在生成的javascript版本helloWorld,你可以发现有return语句,尽管我们在CoffeeScript中并没有return。这就是默认的,CoffeeScript函数返回最后一句的值。有的时候这减少了写return了。但是如果在函数中间要返回值,那还是得要return的。
class
其实我最喜欢的是类的支持。jQuery这么流行的库为什么不支持面向对象呢?我认为基本的面向对象就是类,类的继承,方法的覆盖。这些CoffeeScript都给出了很好的支持。譬如,
class Animal@count: 0@getCount: ->@countconstructor: (@name)-> Animal.count++getName: ->@namesay: ->alert @getName()class Dog extends Animalconstructor: (name)->super(name)@type = 'Dog'getName: ->@type + ": " + super()animal = new Animal('A')
# alert('A')
animal.say()
# 1
alert Animal.getCount()# alert('Dog: D')
dog = new Dog('D')
dog.say()
# 2
alert Animal.getCount()# 0
alert Dog.getCount()# error, no method getCount for animal
alert animal.getCount()
# error, no method getCount for dog
alert dog.getCount()
对应输出的Javascript则是
var Animal, Dog, animal, dog,__hasProp = {}.hasOwnProperty,__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };Animal = (function() {Animal.count = 0;Animal.getCount = function() {return this.count;};function Animal(name) {this.name = name;Animal.count++;}Animal.prototype.getName = function() {return this.name;};Animal.prototype.say = function() {return alert(this.getName());};return Animal;})();Dog = (function(_super) {__extends(Dog, _super);function Dog(name) {Dog.__super__.constructor.call(this, name);this.type = 'Dog';}Dog.prototype.getName = function() {return this.type + ": " + Dog.__super__.getName.call(this);};return Dog;})(Animal);animal = new Animal('A');animal.say();alert(Animal.getCount());dog = new Dog('D');dog.say();alert(Animal.getCount());alert(Dog.getCount());alert(animal.getCount());alert(dog.getCount());
从这个代码的对比来看,CoffeeScript的确是相当高效的.具体说来class实现有如下要点
关键字class声明一个对象
在对象内部的定义,则是采用了函数名后面加冒号(不是等号),然后再是函数的定义。
constructor为构造函数 new一个对象的时候就会调用该函数,相当于Ruby中的initialize函数。显然每个class只有一个构造函数。在成员函数中的@为this的简写,例如getName函数中的@name表示就是this.name,也就是类实例的name变量。在constructor中我们采用了一个更加简单的写法,就是直接将传入的name参数赋给成员变量name,所以我们直接在参数name前面加了@符号。
super 子类的方法可以通过super调用父类的方法,例如Dog的constructor和getName,都有这样的用法。
成员函数或变量声明前加@表示静态方法或变量 例如getCount和count,它们都是直接转化成Animal的属性。所以在调用getCount的时候,只有通过Animal.getCount()才起作用。通过实例animal和dog进行调用,都会报错说方法不存在。而通过Dog类调用的时候,你会发现该方法是存在的,但是值可能不是你想要的。这是因为CoffeeScript生成的 JS代码__extends会将父类的所有属性复制一份到子类,也就是说在最开始的时候会将Animal的count和getCount属性复制到Dog里面去。而我们在Animal的构造函数中,只是增加了Animal.count的计数,而不是Dog.count的计数。
CoffeeScript的负面评价
更多其它的细节可以在CoffeeScript找到。在好评如潮的情况下,我也找到一些负面的评价。如这两篇文章,
http://ryanflorence.com/2011/case-against-coffeescript/
http://ceronman.com/2012/09/17/coffeescript-less-typing-bad-readability/
我觉得写得相当不错。我是不太喜欢There is more than one way to do it (TIMTOWTDI) (不止一种方法来实现一个功能),因为这样势必造成学习曲线增加,难记,也导致难以维护。每个人用不同的方法来做,那维护的人就要痛苦死了。而Java就是因为简单所以才会有这么多人使用,开发效率也才会高,才会容易阅读和维护。
安装CoffeeScript
最后介绍一下如何在本地安装CoffeeScript,虽然在官网都有,而且也可以在官网找到在线工具,但是为了文章的完整性,在最后还是附上。
- 安装NodeJS
npm install -g coffee-script
运行安装coffee scriptcoffee -o lib/ -cw src/
这个表示运行自动监控src下面的".coffee"文件,然后以相同的文件名编译输出到lib目录下面,只是文件名后缀为js。
CoffeeScript快速入门相关推荐
- Quiver快速入门
Quiver快速入门 装载自:https://github.com/HappenApps/Quiver/wiki/Quiver%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8 ...
- mca版Quiver快速入门
Quiver快速入门 装载自:https://github.com/HappenApps/Quiver/wiki/Quiver%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8 ...
- Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录 一.下载解压 二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试 三.shiro.ini分析 四.Quickstart. ...
- 计算机入门新人必学,异世修真人怎么玩?新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
- Spring Boot 2 快速教程:WebFlux 快速入门(二)
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
- Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
- 《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者 刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看 目 录 前 言 第1章 iOS ...
- BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 序
BIML 101 - BIML 快速入门教程 做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...
- python scrapy菜鸟教程_scrapy学习笔记(一)快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
最新文章
- sklearn中cross_val_score、cross_val_predict的用法比较
- c#退出窗口跳转_关于winform如何如在关闭一个窗口时打开另外一个窗口
- 日常生活 -- CSDN博客专家
- elasticsearch id查询_互联网公司中对【Elasticsearch】的真实应用案例
- java职业技能了解精通_如何通过精通数字分析来提升职业生涯的发展,第8部分...
- html页面高度设为自动,html – CSS:响应式布局中的高度自动问题
- Spring Boot基础学习笔记11:Spring MVC
- Github发现优秀的开源项目
- 《XMPP高级编程 使用JavaScript和jQuery》
- 随机一个淘宝买家秀网站源码
- dh算法 理论依据_DH算法
- NexT主题配置优化-出土指南
- Python 爬取笔趣阁小说
- aho-corasick php,基于 Aho-Corasick 算法实现中文全分词
- 所有父母害怕发生的事情,被这个男人制止了丨公益报道
- php 503解决办法,php设置页面返回503状态-php设置503http状态的方法-吾爱编程网
- [向前一小步]Android简单实现指纹识别登录
- 两平面平行但不重合的条件是_____黑龙江省大庆外国语学校高中数学_第二章《2.2_直线、平面平行的判定及其性质》单元测试5_新人教A版必修3...
- oracle中部门工资降序排列,oracle面试题整理二(10级学员 乔宇整理)
- jquery对象级别的插件开发