Question

I m writting a jquery plugin to render images in a canvas.

The ultimate goal is to achive something like

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

The plugin requiers several classes, herpers and some other jquery plugins to work properly.

so let’s say I have a dependency on

• mousewheel jquery plugin
• a Cache library that is not a jquery plugin but an object with prototypes and some enums

I have an animation engine that is a loop that requiers a global variable (or at least at the plugin level)

function runAnimations(timeStamp) {

    window.requestAnimationFrame(runAnimations);

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

And I have to define objects of my own like

• Point
• Rectangle
• ViewPort
• ImageSource
• Animation1

So my try is something like this :

 - 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);

So my questions are :

• Do you think it’s ok to go this way?
• If I do that, the definition of ImageSource wont be available outside
  the plugin
• Should I give up ImageSource object to use a array instead, so I have
  no issue with the object definitions
• What is the life cycle of global variable defined inside the plugin like animations, will it be available all the time?
• Is it a best practice to use variables like animations or is it better
  to use .data jquery function, but in this case how to share the
  variable?

Thank you by advance for any help

Fred

Answer 1

So my answers are:

• Seems fine. Yet, in your closure arguments you won’t need window or document, they’re simple global variables. You’d only need them there if you want to “rename” them, e.g. to global and doc. I would rather put that script libraries interface object as an argument to the function.
• Yes. But will the constructor function need to be available outside? I think no. If you really need them, it’s okay to declare them inside the closure; export them for example in a static property like $.render.
• You would need to give us the code of ImageSource, otherwise we can’t answer that question
• You do not define any global variables in your plugin (please adapt your comments). They are local (not to say “private” variables in your plugin closure, available for everything else in that scope. Their life cycle will end (with automatic garbage collection) when nothing (can) reference them any more. But you export a function to $.fn.render, which has these references all the time. So as long that export exist, your local variables will.
• You should hook on jQuerys animation queues. How do you “share” your variables without .data()? I’d say everything that belongs to a certain (DOM-)node should be set as a data property, otherwise you won’t be able to access it after you’ve inited it, will you?