coffeeScript 语法总结

CoffeeScript

---->安装node.js

---->安装coffeeScript

  语句:

注意:没有分号,语句由新的一行结束;多条语句写到同一行时需要分号表示一条语句的结束(不常用);

通过在行尾加上\表示语句延续到下一行;

  变量:

    和js不同,CoffeeScript的变量不需要定义,默认所有变量都是局部变量。

    声明全局变量:global.myGlobalVariable="I am calamus!"

     在浏览器中用window对象代替:window.myGlobalVariable="I am calamus!"

  注释:

    单行注释(编译后不存在):以#开头,行中间的# 之后的内容也是注释内容。

      #注释内容;

    多行注释(很少用,编译为js后为/**/):以###开头和结尾的注释块

            ###

            注释块内容

            ###

  函数调用:

     函数调用的优先级:参数由内向外分配给函数,即最近原则。 

console.log("Hello,Calamus!")
console.log "Hello,Calamus!"
//有参数则小括号可以省略,但有时需要实用小括号消除歧义
Math.pow 2,3
//调用没有参数的函数,必须实用括号
Date.now()

  控制结构:不实用大括号,使用缩进控制代码执行

    if、else 和 else if语句:

calamus=16;
if calamus>5
    console.log "Calamus is greater than 5"
    if calamus>15
         console.log "Calamus is greater than 5"
     console.log "Over" 

    单行形式:

console.log "Success!" if true==true

    unless语句(测试条件为等价假值时执行分支语句块):

day="Monday"
unless day[0]=="S"
    console.log "Today is a weekday!"
//编译后的js代码为:
var day;
day="Monday";
if(day[0]!=="S"){
    console.log "Today is a weekday!"
}

  switch语句:

//编译为js会添加break
switch things
    when "ice"
        console.log "white"
    when "grass"  then  console.log "green"  //也可以实用then缩短语句到一行
    else
        console.log "gray"

  比较运算符:

CoffeeScript和JavaScript比较运算符转换
CoffeeScript JavaScript
is,== ===
isnt !==
not !
and &&
or ||
true,yes,on true
false,no,off false
@,this this
of in
in  

  数组:

languages =["english","chinese","french"]
languages =[  "english",
                    "chinese",
                    "french"]
//不实用逗号也可以
 languages =[  "english"
                    "chinese"
                    "french"]      

  数列:

num=[0..9]            //编译为num=[0,1,2,3,4,5,6,7,8,9];
num=[0...9]          //编译为num=[0,1,2,3,4,5,6,7,8];三个点不包含尾边界

  简单对象:

author={name:"Calamus",age:21}  //可以省略逗号,大括号(缩进)
author.name
author["age"]
author.favoriteColor="black"
//对象的遍历
for k,v of author
    consoloe.log "My"+k+"is"+v

  循环:

//遍历数组每个元素很方便
animals=["dog","cat","brid"]
for animal in animals
    console.log animal

  函数:

匿名函数:

//参数为name的匿名函数,也可以有多个参数的
(name) ->
    return "Hello,#{name}!"
//编译后
(function(name){
    return "Hello,"+name+"!";
})
//函数的调用
sayHello=(name) ->
    return "Hello,#{name}!"
sayHello "Calamus"

命名函数:大多数情况下不支持命名函数,主要原因是IE对命名函数的支持非常弱,但可以实用绑定带变量的方式给函数命名

  函数的返回值

//如果函数没有显式的返回值,会把最后一句话当作函数的返回值
about = (phrase) ->
    "{phrase.toUpperCase()}!!!"
    //return  确定没有返回值时加return
    //null     隐式返回
//编译后的js
var shout;
shout = function (phrase){
    return ""+(phrase.toUpperCase())+"!!!";
}

  类:

//声明一个类
class rabbit
//创建类的实例
rabbit=new rabbit()
rabbit.color="gray"
//给类绑定方法,number为参数
class rabbit
    jump:(number)->
        console.log "GrayRabbit"
rabbit.jump()

  构造函数:

