重構的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都提供了將代碼分成多個文件的功能。