Refactoring javascript objects with a large number of prototyped functions

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?

That doesn't make any sense. The real problem is that your class is doing too much. — Esailija
– Esailija, Commented Jun 14, 2012 at 14:43
You're right, it is doing far too much. Given time, I'd love to refactor it into smaller pieces. This is supposed to be an intirim soloution so don't get so frustrated when trying to debug a 4k line javascript file. — John
– John, Commented Jun 14, 2012 at 14:51
In that case you can simply split it into smaller files without doing anything. You can modify prototype from multiple files just like that. File 1 can have myForm.prototype.doStuff = file 2 can have myForm.prototype.setValues = and so on to make a super simplified example — Esailija
– Esailija, Commented Jun 14, 2012 at 14:53
Yes, that exactly what I was trying to do. I guess this is what happens when you try and do something with you don't fully grasp. — John
– John, Commented Jun 14, 2012 at 15:13

Esailija · Accepted Answer · 2012-06-14 15:16:31Z

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 :)

answered Jun 14, 2012 at 15:16

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

Comments

chrisfrancis27 · Accepted Answer · 2012-06-14 14:39:34Z

0

To me, that looks a bit strange. I mean, you're constructing objects for their 'side-effects' (adding properties to a different object's prototype), and then throwing them away immediately:

myForm(){
    ...
    new myFormLoadActions();
    ...
}

The object that you've "newed up" doesn't actually do anything after instantiation, and you're not holding a reference to its instance, so it would be better just to be a callable function:

myForm(){
    ...
    myFormLoadActions(this);
    ...
}

That's just my humble opinion though, feel free to argue!

answered Jun 14, 2012 at 14:39

chrisfrancis27

4,5361 gold badge26 silver badges32 bronze badges

Comments

sv_in · Accepted Answer · 2012-06-14 14:44:14Z

0

I would recommend this approach coz it seems more neat to me and also not difficult to debug.

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

myForm.prototype = {
    loadValues: function(){ /*...*/),
    setValues: function(){ /*...*/),
    doStuff: function(){ /*...*/),
    .
    .
    .
}

Another approach:

myForm(){
    this.property1 = "Prop1";
    this.property2 = "Prop2";
    addFunctionsToPrototype();
}
addFunctionsToPrototype(){
    myForm.prototype.loadValues = function(){ /*...*/);
    myForm.prototype.setValues = function(){ /*...*/);
    myForm.prototype.doStuff = function(){ /*...*/);
}

answered Jun 14, 2012 at 14:44

sv_in

14k9 gold badges38 silver badges55 bronze badges

Collectives™ on Stack Overflow

Refactoring javascript objects with a large number of prototyped functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related