Question

在下面的代码中，我通过一个函数表来绘制模具上的点，这些函数知道如何为任何给定的模具绘制点。

然而，我担心这些表每次都会被重新创建。如果我使用的是C ++，我会让它们保持静态，但这当然是不可能的。我想知道如何操作，以便每次调用DrawDie时它都不会重新创建函数表。

现代浏览器的编译器/解析器/解释器是否足够智能，我不必担心它？

// DrawDie
//
// Draws a die with 'dots' count of dots at a given location and size.  Dot     size is based on the die size.

function DrawDie(x, y, cx, cy, dots)
{
game.context.drawImage(game.getImage('Images/RedDie.png'), x, y, cx, cy);
var dotRadius  = cx / 10;
var dotSpacing = cx / 8 + dotRadius;
var centerX    = x + cx / 2;
var centerY    = y + cy / 2;

function Center()       { DrawCircle(centerX,              centerY,              dotRadius); };
function TopLeft()      { DrawCircle(centerX - dotSpacing, centerY - dotSpacing, dotRadius); };
function TopCenter()    { DrawCircle(centerX,              centerY - dotSpacing, dotRadius); };
function TopRight()     { DrawCircle(centerX + dotSpacing, centerY - dotSpacing, dotRadius); };
function MiddleLeft()   { DrawCircle(centerX - dotSpacing, centerY,              dotRadius)  };
function MiddleRight()  { DrawCircle(centerX + dotSpacing, centerY,              dotRadius)  };
function BottomLeft()   { DrawCircle(centerX - dotSpacing, centerY + dotSpacing, dotRadius); };
function BottomCenter() { DrawCircle(centerX,              centerY + dotSpacing, dotRadius); };
function BottomRight()  { DrawCircle(centerX + dotSpacing, centerY + dotSpacing, dotRadius); };

dieDrawingFunctions =
[
    [],                                                                                                     // 0
    [Center],                                                                                               // 1
    [TopLeft, BottomRight],                                                                                 // 2
    [Center, TopLeft, BottomRight],                                                                         // 3
    [TopLeft, TopRight, BottomLeft, BottomRight],                                                           // 4
    [TopLeft, TopRight, BottomLeft, BottomRight, Center],                                                   // 5
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight],                                  // 6
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, Center],                          // 7
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, MiddleLeft, MiddleRight],         // 8
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, MiddleLeft, MiddleRight, Center], // 9
];

for (var i = 0; i < dieDrawingFunctions[dots].length; i++)
    dieDrawingFunctions[dots][i]();

}

Answer 1

您可以避免每次都重新创建这些功能。是否必要/有益是另一个问题，但你可以：

function Center(centerX, centerY, dotRadius, dotSpacing)       { DrawCircle(centerX,              centerY,              dotRadius); };
function TopLeft(centerX, centerY, dotRadius, dotSpacing)      { DrawCircle(centerX - dotSpacing, centerY - dotSpacing, dotRadius); };
function TopCenter(centerX, centerY, dotRadius, dotSpacing)    { DrawCircle(centerX,              centerY - dotSpacing, dotRadius); };
function TopRight(centerX, centerY, dotRadius, dotSpacing)     { DrawCircle(centerX + dotSpacing, centerY - dotSpacing, dotRadius); };
function MiddleLeft(centerX, centerY, dotRadius, dotSpacing)   { DrawCircle(centerX - dotSpacing, centerY,              dotRadius)  };
function MiddleRight(centerX, centerY, dotRadius, dotSpacing)  { DrawCircle(centerX + dotSpacing, centerY,              dotRadius)  };
function BottomLeft(centerX, centerY, dotRadius, dotSpacing)   { DrawCircle(centerX - dotSpacing, centerY + dotSpacing, dotRadius); };
function BottomCenter(centerX, centerY, dotRadius, dotSpacing) { DrawCircle(centerX,              centerY + dotSpacing, dotRadius); };
function BottomRight(centerX, centerY, dotRadius, dotSpacing)  { DrawCircle(centerX + dotSpacing, centerY + dotSpacing, dotRadius); };
var dieDrawingFunctions = [
    [],                                                                                                     // 0
    [Center],                                                                                               // 1
    [TopLeft, BottomRight],                                                                                 // 2
    [Center, TopLeft, BottomRight],                                                                         // 3
    [TopLeft, TopRight, BottomLeft, BottomRight],                                                           // 4
    [TopLeft, TopRight, BottomLeft, BottomRight, Center],                                                   // 5
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight],                                  // 6
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, Center],                          // 7
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, MiddleLeft, MiddleRight],         // 8
    [TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, MiddleLeft, MiddleRight, Center], // 9
];

function DrawDie(x, y, cx, cy, dots)
{
    game.context.drawImage(game.getImage('Images/RedDie.png'), x, y, cx, cy);
    var dotRadius  = cx / 10;
    var dotSpacing = cx / 8 + dotRadius;
    var centerX    = x + cx / 2;
    var centerY    = y + cy / 2;

    for (var i = 0; i < dieDrawingFunctions[dots].length; i++) {
        dieDrawingFunctions[dots][i](centerX, centerY, dotRadius, dotSpacing);
    }
}

旁注：您的原始代码正在成为The Horror of Implicit Globals 的牺牲品（这是我贫血小博客上帖子的链接），因为您没有声明dieDrawingFunctions变量，所以赋值给它创建了一个全局变量。我建议使用严格模式，这会导致错误，引起您的注意，以便您可以修复它。

有一个Javascript函数表的有效方法是什么？

1 个答案: