尝试找到一种对画布进行全局访问的正确方法

Question

我对Javascript仍然有点陌生，并且注意到在我的代码中的很多地方，我正在使用JQuery来获取对我的canvas元素的引用，如下所示：

$('#myCanvas')[0].getContext('2d');

我怀疑它正在减慢我的网站速度，因为我在很多可能经常被调用的地方都有它。理想情况下，我只做一次，然后从任何javascript页面访问上下文。

我

尝试创建一个全局变量，但它不起作用（可能是因为它在页面加载之前运行），所以我在我的第一个引用的 javascript 文件中将这个函数放在全局范围内：

var drawingCanvasContext;
function getDrawingCanvas() {
    if (drawingCanvasContext == null) {
        drawingCanvasContext = $('#myCanvas')[0].getContext('2d');
    }
    return drawingCanvasContext;
}

因此，每当我在代码中需要画布时，我只需调用该方法。但它似乎更像..混乱。我怀疑这是一种不寻常的愿望，所以我很好奇正确的解决方案。我希望它只是一个变量而不是一个函数，并且在没有所有这些空检查的情况下全局访问。有谁知道如何做到这一点？谢谢。

Answer 1

你可以简单地这样做

var drawingCanvasContext = $('#myCanvas')[0].getContext('2d');

而不是为此定义一个函数。

如果你对全局范围的污染很小心，你应该把它包装在一个函数中或使用命名空间。 例如

var myNamespace = myNamespace || {};
myNamespace.drawingCanvasContext = $('#myCanvas')[0].getContext('2d');

Answer 2

我对你的代码只有两个小改进：

(function(){
    // move the var out of the global context by wrapping everything in a closure
    var /* static */ drawingCanvasContext;
    function getDrawingCanvas() {
        if (!drawingCanvasContext) // no need to check for null, defaultvalue is undefined
            drawingCanvasContext = $('#myCanvas')[0].getContext('2d');
        return drawingCanvasContext;
    }
    window.getDrawingCanvas = getDrawingCanvas;
})();

当然，您可以/应该将该方法放在命名空间对象中，我想您不止一个这样的方法。

Answer 3

最终，您所能做的就是存储上下文以供以后检索。我在这里看到的问题可能是操作顺序，在页面准备就绪之前正在请求上下文，并且可能您正在失去VAR声明的范围（我认为）。

;(function($, window, document) {
   /* private */ var canvas = null;
   /* private */ var context = null;
   $(document).ready(function() {
      canvas = $("#myCanvas")[0];
      context = canvas.getContext('2d');
      $('body').trigger('CanvasReady', [canvas, context]); // You can fire an event to bind to with jquery for when the canvas is ready.
   });
   /* public */ window.getCanvas = function() { return canvas; };
   /* public */ window.getCanvasContext = function() { return context; };
   // You can also use a namespace here too if you want
   // window.Canvas = {};
   // window.Canvas.GetContext = ... etc ...
})(jQuery, window, document);

这将在画布

准备就绪时获取画布，在找到画布并准备好进行操作时触发您可以订阅的事件。

它将全局公开 2 个函数：

getCanvas，您将获得画布实例 getCanvasContext，这将使您获得画布上下文

如果需要，您可以调整它以使用注册表模式，以便它可以获取和存储多个画布元素/上下文，但这只是一个向您展示的简单模式。

注意：如果在画布/文档准备就绪之前调用方法，则返回null，无论如何，您应该在domReady之后执行所有设置代码。

Answer 4

您可以在全局变量上定义一个 getter，每次从该变量读取时都会执行该 getter（有关使其向后兼容的提示，请参阅此处）：

var _drawingCanvasContext;//behind the scenes variable that keeps the value
Object.defineProperty(this, "drawingCanvasContext", {
    get: function() {
        return _drawingCanvasContext || (_drawingCanvasContext = $('#myCanvas')[0].getContext('2d'));
    }
});

这是一个小提琴，我将其设置为"foo"以向您展示它是如何工作的。