Javascript CoffeeScript重构共享变量_Javascript_Coffeescript

Javascript CoffeeScript重构共享变量

javascript coffeescript

Javascript CoffeeScript重构共享变量,javascript,coffeescript,Javascript,Coffeescript,我对CoffeeScript还不熟悉，并试图了解如何重构这个示例。既然两个函数都共享画布和上下文，那么有没有办法将它们从函数旁边拉出来并共享它们，而不是重复我自己？我肯定这是我明显缺少的东西，但我一直没能让它发挥作用咖啡脚本文件 @draw_rectangle = -> canvas = document.getElementById("main_canvas") context = canvas.getContext("2d") context.fillRect(50, 2

我对CoffeeScript还不熟悉，并试图了解如何重构这个示例。既然两个函数都共享画布和上下文，那么有没有办法将它们从函数旁边拉出来并共享它们，而不是重复我自己？我肯定这是我明显缺少的东西，但我一直没能让它发挥作用

咖啡脚本文件

@draw_rectangle = ->
  canvas = document.getElementById("main_canvas")
  context = canvas.getContext("2d")
  context.fillRect(50, 25, 150, 100)

@draw_square = ->
  canvas = document.getElementById("main_canvas")
  context = canvas.getContext("2d")
  context.fillRect(100, 50, 100, 50)

HTML正文：

<body>
  <canvas id="main_canvas"></canvas>
  <p><a onclick="draw_square()" href="#">Draw Square</a></p>
  <p><a onclick="draw_rectangle()" href="#">Draw Rectangle</a></p>
</body>

您可以使用自定义助手方法绘制矩形

canvasRectangle = (id, x, y, w, h) ->
  canvas  = document.getElementById(id)
  context = canvas.getContext("2d")
  context.fillRect(x, y, w, h)

@draw_rectangle = ->
  canvasRectangle("main_canvas", 50, 25, 150, 100)

@draw_square = ->
  canvasRectangle("main_canvas", 100, 50, 100, 50)

最优雅的方式可能是使用一个类，或者至少是一个对象，它同时包含方法和

画布

和

上下文

变量。对象还将跟踪它是否已经初始化。这是第一次尝试：

painter =
  draw_rectangle: ->
    @init() unless @initialized
    @context.fillRect 50, 25, 150, 100

  draw_square: ->
    @init() unless @initialized
    @context.fillRect 100, 50, 100, 50

  init: ->
    canvas = document.getElementById "main_canvas"
    @context = canvas.getContext "2d"
    @initialized = true

现在，如果您后来决定要进行多张画布，则很容易将

painter=

更改为

class painter

并重用代码。

这确实很好地解决了重复问题，尽管我认为提问者希望避免重复运行

文档.getElementById

和

canvas.getContext

函数。如果你画了很多矩形和正方形，那可能会影响性能。你的解决方案正是我想要的，但是点击链接不再画矩形/正方形。我应该调用painter.draw\u rectangle（）而不是onclick属性中的draw\u rectangle（），对吗？缺少：在属性id之后，我在firebug控制台中看到这个javascript错误，单击链接仍然不起作用。嗯，它应该是

@painter=

或

window.painter=

以使其成为一个全局。。。这能解决问题吗？很抱歉一直困扰您，但问题仍然存在。您正在将代码编译为JavaScript，对吗？Firebug将错误归因于哪个行号？