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

发布于 2024-12-09 16:39:43 字数 1108 浏览 0 评论 0原文

我有一个名为 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

百变从容 2024-12-16 16:39:43

我尝试这样做,但我在控制台中收到方法未定义错误...

听起来您忘记了 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) 是多余的;- 运算符已经对数字执行了强制转换。)

I have attempted to do this but I get method not defined errors in the console...

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 to window in the outermost scope, allowing you to write @x = y.

Here's how I might refactor your code:

# 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")

And:

# 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

Note that here, mouse_down_selected has local scope, while the objects created in init 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.)

蓝海似她心 2024-12-16 16:39:43

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文