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()

     

coffeeScript 语法总结的更多相关文章

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

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

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

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. CoffeeScript飞一样的写javascript

    之前看到同事在使用coffeescript写js,当我看到那简介的coffee文件,就深深的被coffescript吸引了,简洁的语法,熟练之后会大大提升javascript的开发速度,写脚本也能像飞 ...

  4. AngularJS + CoffeeScript

    AngularJS + CoffeeScript 前端开发环境配置详解 AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全 ...

  5. typescript和coffeescript简介

    typescript 1.什么是typescript?和JavaScript有什么关系? 1.它是一门独立的语言,实现了自己的编译器   2.它的目标代码是JavaScript(很多语言的目标代码是机 ...

  6. AngularJS + CoffeeScript 前端开发环境配置详解

    AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...

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

    一.Less 1.1.概要 Less是一种动态样式语言,Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 将 C ...

  8. 【干货分享】前端面试知识点锦集02(CSS篇)——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  9. select2

    .select2-container .select2-choice { height: 34px; line-height: 34px; } .自定义 组件高度 在css 里面设置 .select2 ...

随机推荐

  1. freemarker解析模板报错问题

    在确定模板文件代码无误的情况下,导致报错的原因大概有以下原因: 模板文件编码改变了(比如eclipse中的项目部署到tomcat下,而忘记设置tomcat编码就会导致读取模板文件编码不正确,导致程序解 ...

  2. HDU 1257 最少拦截系统(贪心)

    解题思路:用一个vector存下数据,从头开始非递增遍历,并把符合条件的删除,一次操作,ans++,当vector为空时退出循环.(PS:学到了vector的erase操作,竟然还有返回值,涨姿势了) ...

  3. API 双方认证探讨

    开放 api 已是大势所趋.而 api 这种东西有个特点就是覆水难收.一旦公开出去了,被大量用户使用,一旦修改,就会让广大用户都掉坑里.所以,api 在设计之初就要尽量考虑周全,并预留扩展可能. 目前 ...

  4. linux命令(2):df 磁盘占用

    在这里先讲讲linux命令df的资料: df 命令: linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信 ...

  5. [实变函数]3.2 可测集 (measurable set)

    1 $\bbR^n$ 中集合 $E$ 称为可测的 (measurable), 如果 $$\bee\label{3.2:Caratheodory} m^*T=m^*(T\cap E)+m^*(T\cap ...

  6. nginx优化配置

    一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1.  worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...

  7. Linux系统时间设置(转载)

    Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel中的时钟,而硬件时钟则是主板上由电池供电的时钟, ...

  8. spring mvc视频

    视频内容: 1.下载spring mvc以及spring mvc示例演示http://pan.baidu.com/s/1kTHRfDH 2.配置完善&初步探究控制器拦截http://pan.b ...

  9. Java基础-事件处理

  10. bat文件创建mysql数据库 数据库名为meter

    -- 详见附件,已自测通过      //修改为mysql安装路径     C:\Program Files\MySQL\MySQL Server 5.5"      createtestd ...