重构的Jquery CoffeeScript的代码到单独的文件

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的示例。临时画布函数之前的第一组代码需要在文档加载时调用。任何例子或建议表示赞赏。

谢谢。

Answer 1

我试图这样做，但我在控制台get方法没有定义的错误......

听起来像是你忘了功能的包装，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都提供了将代码分成多个文件的功能。