zoukankan      html  css  js  c++  java
  • CoffeeScript 入门笔记

    写在前面:

    被英文版指南坑了...闹了很久才明白.coffee怎么用。安装前需要有稳定版 Node.js, 和 npm (Node Package Manager). 借助 npm 可以安装 CoffeeScript。安装之后, 运行coffee命令 'coffee -c xxx.coffee' 以执行脚本, 编译.coffee文件到 .js 文件便可直接被.html引用了。另外sublime可以直接install CoffeeScript插件以支持代码高亮(新增编译系统后也可以Build嘎嘎)!

    <!--正文废话之间的分割线-->

    首先语法方面coffee采用了类似python的缩进以代替分号括号的形式,其次表述上面对JS进行了较大简化。但这也不意味着它脱离了JS,例如JS中.innerHTML在coffee中还是.innerHTML而不是jQuery中的.html(),当且仅当引入了jQuery库时才可以用jQuery的函数。

    以下是一些CoffeeScript的语法:

    函数

    square = (x) -> x * x 

     即 var square = function(x) { return x * x; };

    //可以看出省略了'var', 'function',并且函数通过一组可选的圆括号包裹的参数, 一个箭头, 一个函数体来定义。参数可设定默认值。

    对象和数组

    song = ["do", "re", "mi", "fa", "so"]
    
    kids =
        brother:
            name: "Max"
            age: 11
        sister:
            name: "Ida"
            age: 9

     //数组的方括号是不可省略的- -,对象的定义采用缩进代替花括号。

    if,else

    彩蛋:date = if 'friday' then 'sue' else 'jill' 等同于 var date = friday ? sue : jill;

    if,then,else if,else,is,isnt跟麦当劳套餐似的- -随意组合,惊喜不断

    不定数量的参数

    awardMedals = (first, second, others...) ->
      gold   = first
      silver = second
      rest   = others

    //这个太魔性了!省去了写JS的arguments冗长代码的时间

    for,while

    和python很像的,大致是for a in b, 或 for a in ['xx', 'xx', 'xx'], 或 for a in b when x is(isnt) y

    彩蛋1:countdown = (num for num in [10..1]),这是和上一条的结合...省了太多事了- - 

    彩蛋2:lyrics = while num -= 1, while可返回每次迭代结果

    补充一句:有了上一条魔性的... 来表示'多个',可以自己引申很多用法,比如选出数组中的第四个到倒数第三个可以写成 numbers[3...-2]

    一些运算符

    表达式中引用已知变量

    print "My name is #{@name}"

    等同于print("My name is " + this.name);  @代表this, #{}代表引用的是变量不是字符串。

    类与继承

    举个栗子意思意思:

    class Animal
      constructor: (@name) ->
    
      move: (meters) ->
        alert @name + " moved #{meters}m."

    等同于:

    var Animal = (function() {
      function Animal(name) {
        this.name = name;
      }
    
      Animal.prototype.move = function(meters) {
        return alert(this.name + (" moved " + meters + "m."));
      };
    
      return Animal;
    
    })();

    继承:class Snake extends Animal

    Switch

    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

    额外彩蛋:

    1. 链式比较 e.g. healthy = 200 > cholesterol > 60

    2. 转行写就代表实际真的转行喔

    html = """
           <strong>
             cup of coffeescript
           </strong>
           """

    先总结到这里,可能还有我没发现的彩蛋( ̄_, ̄ ),边用边学。

  • 相关阅读:
    Python爬取网页信息
    C++面向程序设计(第二版)课后习题答案解析
    蓝桥杯——算法分析
    python爬虫——数据爬取和具体解析
    python爬虫——爬取网页数据和解析数据
    Python文件的读写操作
    C++第三章课后作业答案及解析---指针的使用
    C语言蓝桥杯比赛原题和解析
    Web开发技术---简单的登录验证
    C++面向对象程序设计第三章习题答案解析
  • 原文地址:https://www.cnblogs.com/enzozo/p/4352261.html
Copyright © 2011-2022 走看看