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. 黄聪:VPS实现自动定时备份网站数据以及Mysql数据库到百度云同步盘

    建站多了,备份成了头疼的问题,因为你不知道你的VPS什么时候会宕机或者服务商跑路,一旦网站数据丢失,那么相当于前功尽弃了,所以自己研究出了一套自动备份的方法. 需要的东西: 1.一个VPS(虚拟空间没 ...

  2. 黄聪:异步加载JS的4种方式(详解)

    方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...

  3. eclipse下编译hadoop源代码(转)

    hadoop是一个分布式存储和分布式计算的框架.在日常使用hadoop时,我们会发现hadoop不能完全满足我们的需要,我们可能需要修改hadoop的源代码并重新编译.打包. 下面将详细描述如何从sv ...

  4. Platform Invoke

    PInvoke 允许managed code 来调用在DLL中实施的unmanged function. Platform invoke relies on metadata to locate ex ...

  5. 手把手教你玩转Git分布式版本控制系统! (转载)

    目录 Git诞生历史 Git环境准备 Git安装部署 Git常用命令 Git基本操作 Git管理分支结构 Git管理标签 GitLab安装部署 GitHub托管服务 Git客户端工具 Git诞生历史 ...

  6. JAVA 拆分窗口

    //拆分窗口 import java.awt.*; import javax.swing.*; public class Jiemian8 extends JFrame{ JSplitPane cf; ...

  7. filter的执行顺序

    一直没有仔细去研究下filter ,最近系统的测试了下: 先看代码吧 FirstFilter.java ================== package com.test.filter; impo ...

  8. *(volatile unsigned long *) 语法

    #define GPJ2CON (*(volatile unsigned long *) 0xE0200280) 开始对于上面的语法不太理解,但通过拆分,我们可以看的更明白: 1.(unsigned ...

  9. C Primer Plus(第五版)2

    在本章中你将学习下列内容------------------------------------------------------------------1.运算符:= 2.函数:main(),pr ...

  10. SQL语句的执行计划(oracle表的三种链接方式)

    SQL语句我们写完之后,就是分析其优化,这就要求我们了解到底数据是怎么存储. 首先我们需要了解,表链接的几种方式 nested loop join sort merge join hash join ...