is this a valid javascript design pattern when many instances are required?

Question

I have some code that I'm refactoring, right now its just a list of functions, primarily jQuery.

The code is a form builder. The user adds sections, questions etc using jqueryUI drag/drop/sort. They can get quite long in the range of > 1k questions. I've been debating between patterns,frameworks, etc. and have settled on what I believe will be the best improvement without ripping everything out and starting completely over with something like angular or react.

I was also considering the module pattern but I'm concerned about having so many duplicates of the methods in memory (>1k) and thought this might serve me better. Is there anything I'm overlooking or gotchas that might cause an issue? I like that its all wrapped inside an IIFE and feels encapsulated.

Pattern example:

var Question = (function() {

    function Question(name, type) {
        // enforces new
        if (!(this instanceof Question)) {
            return new Question(name,type);
        }

        // constructor body
        this.name = name || 'default' ;
        this.type = type || 'text';
    }

    Question.prototype.someMethod = function(arg) {
        // method body
    }

    return Question;
}());

it would be used like so:

Question question1 = new Question('name','picklist');

Answer 1

The pattern you've cited in your example is just fine, although in your case, not really required. The idea of the module pattern is to hide away the things you don't explicitly return. So in your case, your IIFE isn't really doing anything (if you had private helpers inside your modules, however, you would).

If you have common methods which are shared among components (for example, all form elements may have a getValue() method, you can use JavaScript's prototypal inheritance to create a parent object, and have the various form elements inherit from it:

function FormObject() {}
FormObject.prototype.getValue = function() { return 42; };

function Question() {
    // ...
}
Question.prototype = Object.create(FormObject);
Question.prototype.constructor = Question;

This ugliness can be resolved with ES6's class feature, which is syntactic sugar to all of that:

class FormObject {
    // FormObject generic implementation here
}
class Question extends FormObject {
    constructor() {
        // ...
    }
    someMethod() {
        // ...
    }
}
var question1 = new Question(...);

---

Also, if you're into modules, have a look at Browserify and webpack. For ES6 today, have a look at Babel.

formObject.js

class FormObject {
    // FormObject generic implementation here
}
module.exports = FormObject;

question.js

var FormObject = require('./formObject');
class Question extends FormObject {
    constructor() {
        // ...
    }
    someMethod() {
        // ...
    }
}
module.exports = Question;

main.js

require('./question.js');
var question1 = new Question(...);