Javascript 为什么要使用设置和绘制功能？

我希望这不是一个太抽象的问题，但我一直在努力解决这个问题

使用多种语言编写生成/交互动画时，通常会看到以下结构：

global variables
a setup function 
a draw function ( the loop ) 

例如，此画布草图使用javascript

var ctx, w, h,
    x = y = 1,
    xd = yd = 1;

function setup() {
    var canvas = document.getElementById("canvas");
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;
    ctx = canvas.getContext("2d");
}

function draw() {
    ctx.clearRect(0, 0, w, h);

    ctx.fillRect(x, y, 10, 10);

    if(x>w || x<0){ xd = -xd }
    if(y>h || y<0){ yd = -yd }

    x += xd;
    y += yd;
}

setup();
setInterval(draw, 1000/60);

以上是一把小提琴：

有时我甚至看到第三个函数添加到这个等式中，类似于设置、渲染、动画这样的东西：在threejs示例中非常常见

但在我看来，您真正需要的是绘制循环函数，如下所示：

var ctx, w, h,
    x = y = 1,
    xd = yd = 1;

var canvas = document.getElementById("canvas");
    canvas.width = w = window.innerWidth;
    canvas.height = h = window.innerHeight;

ctx = canvas.getContext("2d");


function draw() {
    ctx.clearRect(0, 0, w, h);

    ctx.fillRect(x, y, 10, 10);

    if (x > w || x < 0) { xd = -xd }
    if (y > h || y < 0) { yd = -yd }

    x += xd;
    y += yd;
}

setInterval(draw, 1000 / 60);

在这里为上面的内容演奏小提琴：

---

我意识到我的第一个例子似乎是跨语言的约定，必须有一些实用的/功能性的解释，只是不确定为什么？？？

这都与代码的可重用性有关。例如，如果要更改画布的高度或宽度，则必须在更改大小后重新键入所有这些代码行，或者可以再次运行安装程序。这与图形细节在函数中的原因相同，因为它们被反复调用。这是一种代码组织形式。使用函数名setup清楚地表明了这些行的意图。