//只需在前面加constructor
class rabbit
    constructor:(num,type="diesel") ->
        @type=type;
        @number=number
        @load=0
        @capacity=number * 100
    describe : ->
        //其他内容

  类的继承:

//实用extends表明继承关系
class animal
    behavior : ->
        console.log "jump"
class rabbit extends animal
//实例
myRabbit = new rabbit()
myRabbit.behavior()

     

时间: 2024-10-03 21:53:40

coffeeScript 语法总结的相关文章

CoffeeScript飞一样的写javascript

之前看到同事在使用coffeescript写js,当我看到那简介的coffee文件,就深深的被coffescript吸引了,简洁的语法,熟练之后会大大提升javascript的开发速度,写脚本也能像飞一样. 学习资料: 官网: http://coffeescript.org/ 中文网: http://coffee-script.org/ 推荐资料: CoffeeScript 详解  https://ruby-china.org/topics/4789 会ruby语言的同学轻松上手,不过coffe

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

CSS3(七 ) 前端预处理技术(Less、Sass、CoffeeScript)

目录 一.Less 1.1.概要 1.2.变量 1.3.解析Less 1.3.1.在线处理 1.3.2.预处理 1.4.混入(Mixins) 1.5.嵌套 1.6.运算 1.7.函数 1.8.继承 1.9.作用域 1.10.注释 二.Sass 2.1.变量 2.2.嵌套 2.3.导入 2.4.mixin 混入 2.5.扩展/继承 2.6.运算 2.7.函数 2.8.流程控制 三.CoffeeScript 3.1.安装 3.2.使用 四.TypeScript 4.1.安装 4.2.使用typesc

HTML5——前端预处理技术(Less、Sass、CoffeeScript)

一.Less 1.1.概要 Less是一种动态样式语言,Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数.LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行. Less是一个JS库,所以他可以在客户端运行,相对Sass则必须在服务端借助Ruby运行 中文

CoffeeScript不是一门值得学习的语言

译注:看到这篇文章时发现不论在国内还是国外的网站上都有很多人在争论,很有意思.不过令人汗颜的是有些国人似乎只看了标题就开始吵了起来,如果有兴趣,请耐心看完. ======= 一门不能改变你编程的思维方式的语言是不值得学习的--艾伦·佩利(Alan Perlis) CoffeeScript是一种能够将你用特殊规则书写出的文本转换成一些其他文本的语言,而转换后的文本碰巧就是JavaScript源代码.它经常被描述为将一种编程语言"编译"成JavaScript,就像将其它语言编译成汇编或者J

CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

sublime 插件

代码对齐: Alignment html代码补全:  Emmet CoffeeScript语法:  Better CoffeeScript css格式化:  CSS Format less语法:  LESS js代码格式化: JsFormat 代码注释文档:  DocBlockr 代码美化: HTML-CSS-JS Prettify 去除行尾空格:  TrailingSpaces 语法检测:  SublimeLinter, SublimeLinter-coffeelint, SublimeLin

自动化测试开发环境搭建

首先用vagrant配置一个Linux开发环境: Vagrant只是一个让你可以方便设置你想要的虚拟机的便携式工具,它底层支持VirtualBox.VMware甚至AWS作为虚拟机系统,本书中我们将使用VirtualBox来进行说明,所以第一步需要先安裝Vagrant和VirtualBox. VirtualBox安装:下载地址,麻瓜安装,任意路径https://www.virtualbox.org/wiki/Downloads Vagrant安装:最新版本的Vagrant已经无法通过gem命令来

sublime text 3 前端开发常用插件

代码对齐: Alignment html代码补全:  Emmet CoffeeScript语法:  Better CoffeeScript css格式化:  CSS Format less语法:  LESS js代码格式化: JsFormat 代码注释文档:  DocBlockr 代码美化: HTML-CSS-JS Prettify 去除行尾空格:  TrailingSpaces 语法检测:  SublimeLinter, SublimeLinter-coffeelint, SublimeLin