Рефакторинг кода JQuery Coffeescript в отдельные файлы

Question

У меня есть файл coffeescript, который называется shape.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

Я хотел бы преобразовать некоторые из этих строк в свои собственные методы (в идеале в отдельные файлы). Я попытался сделать это, но я получаю ошибки метод не определен в консоли, и я не смог найти пример с использованием jquery. Первая группа кода перед временной функцией canvas должна быть вызвана при загрузке документа. Любые примеры или советы приветствуются.

Спасибо.

Answer 1

Я пытался сделать это, но я получаю ошибки метода не определены в консоли ...

Звучит так, будто вы забыли обёртку функций, которую CoffeeScript помещает вокруг каждого файла. Это распространенная ошибка. Чтобы сделать переменные глобальными, вам необходимо прикрепить их к window (например, window.x = y). Удобно, что this / @ указывает на window во внешней области, что позволяет писать @x = y.

Вот как я могу изменить ваш код:

# 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")

И

# 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

Обратите внимание, что здесь mouse_down_selected имеет локальную область действия, а объекты, созданные в init, являются глобальными. Такая структура файлов позволяет легко избежать загрязнения глобального пространства имен.

(Следует также упомянуть, что -Number(x) является избыточным; оператор - уже выполняет приведение к числу.)

Answer 2

http://requirejs.org/ или https://github.com/sstephenson/stitch оба предоставляют функциональность для разделения кода на несколько файлов.