coffeescript - what's good

Post on 02-Jul-2015

1.759 Views

Category:

Travel

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

JS

TRANSCRIPT

CoffeeScript

2010.10.10Outsider����������� ������������������  at����������� ������������������  FRENDS

What’s good?

“CoffeeScript����������� ������������������  is����������� ������������������  Beautiful&����������� ������������������  I����������� ������������������  Never����������� ������������������  Want����������� ������������������  to����������� ������������������  Write����������� ������������������  Plain����������� ������������������  

JavaScript����������� ������������������  Again

”Sam����������� ������������������  Stephenson

(prototype.js����������� ������������������  creator)

좋은����������� ������������������  것과익숙하지����������� ������������������  않은����������� ������������������  것을구별하기가쉽지����������� ������������������  않다.

ComparingJavaScript����������� ������������������  &����������� ������������������  CoffeeScript

Function����������� ������������������  Syntax

$("a").click(function(event)����������� ������������������  {����������� ������������������  ����������� ������������������  $(this).addClass("busy");})

$("a").click(function(event)����������� ������������������  {����������� ������������������  ����������� ������������������  $(this).addClass����������� ������������������  "busy"})

$("a").click(function(event)����������� ������������������  {����������� ������������������  ����������� ������������������  $(@).addClass����������� ������������������  "busy"})

$("a").click����������� ������������������  (event)����������� ������������������  ->����������� ������������������  ����������� ������������������  $(@).addClass����������� ������������������  "busy"

Loop����������� ������������������  Syntax

var����������� ������������������  data����������� ������������������  =����������� ������������������  [];for����������� ������������������  (var����������� ������������������  i����������� ������������������  =����������� ������������������  0;����������� ������������������  i����������� ������������������  <����������� ������������������  84;����������� ������������������  i++)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  data.push(i����������� ������������������  *����������� ������������������  10����������� ������������������  /����������� ������������������  84);}

data����������� ������������������  =����������� ������������������  []for����������� ������������������  i����������� ������������������  in����������� ������������������  [0..83]����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  data.push(i����������� ������������������  *����������� ������������������  10����������� ������������������  /����������� ������������������  84)

data����������� ������������������  =����������� ������������������  []data����������� ������������������  =����������� ������������������  i����������� ������������������  *����������� ������������������  10����������� ������������������  /����������� ������������������  84����������� ������������������  for����������� ������������������  i����������� ������������������  in����������� ������������������  [0..83]

data����������� ������������������  =����������� ������������������  i����������� ������������������  *����������� ������������������  10����������� ������������������  /����������� ������������������  84����������� ������������������  for����������� ������������������  i����������� ������������������  in����������� ������������������  [0..83]

List����������� ������������������  Comprehensions

init_board:����������� ������������������  function()����������� ������������������  {����������� ������������������  ����������� ������������������  this.board����������� ������������������  =����������� ������������������  new����������� ������������������  Array(WIDTH);����������� ������������������  ����������� ������������������  for����������� ������������������  (var����������� ������������������  x����������� ������������������  =����������� ������������������  0;����������� ������������������  x����������� ������������������  <����������� ������������������  this.board.length;����������� ������������������  x++)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x]����������� ������������������  =����������� ������������������  new����������� ������������������  Array(HEIGHT)����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  for����������� ������������������  (var����������� ������������������  y����������� ������������������  =����������� ������������������  0;����������� ������������������  y����������� ������������������  <����������� ������������������  this.board[x].length;����������� ������������������  y++)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x][y]����������� ������������������  =����������� ������������������  false;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  ����������� ������������������  }}

init_board:����������� ������������������  ->����������� ������������������  ����������� ������������������  this.board����������� ������������������  =����������� ������������������  new����������� ������������������  Array(WIDTH)����������� ������������������  ����������� ������������������  for����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  x����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  in����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x]����������� ������������������  =����������� ������������������  new����������� ������������������  Array(HEIGHT)����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  for����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  y����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  in����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x]����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x][y]����������� ������������������  =����������� ������������������  false����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

init_board:����������� ������������������  ->����������� ������������������  ����������� ������������������  @board����������� ������������������  =����������� ������������������  for����������� ������������������  x����������� ������������������  in����������� ������������������  [0...WIDTH]

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x]����������� ������������������  =����������� ������������������  new����������� ������������������  Array(HEIGHT)����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  for����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  y����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  in����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x]����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  this.board[x][y]����������� ������������������  =����������� ������������������  false����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

init_board:����������� ������������������  ->����������� ������������������  ����������� ������������������  @board����������� ������������������  =����������� ������������������  for����������� ������������������  x����������� ������������������  in����������� ������������������  [0...WIDTH]

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  for����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  y����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  in����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [0...HEIGHT]����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  false����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

