1

私はまだJavascriptに少し慣れていないので、コードの多くの場所でJQueryを使用して次のようなキャンバス要素への参照を取得していることに気付きました。

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

頻繁に呼び出される可能性のある多くの場所にサイトがあるため、サイトの速度が低下しているのではないかと疑っています。理想的には、これを1回実行して、任意のjavascriptページからコンテキストにアクセスします。

グローバル変数を作成しようとしましたが、機能しませんでした（おそらく、ページが読み込まれる前に実行されるため）。代わりに、最初に参照したjavascriptファイルのグローバルスコープにこの関数を配置しました。

var drawingCanvasContext;

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

    return drawingCanvasContext;
}

したがって、コードでキャンバスが必要なときはいつでも、そのメソッドを呼び出すだけです。これが珍しい欲求ではないかと思うので、適切な解決策に興味があります。関数ではなく変数であり、これらすべてのnullチェックなしでグローバルにアクセスできるようにしたいと思います。誰かがこれを達成する方法を知っていますか？ありがとう。

4

4 に答える 4

0

私はあなたのコードに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;
})();

もちろん、そのメソッドを名前空間オブジェクトに入れることができます/すべきです、私はあなたがそのようなものを複数持っていると思います。

于 2012-06-06T21:47:59.550 に答える
0

最終的にできることは、後で取得するためにコンテキストを保存することだけです。ここで確認できる問題は、おそらく操作の順序であり、ページの準備が整う前にコンテキストが要求されており、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これにより、Canvasインスタンス getCanvasContextが取得され、Canvasコンテキストが取得されます。

必要に応じてレジストリパターンを使用するようにこれを調整して、複数のキャンバス要素/コンテキストを取得して保存できるようにすることができますが、これは単に表示するための単純なパターンです。

注：canvas / documentの準備が整う前にメソッドが呼び出された場合はnullを返します。とにかく、domReadyの後にすべてのセットアップコードを実行する必要があります。

于 2012-06-06T21:48:19.497 に答える
0

グローバル変数から読み取るたびに実行されるゲッターをグローバル変数に定義できます（これを下位互換にするためのヒントについては、ここを参照してください）。

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

これは、それがどのように機能するかを示すために「foo」に設定したフィドルです。

于 2012-06-06T22:00:34.113 に答える
0

あなたは単にこれを行うことができます

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

そのための関数を定義する代わりに。

グローバルスコープの汚染に注意する場合は、関数でラップするか、名前空間を使用する必要があります。例えば

var myNamespace = myNamespace || {};
myNamespace.drawingCanvasContext = $('#myCanvas')[0].getContext('2d');
于 2012-06-06T22:14:56.613 に答える