文档章节

coffeescript 基本语法

knightuniverse
 knightuniverse
发布于 2014/01/19 00:24
字数 1053
阅读 417
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
knightuniverse
粉丝 2
博文 39
码字总数 46366
作品 0
厦门
程序员
CoffeeScript 2.3.0 发布,JavaScript 转译语言

CoffeeScript 2.3.0 发布,此次更新信息如下: 将分析初始化移入 docs.coffee 更新 CodeMirror 样式 文档更好的布局,包括自动调整大小的侧栏和主栏 对 Edge 的一些样式进行小修改 更新断开的...

雨田桑 ⋅ 04/30 ⋅ 0

Atom飞行手册翻译: 3.1 ~ 3.2

现在是时候来介绍在这一Hackable的编辑器中,真正“Hackable”的部分了。像我们在整个第二章中看到的那样,Atom中很大一部分都由一大堆包组成。如果你想向Atom中添加一些功能,你必须要访问和...

apachecn_飞龙 ⋅ 2015/08/03 ⋅ 0

CoffeeScript 2.2.4 支持 ES2018 正则表达式 dotall 标志

CoffeeScript 2.2.4 (#5025) 发布。 下载地址 Source code (zip) Source code (tar.gz) 更新 修复#4877:指数运算符(#4881) 支持 ES2018 正则表达式 dotall 标志...

雨田桑 ⋅ 04/01 ⋅ 0

Atom飞行手册翻译: 2.13 基本的自定义

基本的自定义 在我们感受到Atom中所有东西的便利之后,让我们看看如何改进它。可能有一些快捷键你经常使用但是感觉很别扭,或者一些颜色不是十分适合你。Atom具有惊人的灵活性,所以让我们对...

apachecn_飞龙 ⋅ 2015/08/03 ⋅ 0

此生无悔入 TypeScript

↑ 编者按:本文由phodal公众号授权奇舞周刊转载。 想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。 平淡生活,我的意思是:生活可以从此...

奇舞周刊 ⋅ 04/26 ⋅ 0

java Web中的接口项目:浏览器访问接口地址后返回的是一串加密后的字符串,控制台显示:请求包为空,如何解决才能看到接口中显示的json数据信息?数据转换使用des进行加密和解密的。谢谢

java Web中的接口项目:浏览器访问接口地址后返回的是一串加密后的字符串,控制台显示:请求包为空,如何解决才能看到接口中显示的json数据信息?数据转换使用des进行加密和解密的。谢谢...

llddgg ⋅ 02/28 ⋅ 0

【CentOS 7Tomcat配置3】,配置tomcat监听端口为80#180120

hellopasswd --- 配置tomcat监听端口为80 vi /usr/local/tomcat/conf/server.xml Connector port="8080" protocol="HTTP/1.1"修改Connector port="80" protocol="HTTP/1.1" /usr/local/tomc......

hellopasswd ⋅ 01/20 ⋅ 0

世界AI人才储备战硝烟四起,中国能否抢占少儿编程先机?

在人工智能的发展过程中,人才储备无疑是重要的一环。人工智能应是一种可以深埋于任何产业中的底层技术,与医疗结合可以提升影像资料的检阅效率,与工业结合可以提升分拣速度……在未来,或许...

脑极体 ⋅ 04/18 ⋅ 0

Git push 常用命令

git push : 这个是push的完整写法,将本地分支上传到远程分支,例如: git push 如果省略了 即: 则git会push到远程分支的同名本地分支,即和 等价。如果远程分支dev不存在则会创建dev分支。...

hobhunter ⋅ 03/06 ⋅ 0

一次与陌生男子结对编程3天的经历

最近,公司的事情越发忙碌起来了,除了需要不断梳理架构团队的规划和进度之外,还要经常北上杭三地跑,平常好不容易有个完整的周末,也都瘫软在沙发上,一动脑就脑壳痛。感觉这种状态很容易让...

小芋头君 ⋅ 05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Day 17 vim简介与一般模式介绍

vim简介 vi和Vim的最大区别就是编辑一个文件时vi不会显示颜色,而Vim会显示颜色。显示颜色更便于用户编辑,凄然功能没有太大的区别 使用 yum install -y vim-enhanced 安装 vim的三种常用模式...

杉下 ⋅ 41分钟前 ⋅ 0

【每天一个JQuery特效】根据可见状态确定是否显示或隐藏元素(3)

效果图示: 主要代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>根据可见状态确定 是否显示或隐藏元素</title><script src="js/jquery-3.3.1.min.js" ty......

Rhymo-Wu ⋅ 50分钟前 ⋅ 0

OSChina 周四乱弹 —— 初中我身体就已经垮了,不知道为什么

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @加油东溪少年 :下完这场雨 后弦 《下完这场雨》- 后弦 手机党少年们想听歌,请使劲儿戳(这里) @马丁的代码 :买了日本 日本果然赢了 翻了...

小小编辑 ⋅ 今天 ⋅ 10

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部