CoffeeScript重构共享变量

Question

CoffeeScript重构共享变量

4

我是新手，正在学习如何重构这个例子的CoffeeScript代码。由于两个函数都使用canvas和context，是否有一种方法可以将它们从函数中提取出来并共享，而不是重复自己？我相信这是我忽略的一个明显问题，但我一直无法让它正常工作。

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>

- John

2个回答

0

你可以使用自定义的辅助方法来绘制一个矩形。

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)

- Simone Carletti

1

虽然修复了重复的问题，但我认为提问者想要避免重复运行document.getElementById和canvas.getContext函数。如果你要绘制许多矩形和正方形，这可能会影响性能。 - Trevor Burnham

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trevor Burnham · Accepted Answer

可能最优雅的方法是使用一个类，或者至少一个对象来保存两个方法和canvas 和 context 变量。该对象还将跟踪它是否已经被初始化。这里是第一次尝试:

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并重用代码将非常容易。