init_board:����������� ������������������  ->����������� ������������������  ����������� ������������������  @board����������� ������������������  =����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (false����������� ������������������  for����������� ������������������  y����������� ������������������  in����������� ������������������  [0...����������� ������������������  HEIGHT]����������� ������������������  for����������� ������������������  x����������� ������������������  in����������� ������������������  [0...WIDTH])

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  

Setting����������� ������������������  Fields

constructor:����������� ������������������  function(keys,����������� ������������������  tokens)����������� ������������������  {����������� ������������������  ����������� ������������������  this.keys����������� ������������������  =����������� ������������������  keys;����������� ������������������  ����������� ������������������  this.tokens����������� ������������������  =����������� ������������������  tokens;}

constructor:����������� ������������������  (keys,����������� ������������������  tokens)����������� ������������������  ->����������� ������������������  ����������� ������������������  this.keys����������� ������������������  =����������� ������������������  keys����������� ������������������  ����������� ������������������  this.tokens����������� ������������������  =����������� ������������������  tokens

constructor:����������� ������������������  (keys,����������� ������������������  tokens)����������� ������������������  ->����������� ������������������  ����������� ������������������  @keys����������� ������������������  =����������� ������������������  keys����������� ������������������  ����������� ������������������  @tokens����������� ������������������  =����������� ������������������  tokens

constructor:����������� ������������������  (@keys,����������� ������������������  @tokens)����������� ������������������  ->

Defensive����������� ������������������  Programming

var����������� ������������������  country����������� ������������������  =����������� ������������������  null;if����������� ������������������  (typeof����������� ������������������  model����������� ������������������  !==����������� ������������������  ����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  typeof����������� ������������������  model.profile����������� ������������������  ===����������� ������������������  'function')����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile();

����������� ������������������  ����������� ������������������  if����������� ������������������  (profile����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  profile.location����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  profile.location.country)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile.location.country.toString();����������� ������������������  ����������� ������������������  }}

country����������� ������������������  =����������� ������������������  nullif����������� ������������������  ����������� ������������������  typeof����������� ������������������  model����������� ������������������  isnt����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  typeof����������� ������������������  model.profile����������� ������������������  is����������� ������������������  ����������� ������������������  'function'����������� ������������������  ����������� ������������������  ����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile()

����������� ������������������  ����������� ������������������  if����������� ������������������  ����������� ������������������  profile����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  profile.location����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  profile.location.country����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile.location.country.toString()����������� ������������������  ����������� ������������������  

country����������� ������������������  =����������� ������������������  nullif����������� ������������������  ����������� ������������������  typeof����������� ������������������  model����������� ������������������  isnt����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  typeof����������� ������������������  model.profile����������� ������������������  is����������� ������������������  ����������� ������������������  'function'����������� ������������������  ����������� ������������������  ����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile()

����������� ������������������  ����������� ������������������  if����������� ������������������  ����������� ������������������  profile����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  profile.location

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile.location.country?.toString()����������� ������������������  ����������� ������������������  

country����������� ������������������  =����������� ������������������  nullif����������� ������������������  ����������� ������������������  typeof����������� ������������������  model����������� ������������������  isnt����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  typeof����������� ������������������  model.profile����������� ������������������  is����������� ������������������  ����������� ������������������  'function'����������� ������������������  ����������� ������������������  ����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile()

����������� ������������������  ����������� ������������������  if����������� ������������������  ����������� ������������������  profile����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile.location?.country?.toString()����������� ������������������  ����������� ������������������  

country����������� ������������������  =����������� ������������������  nullif����������� ������������������  ����������� ������������������  typeof����������� ������������������  model����������� ������������������  isnt����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  typeof����������� ������������������  model.profile����������� ������������������  is����������� ������������������  ����������� ������������������  'function'����������� ������������������  ����������� ������������������  ����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile()

����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile?.location?.country?.toString()����������� ������������������  ����������� ������������������  

country����������� ������������������  =����������� ������������������  nullif����������� ������������������  ����������� ������������������  typeof����������� ������������������  model����������� ������������������  isnt����������� ������������������  'undefined'����������� ������������������  &&����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  model����������� ������������������  &&����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  profile����������� ������������������  =����������� ������������������  model.profile?()?

����������� ������������������  ����������� ������������������  country����������� ������������������  =����������� ������������������  profile?.location?.country?.toString()����������� ������������������  ����������� ������������������  

country����������� ������������������  =����������� ������������������  null

����������� ������������������  profile����������� ������������������  =����������� ������������������  model?.profile?()?

country����������� ������������������  =����������� ������������������  profile?.location?.country?.toString()����������� ������������������  ����������� ������������������  

����������� ������������������  profile����������� ������������������  =����������� ������������������  model?.profile?()?

country����������� ������������������  =����������� ������������������  profile?.location?.country?.toString()����������� ������������������  ����������� ������������������  

����������� ������������������  profile����������� ������������������  =����������� ������������������  model?.profile?()?

