GitHub上好多项目都是用coffee-script写的,尤其是运行于Nodejs下的项目,也没太在意,一直没有仔细看看coffee。我学习编程主要还是兴趣驱动,我之前对OT(google wave,etherpad等实时编辑器的核心)很感兴趣,这个项目ShareJs,用coffee实现了类似etherpad的功能,我要看代码,必须了解下coffee了

1.coffee-script在线测试

如果安装了Nodejs,直接在命令行下面跑最好了,这里提供了一个简单的线上测试环境

http://jashkenas.github.com/coffee-script/ 单击TRY COFFEESCRIPT

2.语法

coffee最终是转化为js执行的,不去关注转化后的代码,那么如何写coffee-script呢?

函数定义:

hi = (a,b) ->alert(a+" say to:"+b+",hello!");

右边会自动生成编译后真正执行的javascript(后面不再列出)

var hi;
hi = function(a, b) {return alert(a + " say to:" + b + ",hello!");
};

函数调用:不用括号

hi "tom","Lily"

字符

内插字符:

name = "tom"
s = "hi #{name}"
alert name
/*跨越多行的字符,类似Python的语法*/
name = "tom
,john
,kinas
"
s = "hi #{name}"
alert name

定义数组

a = [1,2,3,4];/*第一种方法定义*/
b = [ i for i in [1..10]];/*第二种方法,用 ‘..’ 表示范围*/
alert a;
alert b;

遍历数组

a = [1,2,3,4];
b = [ i for i in a];/*很自然的遍历方式*/
alert b;

还可以调用函数:

[alert i for i in a]

this:在coffe没有显示的this,@代替之

sayHello (name)->@name = name@say -> alert name

对应的javascript:

sayHello(function(name) {this.name = name;return this.say(function() {return alert(name);});
});

一行函数调用,带判断

alert "I knew it!" if elvis?

coffee-script 的继承(摘自这里)

class Animalconstructor: (@name) ->move: (meters) ->alert @name + " moved " + meters + "m."class Snake extends Animalmove: ->alert "Slithering..."super 5

观察生成的javascript,可以窥探其继承的实现

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() {function Animal(name) {this.name = name;}Animal.prototype.move = function(meters) {return alert(this.name + " moved " + meters + "m.");};return Animal;
})();
Snake = (function() {__extends(Snake, Animal);function Snake() {Snake.__super__.constructor.apply(this, arguments);}Snake.prototype.move = function() {alert("Slithering...");return Snake.__super__.move.call(this, 5);};return Snake;
})();

转载于:https://www.cnblogs.com/wewe/archive/2011/06/01/2067275.html

coffe-script相关推荐

  1. npm run dev 报错:missing script:dev

    错误描述 运行 npm run dev 报错 missing script:dev 原因 查看package.json发现script中并没有dev而是serve.. 所以运行 npm run ser ...

  2. Error:(49, 1) A problem occurred evaluating project ':guideview'. Could not read script 'https://r

    出现问题如下: Error:(49, 1) A problem occurred evaluating project ':guideview'. > Could not read script ...

  3. java script DOM操作

    ---恢复内容开始--- 一.javascript功能: 1.进行数据运算 2.控制浏览器功能 3.控制元素的属性.样式.内容 二.javascript书写位置 1.可以写在HTML文件的任意位置,书 ...

  4. 【Ubuntu】ubuntu工具 记录shell终端的内容到文件中:script

    ###用法 $ script -h Usage: script [options] [file] Options: -a, --append append the output -c, --comma ...

  5. 动态引入js只能生效一次_干货丨动态插入的script脚本执行时间

    在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...

  6. python爬取疫情信息html.xpath p标签_python xpath 如何过滤div中的script和style标签

    爬取一个页面中的div,想获取div中的文字,我是这么写的: selector.xpath('//div[@class="text-con"]').xpath('string(.) ...

  7. 「学习笔记-Linux」学习Shell Script

    学习Shell Script Table of Contents 1 什么是Shell Scipt 1.1 程序书写 1.2 程序执行 2 简单Shell练习 2.1 例1 接收用户输入 2.2 例2 ...

  8. Unity脚本生成插件:Script Create Dialog

    最近写代码又犯懒了... 感觉每次新建脚本都要写一堆简单重复的东西好无聊,所以搜索了一下有没有自动生成脚本的插件.结果还真被我发现了,官方在N久之前就制作了自动生成脚本的插件[Script Creat ...

  9. Java Script 第四节课 Java Script的隐式转换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 屏蔽“网页上有错误”提示,屏蔽java script 错误的代码

    <script> window.onerror=hide_error_message; function hide_error_message() {return true;} </ ...

最新文章

  1. 00后的AI开发者进阶之道:从入门到鏖战MIT编程大赛 | 人物志
  2. 【瞎写代码】系列之redux表面理解
  3. V神又在操心区块链技术落地,以太坊大涨!
  4. 【机器学习入门笔记4:OpenCV图片的写入和不同图片质量保存】20190203
  5. 成功解决FileNotFoundError: [Errno 2] No such file or directory: '/home/bai/Myprojects/Tfexamples/data/kn
  6. 小技巧:不用任何媒体处理软件进行视频压缩
  7. Visual C++ 2008入门经典 第四章数组 字符串(练习题)
  8. 基于JAVA+SpringMVC+Mybatis+MYSQL的学校教务查询系统
  9. 调教 游戏java_如何优雅的调教Java(eclipse篇)(三)安装插件的崩溃瞬间代号(2599)...
  10. 一个...买裤子的全过程
  11. 统计学习方法学习笔记一
  12. 自主创业一年,自己总结了5个创业心得
  13. 第四周作业-多线程编程
  14. 放弃有道词典和有道云笔记
  15. 2021年东南大学软件学院电子信息考研信息
  16. 拯救节日邮件!专属这个节假季的EDM营销方案
  17. php正则匹配中文和英文字母,PHP正则匹配中文字母数字正则的表达式
  18. 【您有新的未分配天赋点】网络流:从懵逼到完全懵逼
  19. 远程连接电脑以及服务器
  20. 文笔很差系列4 - Kris Kremo

热门文章

  1. matlab右下方箭头,matlab绘制箭头arrow
  2. [血泪整理]为何加载EDEM和FLUENT耦合接口显示ERROR126
  3. 对接支付宝流程【网页支付,手机网页支付,APP支付】
  4. 使用canvas制作在线涂鸦画板
  5. Using insecure protocols with repositories(已解决)
  6. Threejs 设置线条宽度(lineWidth) 无效问题
  7. Windows修改文件报错:“文件或文件夹正在使用”解决办法
  8. CAD中图形无法复制,使用块插入来合并两个dwg图形
  9. WSJ新闻标题的中心词提取
  10. windows10为何鼠标右键一点桌面就一直转圈?