Question

我有一个名为shapes.coffee的coffeescript文件：

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

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

2 个答案: