Coffeescript知识积累

• 编译器:

  •   Node.js
      npm: npm install -g coffee-script
      命令:
        $ coffee -c test.coffee   //创建test.js
        $ coffee -cw test.coffee  //test.coffee每次更新时重新编译
        $ coffee -c src -o js     //编译src目录下所有.coffee脚本，并将结果放入js目录
        $ coffee -wc src -o js    //每当文件更新时重新编译

• 变量：

  •   message = "Ready for some values";
      alert(message);

• 操作符：

  •   CoffeeScript----------------JavaScript
        ==,is                         ===
       !=, isnt                       !==
       not                            !
       and                            &&
       or                             ||
       true yes on                   true
       false no off                  false
       示例：
        if paid() and test() is on then pour()
        addCaffeine() if not Decaf()
        addCaffeine() unless Decaf()
        if 2 < newLevel < 5 then alert "In Range!"
        not:
          if not cupsOfCoffee? then cupsOfCoffee = 0
          cupsOfCoffee = 0 unless cupsOfCoffee?
          cupsOfCoffee ?= 0

• 函数：

  •   test = ->
        confirm "Ready for some Coffee?"
      返回字符串：
        test = ->
          answer = confirm "Ready for some Coffee?"
          "Your answer is " + answer   // "Your answer is #{answer}"
      带参数：
        test = (message) ->
          answer = confirm message
          "Your answer is #{answer}"
      带默认参数：
        test = (message="Ready for some Coffee?") ->
          answer = confirm message
          "Your answer is #{answer}"
      调用：
        test()
        test("Hello")
        test "Hello"

• 条件语句：

  •   If：
        if age < 18
          alert "Under age"
        alert 'Under age' if age < 18
    
    
        if age < 18 then alert 'Under age'
      If...else:
        if age < 18
          alert 'Under age'
        else
          alert 'of age'
        if age < 18 then alert 'Under age' else alert 'of age'
      switch:
        message = switch cupsOfCoffee
          when 0 then 'Asleep'
          when 1 then 'Eyes Open'
          when 2 then 'Buzzed'
          else 'Dangerous'

• 判断undefined:

  •   if cupsOfCoffee?
        alert 'it exists!'
      alert 'it exists!' if cupsOfCoffee?
    
    
      if coffeePot?
        coffeePot.brew()
      coffeePot?.brew()
      只有方法存在的时候才调用：
        vehicle.start_engine?().shift_gear?()
    Ranges:
      range = [1..4]
      range = [1...4]
      range = [1..-1]
    
      start = 5
      end = 10
      range = [start..end]

• 数组：

  •   storeLocations = ['Orlando','Winter Park','Sanford']
      storeLocations = [
        'Orlando'
        'Winter Park'
        'Sanford'
      ]

• 循环:

  •  storeLocations.forEach(location, index) ->
        alert "Location: #{location}"
      for location in storeLocations
        alert "Location: #{location}"
      alert "Location: #{location}" for location in storeLocations
      geoLocate(loc) for loc in storeLocations when loc isnt 'Sanford'
    
    
      newLocs = []
      for loc in storeLocations
        newLocs.push loc if loc isnt 'Sanford'
      newLocs = (loc for loc in storeLocations when loc isnt 'Sanford')

• Splat(平板参数):

  •   searchLocations = (brand, cities...) ->
        "looking for #{brand} in #{cities.join(',')}"
      searchLocations 'Starducks', 'Orlando'
      searchLocations 'Starducks', 'Orlando', 'Winter Park'
      params = ['Starducks', 'Orlando', 'Winter Park']
      searchLocations(params...)

