2012-04-26 6 views
0

キャンバスに画像を描画するjqueryプラグインを作成しています。JQueryプラグインのアーキテクチャ、オブジェクトと変数のライフサイクルを定義する場所は?

究極の目標は、

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

プラグインが正常に動作するようにいくつかのクラス、herpersおよび他のいくつかのjqueryのプラグインをrequiersのようなものをachiveすることです。

それでは、私は

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

私が持っているとの依存関係を持っているとしましょうアニメーションエンジンは、グローバル変数(または少なくともプラグインレベル)を要求するループです。

function runAnimations(timeStamp) { 

    window.requestAnimationFrame(runAnimations); 

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

そして、私は私自身のような

  • ポイント
  • のオブジェクトを定義する必要が長方形
  • ビューポート
  • ImageSourceは
  • Animation1

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

- 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関数を使用する方が良いでしょうか?この場合、変数 をどのように共有するのですか?

フレッド

+0

恐ろしい質問タイトルそれを質問にするには? – JohnFx

+0

ル、それは今より良いと思います。 –

答えて

0

任意の助けを事前によりありがとうだから私の答えは以下のとおりです。

  • 罰金です。しかし、閉包の引数では、windowまたはdocumentは不要です。これらは単純なグローバル変数です。あなたがそれらの名前を "名前を変更"したい場合は、そこにのみ必要です。 globaldocになります。私はむしろその関数への引数としてスクリプトライブラリのインターフェイスオブジェクトを配置したいと思います。
  • はい。しかし、コンストラクタ関数は外部で利用できる必要がありますか?私は違うと思います。それらが本当に必要な場合は、クロージャー内に宣言することは大丈夫です。たとえば、$.renderのような静的プロパティでエクスポートします。
  • あなたは、そうでない場合、我々はその質問
  • にお答えすることはできませんあなたがは(あなたのコメントを適応してください)あなたのプラグインのいずれかのグローバル変数を定義していない、私たちにImageSourceのコードを与える必要があります。それらはローカルです(あなたのプラグインクロージャー内の "プライベート"変数ではなく、そのスコープ内の他のものすべてで利用可能です)。何も参照できなくなったらライフサイクルが自動的にガベージコレクションで終了しますが、 $.fn.renderには常にこれらの参照がありますので、そのエクスポートが存在する限り、ローカル変数は
  • jQuerysアニメーションキューをフックする必要があります。.data()を使わないで変数をどのように "共有"しますか?特定の(DOM-)ノードに属するデータプロパティをデータプロパティとして設定する必要があります。そうしないと、アクセスした後にアクセスできなくなりますか?
+0

このような大きな助けに私に答えてくれてありがとう。 varメソッドは参照されているため、エクスポートの有効期間は残っています。参照ではない場合は、コレクタが起動したときに収集されてgarbagedされる可能性があります。 –

関連する問題