Question

I have a javascript object, which I’ve added a number of prototyped functions to, which mostly depend in some way on the members of the object.

myForm() {
    this.property1 = "Prop1";
    this.property2 = "Prop2";
}

myForm.prototype.loadValues = function(){ /*...*/);

myForm.prototype.setValues = function(){ /*...*/);

myForm.prototype.doStuff = function(){ /*...*/);

There are enough functions/code that it is currently sitting at ~4 thousand lines, and it is driving me nuts every time I have to debug it using dev tools/firebug. I was thinking of splitting this up as such.

myForm.js –

myForm(){
    this.property1 = "Prop1";
    this.property2 = "Prop2";
    new myFormLoadActions();
    new myFormSetActions();
    new myFormDoStuffActions();
}

myFormLoadActions.js

myFormLoadActions(){
    myForm.prototype.loadValues = function(){ /*...*/);
}

myFormSetActions.js

myFormSetActions(){
    myForm.prototype.setValues = function(){ /*...*/);
}

myFormDoStuffActions.js

myFormDoStuffActions(){
    myForm.prototype.doStuff = function(){ /*...*/);
}

I’ve trialled this, and it seems to work functionally. Is this a reccomended way of dealing with a large number of prototyped functions, or is there a better way?

Answer 1

Keep your old code, but simply scatter assignments to prototype over multiple files:

File 0

myForm() {
    this.property1 = "Prop1";
    this.property2 = "Prop2";
}

File 1

myForm.prototype.loadValues = function(){ /*...*/);

File 2

myForm.prototype.setValues = function(){ /*...*/);

As I noted in the comments, this is just a problem of one class doing too much but you realize that and just want smaller files, so here you go 🙂