0

キャンバスに画像をレンダリングするためのjqueryプラグインを書いています。

最終的な目標は、次のようなものを達成することです

var myImageSource = new ImageSource(path,width,height);
$("#myCanvas").Render({"source" : myImageSource});

プラグインが正しく動作するには、いくつかのクラス、ヘルパー、その他の jquery プラグインが必要です。

依存関係があるとしましょう

  • マウスホイール jquery プラグイン
  • jquery プラグインではなく、プロトタイプといくつかの列挙型を持つオブジェクトであるキャッシュ ライブラリ

グローバル変数 (または少なくともプラグイン レベル) を必要とするループであるアニメーション エンジンがあります。

function runAnimations(timeStamp) {

    window.requestAnimationFrame(runAnimations);

    for (var i = 0; i < animations.length; i++) {
        animations[i].update(timeStamp);
    }
}

そして、私は自分のようなオブジェクトを定義する必要があります

  • 点
  • 矩形
  • ビューポート
  • イメージソース
  • アニメーション1

だから私の試みは次のようなものです:

 - Reference to other script library (like Cache)
 - Reference to other JQuery Plugin

; (function ($, window, document, undefined) {

   //global variable declaration
   var animations = [];
   var isAnimationLoopStarted = false;

   //global functions
   function runAnimations(timeStamp) {

        window.requestAnimationFrame(runAnimations);

        for (var i = 0; i < animations.length; i++) {
            animations[i].update(timeStamp);
        }
    }

   //objects declarations
   function Rect(x, y, height, width) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
   }

  Rect.prototype.moveTo = function (x, y) {
      this.x = x;
      this.y = y;
   };

   //other object declarations Point, ImageSource, ViewPort etc..

   //plugin interface
    var methods = {
        init: function () {
            return this.each(function () {

                });
            });
        },
        destroy: function () {
            return this.each(function () {
            });
        }
    };

    $.fn.render = function (method) {
        if (method === 'destroy') {
            return methods.destroy.apply(this);
        } else {
            return methods.init.apply(this);
        }
    }

})(jQuery, window, document);

だから私の質問は：

  • このままでいいと思いますか？
  • 私がそうすると、 ImageSource の定義はプラグインの外では利用できなくなります
  • 代わりに配列を使用するために ImageSource オブジェクトを放棄する必要があるので、オブジェクト定義に問題はありません
  • アニメーションなどのプラグイン内で定義されたグローバル変数のライフサイクルはどのようなものですか? いつでも利用できますか?
  • アニメーションなどの変数を使用するのがベスト プラクティスですか、それとも .data jquery 関数を使用する方がよいのですが、この場合、変数を共有する方法はありますか?

助けてくれてありがとう

フレッド

4

1 に答える 1

0

だから私の答えは：

  • 大丈夫そうです。それでも、クロージャー引数では必要ありませんwindowor document、それらは単純なグローバル変数です。globalそれらを「名前を変更」したい場合にのみ必要ですdoc。そのスクリプト ライブラリ インターフェイス オブジェクトを関数への引数として入れたいと思います。
  • はい。しかし、コンストラクター関数は外部で利用できる必要がありますか? 違うと思う。本当に必要な場合は、クロージャ内で宣言してもかまいません。たとえば、のような静的プロパティでそれらをエクスポートします$.render。
  • のコードを教えてくださいImageSource。そうしないと、その質問に答えることができません
  • プラグインでグローバル変数を定義しません(コメントを変更してください)。それらはローカルです (プラグイン クロージャの「プライベート」変数は言うまでもなく、そのスコープ内の他のすべての変数で使用できます。それらのライフ サイクルは、それらを参照するものがない (できない) 場合に終了します (自動ガベージ コレクションを使用)。しかし、関数をエクスポートします。 to $.fn.render、これには常にこれらの参照があります.したがって、そのエクスポートが存在する限り、ローカル変数は.
  • jQuerys アニメーション キューにフックする必要があります。なしで変数をどのように「共有」します.data()か? 特定の (DOM-) ノードに属するものはすべてデータ プロパティとして設定する必要があると思います。そうしないと、初期化後にアクセスできなくなりますね。
于 2012-04-27T08:13:00.400 に答える