Can I use classes with the javascript module pattern?

Question

I have a bunch of "modules" which follow the "JavaScript Module Pattern" as described in this popular article. To my understanding these modules are a way to aggregate various bits of behavior into neat namespaces.

But what if I want to be able to create a unique object instance which accepts arguments? As it stands, I can't do that as all the data is shared/static. I want to be able to do this:

var foo = new Some.Namespace.Whatever.Foo(config);

I can't change the structure of the pattern as we've been using it for a while and it works very well. I just want to tweak it so I can throw some "classes" into it which work with non-static data.

I don't understand what the problem is. Why can't you have a class as a member of a module? — benekastah
– benekastah, Commented Mar 6, 2013 at 16:19
@benekastah If I do then any data I pass in is shared by other instances when I use new. — Bobby B
– Bobby B, Commented Mar 6, 2013 at 16:22
I don't think so. I added an answer that I should work, if I understand the problem correctly. — benekastah
– benekastah, Commented Mar 6, 2013 at 16:28

benekastah · Accepted Answer · 2013-03-06 16:27:05Z

5

Why not try this?

var MODULE = (function () {
  var my = {};

  my.SomeClass = SomeClass;
  function SomeClass(six) {
    this.six = six;
  }
  SomeClass.prototype.five = 5;

  return my;
})();

When you call var obj = new MODULE.SomeClass(6) it will give you a new object. obj.five is shared between all instances of SomeClass because it is attached to the prototype. However, obj.six is specific to that instance, because it is attached to obj.

Alternatively, you may not need for your class to be inside a module. You could use a class to replace the module where appropriate, because both modules and classes in this case have some overlapping functionality.

answered Mar 6, 2013 at 16:27

benekastah

5,7211 gold badge37 silver badges50 bronze badges

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

3 Comments

Bobby B Over a year ago

OK I think my problem was all the data and behavior was attached to the namespace, whereas as you've done it the instance data is attached to the instance only.

benekastah Over a year ago

The prototype is for inheritance and also helps reduce duplication. Since each instance will likely have the same methods, you put the methods on the prototype. This means that every instance shares the methods rather than each one having its own copies. This reduces memory usage.

Bobby B Over a year ago

Yes makes sense. Now I understand what you meant by overlap between the module pattern and the class. Thanks.

Scott Sauyet · Accepted Answer · 2013-03-06 16:35:19Z

3

This is probably overuse of the module pattern, but is this what you mean?:

var Some = (function() {
    var util = { /* ... */ };
    return {
        Namespace: (function() {
            return {
                Whatever: (function() {
                    var Foo = function(config) {
                        this.foo = config.foo || "foo";
                        this.bar = config.bar || "bar";
                    };
                    var Bar = function() {};
                    Foo.prototype.toString = function() {
                        return this.foo + " "  + this.bar;
                    };
                    return {
                        Foo: Foo,
                        Bar: Bar
                    }
                }())
            };
        }())
    };
}());

var foo = new Some.Namespace.Whatever.Foo({foo: "hello", bar: "world"});
foo.toString() // "hello world"

answered Mar 6, 2013 at 16:35

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

2 Comments

Bobby B Over a year ago

Cool nesting. Is this not the "revealing module pattern" rather than the vanilla "module pattern"?

Scott Sauyet Over a year ago

@BobbyB: I suppose so, at least the innermost one. I've never worried particularly about pattern names, though.

Collectives™ on Stack Overflow

Can I use classes with the javascript module pattern?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related