Joh*_*ohn 4 javascript coffeescript
我是CoffeeScript的新手,并试图理解如何重构这个例子.既然两个函数共享画布和上下文,有没有办法将它们拉出函数并共享它们而不是重复自己？我确信这是显而易见的,我很遗憾,但我无法让它发挥作用.
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>
可能最优雅的方法是使用一个类,或者至少一个对象,它将包含方法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和重用的代码.