• 是时候用Coffeescript了



    CoffeeScirpt是什么?

    1. CoffeeScript是一门小巧的语言脚本语言,会编译为JavaScript,并且CoffeeScript产生的JavaScript是可以通过JavaScript Lint检测的,它的语法风格受到了Ruby和Python影响,很多特性都借鉴于这两种语言。

    2. CoffeeScript是JavaScript的子集,即众所周知的精华部分

    3. JavaScript有很多不为人知的秘密,这些秘密往往让无经验的开发者摔跤。CoffeeScript有原则地选择了一些JavaScript的特性,巧妙地避开了这些不足,解决了该语言的怪癖。

    4. 由于处理运行时错误需要JavaScript相关的知识,要写CoffeeScript还是得了解JavaScript

    5. 从经验值来看,比起纯JavaScript的话,它能减少三分之一甚至一半的代码量。还有,CoffeeScript开有一些优雅的特性,比方说列表解析、原型符号别名和类等等,能够有效的减少需要你的输入。下面左边是 CoffeeScript, 右边是编译后输出的 JavaScript.

    主要特性

    1. CoffeeScript去掉了分号,它会在编译时为你自动添加

    2. CoffeeScript修复了JavaScript中一个最让人头疼的全局变量问题

    3. 函数的最后一个表达式会作为隐式的返回值。换句话说,你不再需要使用return关键字,除非你想早一点从函数中返回

    4. 支持可变参数默认参数

              times = (a = 1, b = 2) -> a * b
      
              sum = (nums...) -> 
                result = 0
                nums.forEach (n) -> result += n
                result
      
    5. 像Ruby一样,方法调用时括号也是可以省略的,但是仅限于函数被至少一个参数时,CoffeeScript会自动的调用这个函数

          alert "Hello world"
      
    6. 流程控制方面的语法糖

          if true != true then "Oh no!!"
           alert "It's cold!" if heat < 5
          unless true
            "Panic"
          if true isnt true
            alert "Opposite day!"
      
    7. 循环和列表解析

          for name in ["Roger", "Roderick", "Brian"]
            alert "Release #{name}"
      
          prisoners = ["Roger", "Roderick", "Brian"]
          release prisoner for prisoner in prisoners when prisoner[0] is "R" 
      
    8. 引入区间的概念

          firstTwo = ["one", "two", "three"][0..1]
          my = "my string"[0..2]
      
    9. 让面向对象容易

    10. 字面量

      # Without braces
      object2 = one: 1, two: 2
      # Using new lines instead of commas
      object3 = 
        one: 1
        two: 2
      
      bitlist = [
        1, 0, 1
        0, 0, 1
        1, 1, 0
      ]
      
      OPERATOR = /// ^ (
        ?: [-=]>             # 函数
         | [-+*/%<>&|^!?=]=  # 复合赋值 / 比较
         | >>>=?             # 补 0 右移
         | ([-+:])1         # 双写
         | ([&|<>])2=?      # 逻辑 / 移位
         | ?.              # soak 访问
         | .{2,3}           # 范围或者 splat
      ) ///
      
      html = """
             <strong>
               cup of coffeescript
             </strong>
             """
      
    11. 存在性探测运算符

      solipsism = true if mind? and not world?
      
      speed = 0
      speed ?= 15
      
      footprints = yeti ? "bear"
      
      zip = lottery.drawWinner?().address?.zipcode
      
    12. 运算符/比较符号
      CoffeeScript会把==操作符转化为===,把!=转化为!==。这是这门语言中我最喜欢的一个特性,也是最简单的一个

    Coffeescript惯用法

    1. Each

         // ECMAScript5 的JavaScript新特性
         array.forEach(function(item, i){  
           myFunction(item)
         });
         # coffee
         myFunction(item) for item in array  
      
    2. Map

         // ECMAScript5 的JavaScript新特性
         var result = array.map(function(item, i){
           return item.name;
         });
         # coffee
         result = (item.name for item in array)
      
    3. 筛选

         // ECMAScript5 的JavaScript新特性
         result = array.filter(function(item, i){
           return item.name == "test"
         });
         #coffee
         result = (item for item in array when item.name is "test")
      
    4. And/or
      CoffeeScript编程风格推荐使用or代替||,使用and代替&&。因为前者看起来更直观。不过,这两种编程风格产生的结果都一样。

    5. is/isnt
      偏爱英语风格的代码的话,也可以使用is代替==,isnt代替!=。

         string = "migrating coconuts"
         string == string # true
         string is string # true
      
    6. 解构赋值

       theBait   = 1000
       theSwitch = 0
       
       [theBait, theSwitch] = [theSwitch, theBait]
       // ---------------------
       futurists =
         sculptor: "Umberto Boccioni"
         painter:  "Vladimir Burliuk"
         poet:
           name:   "F.T. Marinetti"
           address: [
             "Via Roma 42R"
             "Bellagio, Italy 22021"
           ]
      
       {poet: {name, address: [street, city]}} = futurists
       // ---------------------
       text = "Every literary critic believes he will outwit history and have the last word"
       
       [first, ..., last] = text.split " "
       
       // ---------------------
       class Person
         constructor: (options) -> 
           {@name, @age, @height} = options
       
           tim = new Person age: 4
      

    偏爱英语风格的代码的话,也可以使用is代替==,isnt代替!=。

    Debug支持

    Google chrome 已经率先支持coffeescript的debug。

    相关杂项

    1. TypeScript

    2. Dart

    3. Move

    4. LiveScript

    参考资料

    1. CoffeeScript中文手册

    2. CoffeeScript中文

    3. CoffeeScript小书

    4. TodoMVC

    5. 利用CoffeeScript创建一个类似于iOS的主屏幕

    6. Javascript Garden
      Javascript 秘密花园

    7. JavaScript: The Good Parts

    8. JavaScript Lint

  • 相关阅读:
    C#实现断点续传
    记住密码"功能的正确设计
    异常处理的性能开销
    asp.net提高程序性能的技巧(一)
    C#创建文件夹
    一个商人应遵守的22条规矩
    列不属于表--可能出现的问题总结
    存储过程无法得到返回型参数
    通用存储过程(增、删、改、查询分页)
    Mac下使用Charles抓包https接口
  • 原文地址:https://www.cnblogs.com/qinfanpeng/p/coffeescript_share.html
Copyright © 2020-2023  润新知