Refactoring Jquery coffeescript code into separate files

Question

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.

You'd have to split your code into functions that can be called from within the DOMReady callback. See this question on "includes" http://stackoverflow.com/questions/7718121/is-there-a-way-to-include-file-in-coffee-script — Ricardo Tomasi, Oct 13 '11 at 03:39

score 1 · Accepted Answer · answered Oct 13 '11 at 16:10

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.)

score 0 · Answer 2 · answered Oct 13 '11 at 04:32

0

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

answered Oct 13 '11 at 04:32

liammclennan

5,295
3
34
30

Refactoring Jquery coffeescript code into separate files

2 Answers2