将 Jquery coffeescript 代码重构为单独的文件

Question

我有一个名为 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

我想将其中一些行重构为它们自己的方法（最好在单独的文件中）。我试图这样做，但我在控制台中得到方法未定义的错误，并且我一直无法找到涉及 jquery 的示例。在加载文档时需要调用临时画布函数之前的第一组代码。感谢任何示例或建议。

谢谢。

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 都提供将代码分成多个文件的功能。