How to handle created Classes in javascript

Question

In my project, I have many .js files, I made each js file as a Class using prototype.js. For example, I have the following js files.

one.js -- Class name is "One"
two.js -- Class name is "Two"
three.js -- Class name is "Three"
Four.js -- Class name is "Four"

Each file depends on other js files. So, the possible structure of js files is something like this:

four.js

var Four = Class.create();
Four.prototype = {
    initialize : function(){

    },
    one:   new One(),
    two:   new Two(),
    three: new Three(),
    firstMethod: function(){
        var one = this.one;    //Initializing
        var two = this.two;
        var three = this.three;
        //do operations using the above class variables
    },
    secondMethod : function(){
        var one = this.one;    //again Initializing
        var two = this.two;
        //do operations using the above class variables
    }
}

three.js

var Three = Class.create();
Four.prototype = {
    initialize : function(){

    },
    one:   new One(),
    two:   new Two(),
    four: new Four(),
    firstMethod: function(){
        var one = this.one;    //Initializing
        var two = this.two;
        var four = this.four;
        //do operations using the above class variables
    },
    secondMethod : function(){
        var one = this.one;    //again Initializing
        var two = this.two;
        //do operations using the above class variables
    }
}

As you can see in the above code example, I am Initializing the class One two times in different methods of the class Four. This seems really worst because for every method I am initializing the same class which was already initialised.

EDIT: And also I am initializing One and Two classes more than once in js files three.js and four.js. The above explanation is just for example. Actually, in my project, there are js files more than 20.

In my project, I am following the same structure in all js files.

How should I make this structure efficient?

PS: A solution with less changes would be really helpful because this is a huge and running project and I don't want to take risks at this time.

Why are you making aliases for all the variables in each method? For example, your line var one = this.one; //Initializing. That isn't doing anything, except letting you write one instead of this.one in the rest of the function. — user229044
– user229044 ♦, Commented Jan 24, 2014 at 5:41
@meagar if I use this.one everywhere then it will initialize for every called method which is more times than it is happening now. — Mr_Green
– Mr_Green, Commented Jan 24, 2014 at 5:43
That doesn't seem true? You're initializing it once, on the line one: new One(),. — user229044
– user229044 ♦, Commented Jan 24, 2014 at 5:44
@meagar if I call it again then wouldn't that initialize again? I am thinking it will.. — Mr_Green
– Mr_Green, Commented Jan 24, 2014 at 5:45
No. Try it, put a console.log in your One initialize method. Invoking this.one doesn't initialize anything. It just accesses the already initialized variable. — user229044
– user229044 ♦, Commented Jan 24, 2014 at 5:46

ikaruss · Accepted Answer · 2014-01-24 06:07:27Z

1

In case you need separate versions in each method:

var Four = Class.create();

Four.prototype = {
  initialize : function(One, Two){
    // store for later use
    this.One = One;
    this.Two = Two;
  },
  firstMethod: function(){
      var one = new this.One(); // Initializing
      var two = new this.Two();
      //do operations using the above class variables
  },
  secondMethod : function(){
      var one = new this.One(); // again Initializing
      var two = new this.Two();
      //do operations using the above class variables
  }
};

// 'inject' needed class constructor functions
var four = new Four(One, Two);

In case you need single version for whole Four object:

var Four = Class.create();

Four.prototype = {
  initialize : function(One, Two){
    // initialize and use later this.Xxx
    this.One = new One();
    this.Two = new Two();
  },
  firstMethod: function(){
      //do operations using the above class variables
  },
  secondMethod : function(){
      //do operations using the above class variables
  }
};

// 'inject' needed class constructor functions
var four = new Four(One, Two);

edit:

var Four = Class.create();

Four.prototype = {
  initialize : function(one, two){
    // initialize and use later this.xxx
    this.one = one;
    this.two = two;
  },
  firstMethod: function(){
      //do operations using the above class variables
  },
  secondMethod : function(){
      //do operations using the above class variables
  }
};

// 'inject' needed objects
var four = new Four(new One(), new Two());

edited Jan 24, 2014 at 6:07

answered Jan 24, 2014 at 5:55

ikaruss

4914 silver badges14 bronze badges

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

4 Comments

ikaruss Over a year ago

You simply cannot use code which doesn't exist. If you want to use it, you must load it.

Mr_Green Over a year ago

Can I do like this? var four = new Four(new One(), new Two());.. any issues if I do like this?

Mr_Green Over a year ago

Thanks, I got idea after seeing your answer. I will initialize all these classes in a new js file which runs when the dom is ready. :)

vol7ron Over a year ago

In this case, I think it may be better to pass arguments as an object: var two = new Two(); var four = Four.initialize({two: Two}); inside initialize: function(params){ this.one = params.one || new One(); this.two = params.two || new Two(); }

Collectives™ on Stack Overflow

How to handle created Classes in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related