文档章节

coffeescript 基本语法

knightuniverse
 knightuniverse
发布于 2014/01/19 00:24
字数 1053
阅读 431
收藏 0

在开始之前,coffeescript有一个TRY COFFEESCRIPT标签页。它会提供一个在线的coffeescript编译器。左边的是coffeescript代码,而右侧部分则是编译后的js代码。

代码注释

和Ruby注释的格式一样,以#开头,后面跟着注释内容即可

# A comment

当然,多行注释也是支持的,例如

###
  A multiline comment, perhaps a LICENSE.
###

变量和作用域

js有一个潜在的问题就是,当你忘记使用var声明变量的时候,这个变量的作用域就会被提升至全局作用域。

coffeescript修复了这个潜在的问题。coffeescript使用一个匿名函数把你的coffeescript代码包起来,然后所有的变量都使用var声明。

coffeescript代码

exports = this
exports.MyVariable = "foo-bar"

会被编译成:

var exports;
exports = this;
exports.MyVariable = "foo-bar";

不过当你需要设置全局变量的属性时,我建议你直接使用全局对象(比如在浏览器的环境下,全局对象就是window了)。

if/else

流程控制,最基本的应该就是if else 语句了:

if true == true
  "We're ok"
if true != true then "Panic"
# Equivalent to:
#  (1 > 0) ? "Ok" : "Y2K!"
if 1 > 0 then "Ok" else "Y2K!"

当然,实际开发过程中,if else 后面会跟着不止一样的表达式,这样的场景下,我们可以这么做:

if heat < 5
    #   do something
else
    #   do other things

更进一步的是,coffeescript还允许你像编写ruby代码一样,把if语句放在后面:

alert("It's cold!") if heat < 5

实际上这句代码会被翻译成:

if (heat < 5) {
  alert("It's cold!");
}

很神奇吧!我们来看另外一个js代码:

if (!true) {
  "Panic";
}

是的,js我们一般使用!做取反操作,但这样的代码其实偏向于给机器阅读,而不是说给人类阅读。换种方式:

if not true then "Panic"

是否好多了?其实我们还有另外一种表达方式:

"Panic" unless true

或者:

unless true
  "Panic"

不论是哪一种写法,结果都是一样的。unless === if not。

操作符和别名

其他的一些小的变化,比如is关键字会被翻译成===,isnt会被翻译成 !==等,虽然是微小的变化,但是在代码的可读性上却前进了一大步。

if true is 1
    "Type coercion fail!"

if true isnt true
    alert "Opposite day!"

拓展操作符

我们常常会有这么一个场景,就是判断一个变量是否为null或者undefined:

if !val
    //  do something

coffeescript为我们提供了个拓展操作符 ?

solipsism = true if mind? and not world?

等价于:

var solipsism;
if ((typeof mind !== "undefined" && mind !== null) && (typeof world === "undefined" || world === null)) {
  solipsism = true;
}

代码

footprints = yeti ? "bear"

会被翻译成:

var footprints;
footprints = typeof yeti !== "undefined" && yeti !== null ? yeti : "bear";

Switch/When/Else

switch day
  when "Mon" then go work
  when "Tue" then go relax
  when "Thu" then go iceFishing
  when "Fri", "Sat"
    if day is bingoDay
      go bingo
      go dancing
  when "Sun" then go church
  else go work

Try/Catch/Finally

try
  allHellBreaksLoose()
  catsAndDogsLivingTogether()
catch error
  print error
finally
  cleanUp()

字符串

在ruby中,字符串支持内嵌变量,这是一个很好的语法层面的特性。coffeescript理所当然的借鉴了过来了:

author = "Wittgenstein"
quote  = "A picture is a fact. -- #{ author }"
sentence = "#{ 22 / 7 } is a decent approximation of π"

另外,字符串还有其他特性,比如multiline strings和block strings。

#   multiline strings
mobyDick = "Call me Ishmael. Some years ago --
 never mind how long precisely -- having little
 or no money in my purse, and nothing particular
 to interest me on shore, I thought I would sail
 about a little and see the watery part of the
 world..."

#   block strings
html = """
   <strong>
     cup of coffeescript
   </strong>
   """

block string在功能上,有点类似html中的<pre>标签。

我们经常会使用js的html模板方案去实现一些功能,使用string去拼接html代码实在是非常蹩脚的技巧。

这个时候如果html稍微长一些,我们要么使用array去join()得到一个html字符串或者直接通过字符串拼接。但不论哪一种方案,都没有coffeescript提供的这个block string来的优雅。

对象直接量

object3 = 
  one: 1
  two: 2

是的,和js的定义方式没多少区别。如果我们需要遍历对象原型链,在js中,我们的做法可以是:

var object = {one: 1, two: 2}
for(var key in object) alert(key + " = " + object[key])

但在coffeescript中,我们是这样做的:

for key, value of object
    #   do something

© 著作权归作者所有

共有 人打赏支持
下一篇: CoffeeScript简介
knightuniverse
粉丝 2
博文 39
码字总数 46366
作品 0
厦门
程序员
私信 提问
利用 CoffeeScript 和 Node 进行函数式 JavaScript 编程

CoffeeScript 在填补 JavaScript 不完善之处方面声名卓著,但它还有其他一些值得探索的优势。在本文中,Andrew Glover 将向您展示 CoffeeScript 较为整洁的语法如何使您能够更轻松地利用 Ja...

IBMdW
2012/03/19
1K
2
开始征战CoffeeScript

最近在用clojurescript做游戏,感觉整个项目使用了很多工具来编程,但是在 效率及管理上都方便很多,整个项目的发布都是通过脚本自动实现的,降低了发布过程人为因素的影响。而在项目代码方便...

lav点搜
2012/11/08
0
0
CoffeeScript 2.2.2 发布,编译成 JS 的小巧语言

CoffeeScript 2.2.2 已发布,CoffeeScript 2 最大的变化是,CoffeeScript 编译器会生成现代 JavaScript 语法( ES6 或 ES2015 及以上版本)。一个 CoffeeScript =>会变成一个 JS => ,一个 ...

局长
02/23
675
1
CoffeeScript 2.2.3 发布,编译成 JS 的小巧语言

CoffeeScript 2.2.3 已发布,CoffeeScript 2 最大的变化是,CoffeeScript 编译器会生成现代 JavaScript 语法( ES6 或 ES2015 及以上版本)。一个 CoffeeScript =>会变成一个 JS => ,一个 ...

达尔文
03/12
535
1
CoffeeScript 2.0.0 正式发布,编译成 JS 的小巧语言

在经过 5 个测试版后,CoffeeScript 2.0.0 正式发布了。 从 CoffeeScript 1.x 到 2 的变化不多,大部分项目都能顺利升级。CoffeeScript 2 最大的变化是,CoffeeScript 编译器会生成现代 Java...

王练
2017/09/19
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

解析Node.js通过axios实现网络请求

本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1、使用Npm 下载axios n...

前端攻城老湿
5分钟前
0
0
深入浅出之React-redux中connect的装饰器用法@connect

这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 通常我们需要一...

前端攻城小牛
7分钟前
0
0
详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里...

前端小攻略
22分钟前
2
0
一个centos初始化脚本

概述 就是自己无聊写的一个脚本,欢迎使用,star,fork顺便关注我一波 https://github.com/bboysoulcn/centos 使用方法 这个是给最小化安装的centos使用的,在centos 7.5上测试过,当然其他的...

bboysoulcn
26分钟前
7
0
mybatis 自动维护 createdAt, updatedAt

SpringBoot Mybatis Plus公共字段自动填充功能

youngjdong
29分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部