country����������� ������������������  =����������� ������������������  profile����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ?.location?.country?.toString()

����������� ������������������  

country����������� ������������������  =����������� ������������������  model?.profile?()����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ?.location?.country?.toString()

Bare����������� ������������������  Objects

$.ajax({����������� ������������������  ����������� ������������������  url:����������� ������������������  path,����������� ������������������  ����������� ������������������  timeout:����������� ������������������  5,����������� ������������������  ����������� ������������������  data:����������� ������������������  {from:����������� ������������������  "workspace"},

����������� ������������������  ����������� ������������������  dataType:����������� ������������������  "html",����������� ������������������  ����������� ������������������  success:����������� ������������������  function(data)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  $("#result").html(data);����������� ������������������  ����������� ������������������  }});

$.ajax({����������� ������������������  ����������� ������������������  url:����������� ������������������  path,����������� ������������������  ����������� ������������������  timeout:����������� ������������������  5,����������� ������������������  ����������� ������������������  data:����������� ������������������  {from:����������� ������������������  "workspace"},

����������� ������������������  ����������� ������������������  dataType:����������� ������������������  "html",����������� ������������������  ����������� ������������������  success:����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  ->����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  return����������� ������������������  $("#result").html(data)����������� ������������������  ����������� ������������������  })

$.ajax����������� ������������������  {����������� ������������������  ����������� ������������������  url:����������� ������������������  path����������� ������������������  ����������� ������������������  timeout:����������� ������������������  5����������� ������������������  ����������� ������������������  data:����������� ������������������  {from:����������� ������������������  "workspace"}

����������� ������������������  ����������� ������������������  dataType:����������� ������������������  "html"����������� ������������������  ����������� ������������������  success:����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  ->����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $("#result").html����������� ������������������  data����������� ������������������  ����������� ������������������  }

$.ajax����������� ������������������  ����������� ������������������  ����������� ������������������  url:����������� ������������������  path����������� ������������������  ����������� ������������������  timeout:����������� ������������������  5����������� ������������������  ����������� ������������������  data:����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  from:����������� ������������������  "workspace"����������� ������������������  ����������� ������������������  dataType:����������� ������������������  "html"����������� ������������������  ����������� ������������������  success:����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  ->����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $("#result").html����������� ������������������  data����������� ������������������  ����������� ������������������  

Function����������� ������������������  Binding

function����������� ������������������  request����������� ������������������  ()����������� ������������������  {����������� ������������������  ����������� ������������������  $.get(this.person.url,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (function(data)����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $(this.el).html(data);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }).bind(this)����������� ������������������  ����������� ������������������  )}

request����������� ������������������  =����������� ������������������  ()����������� ������������������  ->����������� ������������������  ����������� ������������������  $.get(this.person.url,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  ->����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $(this.el).html(data);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ).bind(this)����������� ������������������  ����������� ������������������  )

request����������� ������������������  =����������� ������������������  ()����������� ������������������  ->����������� ������������������  ����������� ������������������  $.get(this.person.url,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  ->����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $(����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  @el).html����������� ������������������  data����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ).bind(@)����������� ������������������  ����������� ������������������  )

request����������� ������������������  =����������� ������������������  ()����������� ������������������  ->����������� ������������������  ����������� ������������������  $.get(this.person.url,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  =>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $(@el).html����������� ������������������  data����������� ������������������  ����������� ������������������  ����������� ������������������  )

request����������� ������������������  =����������� ������������������  ()����������� ������������������  ->����������� ������������������  ����������� ������������������  $.get����������� ������������������  this.person.url,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (data)����������� ������������������  =>����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  $(@el).html����������� ������������������  data����������� ������������������  ����������� ������������������  ����������� ������������������  

Bad����������� ������������������  Things

Compileis����������� ������������������  

inconvenience

Debuggingis

hard

ButIt’s����������� ������������������  Coming

Short����������� ������������������  SourceMap����������� ������������������  Demo

http://www.youtube.com/watch?v=UAGAB-yT0lQ

Tools����������� ������������������  for����������� ������������������  CoffeeScript

js2coffeeconvert����������� ������������������  JavaScript����������� ������������������  to����������� ������������������  CoffeeScript

http://js2coffee.org/

CoffeeTableBookmarklet����������� ������������������  for����������� ������������������  CoffeeScript����������� ������������������  Console

http://code.alecperkins.net/coffeetable/

cakeSimple����������� ������������������  Build����������� ������������������  System����������� ������������������  like����������� ������������������  Make

https://github.com/jashkenas/coffee-script/wiki/[HowTo]-Compiling-and-Setting-Up-Build-Tools

CoffeeKupMarkup����������� ������������������  as����������� ������������������  CoffeeScript

http://coffeekup.org/

Thank����������� ������������������  you.

@Outsiderisoutsideris@gmail.com

http://blog.outsider.ne.kr

top related