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

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 MYMO开发者_如何学运维DULE = function() {

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

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

}();

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

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

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

}