Refactoring Jquery coffeescript code into separate files

I have a coffeescript file called shapes.coffee:

jQuery ->

  offset = $('#drawing_canvas').offset()
  mouse_vertical_position = -Number(offset.top)
  mouse_horizontal_position = -Number(offset.left)

  canvas = document.getElementById("drawing_canvas")
  context = canvas.getContext("2d")
  container = canvas.parentNode

  temporary_canvas = document.createElement("canvas")
  temporary_canvas.id = "temporary_canvas"
  temporary_canvas.height = canvas.height
  temporary_canvas.width = canvas.width
  container.appendChild(temporary_canvas)
  temporary_context = temporary_canvas.getContext("2d")

  mouse_down_selected = false

  $('#temporary_canvas').mousedown (e) ->
    mouse_down_selected = true
    mouse_horizontal_position = -Number(offset.left)
    mouse_vertical_position = -Number(offset.top)
    mouse_horizontal_position += e.pageX
    mouse_vertical_position += e.pageY

  $('body').mouseup ->
   mouse_down_selected = false

I would like to refactor some of these lines 开发者_运维技巧into their own methods (ideally in separate files). I have attempted to do this but I get method not defined errors in the console, and I have been unable to find an example involving jquery. The first group of code before the temporary canvas function would need to be called on document load. Any examples or advice is appreciated.

Thanks.

I have attempted to do this but I get method not defined errors in the console...

Sounds like you're forgetting the function wrapper that CoffeeScript puts around each file. This is a common mistake. To make variables global, you need to attach them to window (e.g. window.x = y). Conveniently, this/@ points to window in the outermost scope, allowing you to write @x = y.

Here's how I might refactor your code:

# init.coffee

jQuery ->

  offset = $('#drawing_canvas').offset()
  @mouse_vertical_position = -Number(offset.top)
  @mouse_horizontal_position = -Number(offset.left)

  @canvas = document.getElementById("drawing_canvas")
  @context = canvas.getContext("2d")
  @container = canvas.parentNode

  @temporary_canvas = document.createElement("canvas")
  temporary_canvas.id = "temporary_canvas"
  temporary_canvas.height = canvas.height
  temporary_canvas.width = canvas.width
  container.appendChild(temporary_canvas)
  @temporary_context = temporary_canvas.getContext("2d")

And:

# events.coffee

jQuery ->

  mouse_down_selected = false

  $('#temporary_canvas').mousedown (e) ->
    mouse_down_selected = true
    mouse_horizontal_position = -Number(offset.left)
    mouse_vertical_position = -Number(offset.top)
    mouse_horizontal_position += e.pageX
    mouse_vertical_position += e.pageY

  $('body').mouseup ->
   mouse_down_selected = false

Note that here, mouse_down_selected has local scope, while the objects created in init are global. This sort of file structure makes it easy to avoid polluting the global namespace.

(It also bears mentioning that -Number(x) is redundant; the - operator already performs coercion to a number.)

http://requirejs.org/ or https://github.com/sstephenson/stitch both provide functionality to separate code into multiple files.