gpt4 book ai didi

javascript - CoffeeScript 重构共享变量

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:28:02 26 4
gpt4 key购买 nike

我是 CoffeeScript 的新手,正在尝试了解如何重构此示例。由于这两个函数共享 Canvas 和上下文,有没有办法将它们从函数中拉出来并共享它们而不是重复我自己?我确定这是我明显遗漏的东西,但我无法让它发挥作用。

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>

最佳答案

可能最优雅的方法是使用一个类,或者至少是一个对象,它可以包含方法以及 canvascontext 变量。该对象还将跟踪它是否已经被初始化。这是第一次尝试:

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

现在,如果您后来决定要拥有多个 Canvas ,将 painter = 更改为 class Painter 并重用代码将非常容易。

关于javascript - CoffeeScript 重构共享变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7591116/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com