- 编译器:
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
Coffeescript知识积累
最新推荐文章于 2023-07-18 09:10:42 发布