• hash键值对：

  • coffee = name: 'French', strength: 1
      coffee = 
          name: 'French'
          strength: 1
          brew: -> alert("brewing #{@name}")
          pour: (amount=1) ->
            if amount is 1
              "Poured a single cup"
            else
              "Poured #{amount} cups"
      改写为类:
        class Coffee
          constructor: (@name, @strength=1) ->
          brew: -> alert("brewing #{@name}")
          pour: (amount=1) ->
            if amount is 1
              "Poured a single cup"
            else
              "Poured #{amount} cups"
    
    
        french = new Coffee("French",2)
        french.brew()
      调用:
        coffee.brew()
        coffee.pour(2)
      使用of来迭代对象：
        coffees =
          french:
            strength: 1
            in_stock: 20
          italian:
            strength: 2
            in_stock: 12
          decaf:
            strength: 0
            in_stock: 0
        "#{coffee} has #{attrs.in_stock}" for coffee, attrs of coffees
        to_print = for coffee, attrs of coffees when attrs.in_stock > 0
          "#{coffee} has #{attrs.in_stock}"
        to_print.join ","
        javascript:
          var attrs.coffee, to_print;
          to_print = (function(){
            var _results = [];
            for(coffee in coffees){
              attrs = coffees[coffee];
              if(attrs.in_stock > 0) _results.push("" + coffee + "has " + attrs.in_stock);
            }
            return _results;
          })();
          to_print.join(",")
    bind:
      javascript:
        $("#tabs ul li a").bind({
          click: changeTab;
          mouseenter: showNumberOfFlights,
          mouseleave: hideNumberOfFlights,
        });
      coffeescript:
        $("#tabs ul li a").bind
          click: changeTab;
          mouseenter: showNumberOfFlights
          mouseleave: hideNumberOfFlights

• 复杂例子：

  • e.g.1
      function showFlights(activeDiv){
        $("#tab div").hide();
        if(fetchingFlights){
          fetchingFlights.abort();
        }
        fetchingFlights = $.ajax('/flights', {
          data: { date: activeDiv },
          cache: false,
          error: function(result) {
            if(result.statusText != "abort") {
              $('#tabs #error').show();
            }
          }
        });
      }
      coffeescript:
        showFlights = (activeDiv) ->
          $("#tabs div").hide()
          if fetchingFlights
            fetchingFlights.abort()
          fetchingFlights = $.ajax '/flights'
            data:
              date: activeDiv
            cache: false
            error: (result) ->
              if result.statusText isnt 'abort'
                $('#tabs #error').show()
    e.g.2
      var filteredFlights = [];
      $.each(currentFlights, function(index, flight){
        if(stops == '2+' || flight.routing == 0){
          filteredFlights.push(flight);
        }
      });
      coffeescript:
        filteredFlights = []
        $.each currentFlights, (index, flight) ->
          if stops is '2+' or flight.routing is 0
            filteredFlights.push flight
        更进一步:
          filteredFlights = (flight for flight in currentFlights when stops is '2+' or flight.routing is 0)

• 类：

  •   class Coffee
        constructor: (@name, @strength=1) ->
        brew: -> alert("brewing #{@name}")
        pour: (amount=1) ->
          if amount is 1
            "Poured a single cup"
          else
            "Poured #{amount} cups"
        pourClick: ->
          $("#pour-#{@name}").click (event) =>
            if @inventory isnt 0
              @inventory -= 1
              alert "Poured a cup of #{@name}"
      class MaxgoodHouse extends Coffee
        constructor: (@name, @strength=0)
          @brand = "Maxgood House"
        brew: -> alert("Brewing #{@brand} #{@name}")
        pour: (amount=1) ->
          "#{super(amount)}, but it sucks"
    
    
    使用类来封装：
      class SelectFlights
        constructor: (@fetchingFlights=null) ->
        $("#tabs ul li a").bind
          click: @changeTab
        $("#tabs #error a").click (event) =>
          event.preventDefault()
          @showFlights $("#tabs li a.active").attr("href")
        showFlights: (activeDiv) ->
        changeTab: (event) =>

• JQuery与Coffee Script的转变：

  •   JQuery：
        JQuery(function($){
          function changeTab(e) {
            e.preventDefault();
            $("#tabs li a.active").removeClass("active");
            $(this).addClass("active");
          }
    
    
          $("#tabs ul li a").click(changeTab);
        });
      Coffee:
        $ ->
          changeTab = (e) ->
            e.preventDefault()
            $("#tabs li a.active").removeClass "active"
            $(@).addClass "active"
    
    
          $("#tabs ul li a").click changeTab