How to create a javascript class or module, I need 2 instances on a page

Question

I am wrapping common javascript functions that will work on elements on a page.

My page has 2 of these elements (textareas), so I will need to create 2 instances and then I want to do this:

var textArea1 = new SomeClass();
var textArea2 = new SomeClass();

textArea1.init("ta1");
textArea2.init("ta2");

I tried doing this the module pattern way, but I'm confused how I can create 2 seperate instances of it?

var MYMODULE = function() {

  var _init = function(ta) {
       // ..
  }

  return {
     init: function(ta) {
       _init(ta);
     }
  };

}();

Guffa · Accepted Answer · 2011-09-09 20:47:16Z

2

Use a constructor function:

function SomeClass(id) {
  this.id = id;
  // ...
}

Usage:

var textArea1 = new SomeClass("ta1");
var textArea2 = new SomeClass("ta2");

You can put methods for the class in the prototype for the function. Example:

SomeClass.prototype = {

  getValue: function() { return document.getElementById(this.id).value; }

};

Usage:

var text = testArea1.getValue();

answered Sep 9, 2011 at 20:47

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codecompleting Over a year ago

thanks, from within the prototype block, can I call a function that I defined inside another function?

Guffa Over a year ago

@codecompleting: No, a function defined inside another function is local and only exist inside that function, so you can't do that with any solution.

Evert · Accepted Answer · 2011-09-09 20:43:39Z

1

Using your specific example, you could just MYModule twice, but it's a weird pattern that doesn't seem to do a whole lot.

Simple example how instantiation works:

function SomeClass() {
  // constructor
}

SomeClass.prototype.init = function(ta) {
  // ..
}


var textArea1 = new SomeClass();
var textArea2 = new SomeClass();

textArea1.init('ta1');
textArea2.init('ta2');

But regardless, you may like Backbone.js

answered Sep 9, 2011 at 20:43

Evert

101k18 gold badges136 silver badges221 bronze badges

2 Comments

codecompleting Over a year ago

what does backbone.js have to do with it? or was that a joke??

Evert Over a year ago

No, you're clearly working on application structure and you even tagged it 'jQuery'. If you want a clean way to design your application, it may be better to go with something like backbone, rather than trying to reinvent the wheel and write everything on your own from scratch.

Hogan · Accepted Answer · 2011-09-09 21:10:04Z

1

Your MYMODULE idea will work fine. As above and then

MYMODULE.init("ta1");
MYMODULE.init("ta2");

This line here will not care it is called with two different parameters

var _init = function(ta) {
   // ..
}

It is just a place to hold a function. The real question is what is inside that function. For example if it works with ta in some standard way (attaches event handlers, does some styling.. ) then it will not be a problem. The issue will be if you use MYMODULE local variables and expect to have more than one of them. You only have one MYMODULE so local variables will be shared with this design. This might be what you want. I'm not sure.

This pattern can work fine for a control passed in having special data all itself. The best way to do this -- since you are using jQuery is with the data function... thus the code could look like:

var _init = function(ta) {
   jQuery.data(ta,"foo", 10);
    // etc

}

edited Sep 9, 2011 at 21:10

answered Sep 9, 2011 at 20:44

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

3 Comments

codecompleting Over a year ago

Hi, yes I do have local varialbes in my module, that's what triggered my question actually as it seemed liked something was going to break.

Hogan Over a year ago

Ok, well I can't offer advice on how to do something I can't see -- if you show some code then I might be able to help suggest a pattern. Right now all I know is you want to do "something".

Hogan Over a year ago

But if you are using jQuery I expect your best bet is to use the "data" area of the control passed in -- I'll post an example above.

Collectives™ on Stack Overflow

How to create a javascript class or module, I need 2 instances on a page

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related