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