在 JavaScript 中使画布成为全局对象是一种好习惯吗？答案

【问题标题】：Is it good practice to make canvas a global object in JavaScript?在 JavaScript 中使画布成为全局对象是一种好习惯吗？
【发布时间】：2011-02-08 20:07:35
【问题描述】：

我正在尝试使用 HTML5 的 canvas 标签在 JavaScript 中构建一个项目。但是，由于在我的对象/原型中引用范围，我遇到了一些问题。

将画布元素（不管它们中的多少）设为全局元素是一个好主意（或者更确切地说，是一种好的做法）吗？由于想要坚持 OOP 心态，我一直在尽可能避免使用全局变量，但我没有找到更多更好的解决方案。

感谢任何反馈。

【问题讨论】：

??不，我认为这不是好习惯；事实上，它甚至没有任何意义。对画布对象的引用是否在全局变量中对画布的工作方式没有影响。
我的意思是（例如）：假设我想在每次移动鼠标时更改画布上的文本（对于 x 和 y 坐标值）。必须在其中的函数可能无法引用画布元素的其他方法来重绘 else 应该在画布上的内容。如果不提供实际脚本，这有点难以解释，不幸的是，我目前没有太多时间去做。
clicheName，你可以将 cavas 对象传递给需要它的方法

标签： javascript oop html prototype canvas

【解决方案1】：

实际上从不用变量/引用破坏全局对象是个好主意。几乎在所有情况下都可以避免。

您提到您正在遵循“OOP 心态”，这使情况变得更糟。在这种情况下，你显然在你的设计理念上做错了什么。回到绘图板！

正如我多次提到的，避免这种情况的最小努力是创建一个Function context，它表示您的代码的范围。

(function() {
    // all of your code
    var canvas = document.getElementById('mycanvas');
}());

【讨论】：

【解决方案2】：

您的主要问题似乎是将信息传递给事件（不接收参数的函数）。

解决方案是closures。函数可以使用在其范围内定义的任何变量，您可以充分利用这一点。

function make_event_handler(canvas){
    function my_event_handler(){
        alert('look, I can use '+canvas);
    }
    return my_event_handler;
}

elem.onclick = make_event_handler(canvas);

您可以通过传递一个“画布管理器”对象来使这更复杂，以允许在运行时更改画布以及添加您可能需要的其他变量...

【讨论】：