什么是CoffeeScript

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分.

CoffeeScript 的指导原则是: "她仅仅是 JavaScript". 代码一一对应地编译到 JS, 不会在编译过程中进行解释. 已有的 JavaScript 类库可以无缝地和 CoffeeScript 搭配使用, 反之亦然. 编译后的代码是可读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.

这是CoffeeScript中文网上,对CoffeeScript的介绍。我接下来的学习,基本是基于此的。有兴趣看更多详情的同学可以直接进入:CoffeeScript

安装使用

其实Coffee并不需要安装,但我们需要有一个编译器来对xxx.coffee进行编译,转化成xxx.js

所以,我们需要先全局安装一个命令行工具。

  npm install coffee-script -g

安装完之后,我们就可以使用coffee -c xxx.coffee来对coffee文件进行编译。它会在本地对应生成一个xxx.js。更多方法可以登陆到之前的那个网站进行查阅。这里我仅会分析,coffee是编译到js是怎样的。

快速入门

下面我们举几个小例子,让大家尽快的感受到coffee的感觉。首先,要强调的是,你要有原生Javascript的基础。其次,CoffeeScript的块级分层,是通过缩进来体现的。在比较深层次的嵌套里,这是非常关键的!请统一你的缩进,是tab或者space,请不要混用。

变量赋值
name = 'Yika'                           #基本变量
age = '20'
friends = ['kitty', 'macy', 'ivan'] #数组 obj = #对象
name: 'yika',
age: '20',
friends: ['kitty', 'macy', 'ivan']
----------编译后----------
(function() {
var age, friends, name, obj; name = 'Yika'; age = '20'; friends = ['kitty', 'macy', 'ivan']; obj = {
name: 'yika',
age: '20',
friends: ['kitty', 'macy', 'ivan']
}; }).call(this);

我们来分析一下。首先,整个代码是被一个立即执行的匿名函数包住的,这样可以有效解决全局变量污染的事。相信大家也是了解过的,所以接下来显示编译后的代码时,我不会再将匿名函数显示出来。

其次就是coffee会为我们自动定义var操作符,让我们省去烦恼,也不会担心一旦忘记了var而造成全局污染的危险。但是变量还是有一些需要注意的地方的,我会在下一篇《变量篇》进行说明。

数组和对象是可以和原生保持一致的。当然对象可以去掉大括号和逗号,用缩进来控制层次。我个人在对象定义上,是保持了逗号,并去除了大括号的。

函数

Coffee是用箭头来定义函数的,直接来看看

greeting = () ->
console.log('hello world')
----------编译后----------
var greeting; greeting = function() {
return console.log('hello world');
};

使用的是表达式函数。Coffee并不支持声明式的函数,因为声明式的函数会自动进行变量提升,对没有块级作用域的Js来说,像个定时炸弹。所以我们要养成先定义,后使用的好习惯。

循环

循环一般来说,用得多的有数组循环和对象循环。

arr = ['a', 'b', 'c', 'd', 'e']
ARR = [] obj =
a: 'a',
b: 'b',
c: 'c',
d: 'd',
e: 'e'
OBJ = {} for word in arr
ARR.push(word.toUpperCase()) for key, val of obj
OBJ[key] = val.toUpperCase()
----------编译后----------
var ARR, OBJ, arr, i, key, len, obj, val, word; arr = ['a', 'b', 'c', 'd', 'e']; ARR = []; obj = {
a: 'a',
b: 'b',
c: 'c',
d: 'd',
e: 'e'
}; OBJ = {}; for (i = 0, len = arr.length; i < len; i++) {
word = arr[i];
ARR.push(word.toUpperCase());
} for (key in obj) {
val = obj[key];
OBJ[key] = val.toUpperCase();
}

关于前面的不用多看,直接看看两段关于循环的那一块儿。coffee提供的语法,可以使我们不再需要自己写for循环,并改成了使用for xxx in aa这种方式。xxx指的是数组每一次循环的那一个值,可以自行定义名称。需要注意的是,for..in..在coffee里,不再是对象循环的意思了。

而对象循环,则更名为for..of..的形式。我们可以用两个名字来代表,每一次对象循环的key和value。这样的使用会让我们操作Object迭代更加灵活。

