将 Jquery CoffeeScript 代码重构为单独的文件
我有一个名为 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 的示例。临时画布函数之前的第一组代码需要在文档加载时调用。任何例子或建议表示赞赏。
谢谢。
I have a coffeescript file called 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
I would like to refactor some of these lines into their own methods (ideally in separate files). I have attempted to do this but I get method not defined errors in the console, and I have been unable to find an example involving jquery. The first group of code before the temporary canvas function would need to be called on document load. Any examples or advice is appreciated.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
听起来您忘记了 CoffeeScript 在每个文件周围放置的函数包装器。这是一个常见的错误。要使变量成为全局变量,您需要将它们附加到
window
(例如window.x = y
)。方便的是,this
/@
指向最外层作用域中的window
,允许您编写@x = y
。以下是我重构代码的方法:
并且:
请注意,这里的 mouse_down_selected 具有本地范围,而 init 中创建的对象是全局的。这种文件结构可以轻松避免污染全局命名空间。
(还值得一提的是
-Number(x)
是多余的;-
运算符已经对数字执行了强制转换。)Sounds like you're forgetting the function wrapper that CoffeeScript puts around each file. This is a common mistake. To make variables global, you need to attach them to
window
(e.g.window.x = y
). Conveniently,this
/@
points towindow
in the outermost scope, allowing you to write@x = y
.Here's how I might refactor your code:
And:
Note that here,
mouse_down_selected
has local scope, while the objects created ininit
are global. This sort of file structure makes it easy to avoid polluting the global namespace.(It also bears mentioning that
-Number(x)
is redundant; the-
operator already performs coercion to a number.)http://requirejs.org/ 或 https://github.com/sstephenson/stitch 都提供将代码分离到多个文件中的功能。
http://requirejs.org/ or https://github.com/sstephenson/stitch both provide functionality to separate code into multiple files.