javascript plugin - object oriented?

Question

intro

Hello,

I'm trying to develop some plugin or/*and* object in javascript, which will control some properties over some object. It will also use jQuery, to ease development.

idea

This is in pseudocode to give you an idea, since I can't really describe it in english with the right words, it's impossible to go and use google to find out what I want to use (and learn).

I will have plugin (maybe object?) with some variables and methods:

  plugin hideshow(startupconfig){
    var c, //collection
    add: function(what){
      c += what;
    },
    do: function(){
      c.show().hide().stop(); //example code
    }
  }

and I will use it this way (or sort-of):

  var p = new Plugin();

  p
   .add($('p#simple'))
   .add($('p#simple2'))
   .do();

note

I'm not really looking for jQuery plugin tutorials - it's more like usage of one object in document in javascript, jQuery is mentione only because it will be used to modify dom and simplify selectors, jQuery plugin maybe just for that one little function add.

I'm looking for something, that will sit on top of my document and call functions from itselft based on timer, or user actions, or whatever.

problems

1. I don't really know where to start with construction of this object/plugin
2. I'm not really sure how to maintain one variable, which is collection of jQuery objects (something like $('#simple, #simple2');)
3. I would maybe like to extedn jQuery with $.fn.addToPlugin to use chaining of objects, but that should be simple (really just each( p.add($(this)); ))
4. My biggest problem is obviously that i can't explain what I want.

I hope I make any sense, ideas, links or advices appreciated.

edit

It's something like this, I just can't figure out how it's called/used in javascript - example in pseudo PHP:

class Foo() {
  $collection;
  $timer, $action;

  function onTimer(){
    foreach($collection as $e){
      $e->someAction();
    }
  }

  function add($e){
    $collection[] = $e;
  }

  function start(){
    $timer->start( onTimer() );
  }

  function->stop(){
    $timer->stop();
  }
}

var f = new Foo();

Foo.add(something);
Foo.start();

Answer 1

Take a look at Plugins/Authoring. I will say that your proposed API isn't really the "jQuery way". The would more likely be:

$("#simple, #simple2").hideandshow();

A starting point would be:

jQuery.fn.hideandshow = function() {
  return this.each(function(){
    $(this).show().hide().stop();
  });
};

and you're basically done.

Now calling this sequence of events doesn't really make sense either but that's another issue.

Now the method chaining is where it gets a little more interesting and I guess this is where the "singleton" comes in. Now in jQuery's case--at least for jQuery plugins--state is stored on the jQuery object itself as a general rule:

jQuery.effects = [];
jQuery.addeffect = function() {
  for (int i=0; i<arguments.length; i++) {
    if (typeof this[arguments[i]] == "function") {
      this.effects.push(arguments[i]);
    }
  }
};

and accessed by the plugin:

jQuery.fn.do = function() {
  var effects = this.effects;
  return this.each(function(){
    var ob = $(this);
    for (int i=0; i<effects.length; i++) {
      ob = ob[effects[i]]();
    }
  });
};

which then allows:

$.addeffect("hide", "show", "stop");
$("#simple, #simple2").do();

Now this has a limitation of being able to pass arguments to those effects. Not quite sure how to get around that.

Answer 2

If you are looking to write a singleton in Javascript, the YAHOO module pattern should show you everything you need.