CoffeeScript学习(1)——Quick Start的更多相关文章

  1. CoffeeScript学习(3)—— 函数

    CoffeeScript函数 如果大家有看我之前关于ES6的箭头函数的话,这一篇也不会很难理解.我们这一次可以说一下,关于两者的一些细微差别. 基本 在CoffeeScript中,任何函数都是用箭头函 ...

  2. CoffeeScript 学习笔记

    1.什么叫 CoffeeScript CoffeeScript 是一种新的编程语言,构建于 JavaScript 之上.CoffeeScript 提供了一种简洁的语法,对 Python 或 Ruby ...

  3. coffeeScript学习02

    闭包 closure = do -> _private = "foo" -> _private console.log(closure()) #=> " ...

  4. coffeeScript学习01

    安装 这里使用node.js npm install -g coffee-script # watch and compile coffee -w --output lib --compile src ...

  5. coffeescript学习

    test2.coffeestdin = process.openStdin()stdin.setEncoding 'utf8' stdin.on 'data', (input) ->     n ...

  6. Salesforce LWC学习(九) Quick Action in LWC

    我们在lightning开发中,quick action是一个常用的功能,很可惜的是,lwc目前还不支持单独的custom quick action操作,只能嵌套在aura中使用才能发挥作用. 官方也 ...

  7. CoffeeScript学习(2)—— 变量

    变量基础 对于变量的定义的话,形式如下所示 xxx = yyy ------编译后------ var xxx = yyy; 保留字 我们知道,在原生js中的保留字是不能作为变量名或者属性名的.如果我 ...

  8. RF《Quick Start Guide》操作总结

    这篇文章之所以会给整理出来,是因为学了一个季度的RF后,再去看官网的这个文档,感触破多,最大的感触还是觉得自己走了不少弯路,还有些是学习方法上的弯路.在未查看这类官网文档之前,更多的是看其他各种人的博 ...

  9. 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象

    1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...

随机推荐

  1. Webbrowser模拟百度一下子点击事件

    Webbrowser模拟百度一下点击事件新建一个form,有一个button和一个webbrowser控件.然后webbrowser一开始加载的就是百度主页.然后在文本框里输入点东西,如何做到点击bu ...

  2. linux/unix网络编程之 poll

    转自http://www.cnblogs.com/zhuwbox/p/4222382.html poll 与 select 很类似,都是对描述符进行遍历,查看是否有描述符就绪.如果有就返回就绪文件描述 ...

  3. JAVA将Excel中的报表导出为图片格式(一)问题背景

    如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...

  4. ASP.NET线程相关配置

    1.(maxWorkerThreads * CPU逻辑数量)-minFreeThreads 比如2个CPU默认配置maxWorkerThreads=100,minFreeThreads=176,则同时 ...

  5. vs2010 js代码折叠

    方法一:插件   在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 但是已经有VS2010扩展支持这个功能,它就是--JSEn ...

  6. UVA 11478 Halum(用bellman-ford解差分约束)

    对于一个有向带权图,进行一种操作(v,d),对以点v为终点的边的权值-d,对以点v为起点的边的权值+d.现在给出一个有向带权图,为能否经过一系列的(v,d)操作使图上的每一条边的权值为正,若能,求最小 ...

  7. Oracle 课程五之优化器和执行计划

    课程目标 完成本课程的学习后,您应该能够: •优化器的作用 •优化器的类型 •优化器的优化步骤 •扫描的基本类型 •表连接的执行计划 •其他运算方式的执行计划 •如何看执行计划顺序 •如何获取执行计划 ...

  8. Ajax+PHP简单入门教程

    Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.对于Ajax,最核心的一个对象是XMLH ...

  9. XA事务处理

    XA接口详解 X/Open XA接口是双向的系统接口,在事务管理器(Transaction Manager)以及一个或多个资源管理器(Resource Manager)之间形成通信桥梁.事务管理器控制 ...

  10. IOS UIScrollView中 使用 touch 无法响应的问题

    添加一个 Category  然后在使用到 UIScrollView 的文件里面 导入这个头文件 就可以 // //  UIScrollView+UITouch.m //  alarm // //  ...