0

I have a single file that looks like this:

cars.js:

class Cars {

    Saab(){
        return 'Saab';
    }

    Volvo(){
        return 'Volvo';
    }

}

var cars = new Cars();

Now I want to separate them in files to organise my code:

saab.js

class Cars {
    Saab(){
        return 'Saab';
    }
}

volvo.js

class Cars {
    Volvo(){
        return 'Volvo';
    }
}

cars.js

/**
 * Some magic
 */
var cars = new Cars(); // contains function Volvo() and Saab()

How can I do this?

PS:
The problem with extends (class Saab extends Cars) is that I now need to call new Saab() or new Volvo() and that's not what I want, I want to call new Cars().

Bob van Luijt
  • 7,153
  • 12
  • 58
  • 101
  • 1
    Hmm, really odd approach. Why would you need to split a class? If you want to split your code use modules, inheritance, composition, whatever... not a single class. – Yury Tarabanko Apr 21 '16 at 20:00
  • Currently, I use modules, I wanted to have the advantage of the constructor function though. I guess I'm looking in the wrong direction. Thanks for the insight though. – Bob van Luijt Apr 21 '16 at 20:14
  • The `Cars` class doesn't make sense. I guess what you want is a module that simply "bundles" all the constructors for the car models. This would look like `export {default as Volvo} from './Volvo.js'; ...`. – Felix Kling Apr 21 '16 at 20:44

2 Answers2

1

Kind of an odd approach but the only way to pull that off is with pre-ES6 techniques. Namely, extending the prototype.

// volvo.js
Cars.prototype.Volvo = function() {
  return 'Volvo';
};

// saab.js
Cars.prototype.Saab = function() {
  return 'Saab';
};

Technically, this is what happens "under the hood" with class syntax. So this is how it has to be done if you don't set all of your methods in the class declaration.

Mike Cluck
  • 31,869
  • 13
  • 80
  • 91
  • Aha, cool. The problem I'm trying to solve is this, in my class I have about 150 functions ('car models'). Any other thoughts how I might organise the code? – Bob van Luijt Apr 21 '16 at 20:01
  • @BobvanLuijt Absolutely. No class should have 150 functions. That class is doing too much. Do those functions share a common thread? As in, are they very similar functions but things a little bit differently? Or are you actually using them as "models" (constructors)? – Mike Cluck Apr 21 '16 at 20:03
  • I'm really struggling avoiding an anti-pattern. Obviously, 150 is too much, but from a readability PoV it is kinda logical. I guess I have to -indeed- figure out how to shape my specific problem into constructors. Thanks for the insights though. – Bob van Luijt Apr 21 '16 at 20:11
  • 1
    @BobvanLuijt It all depends on how you use it. Maybe try a more composition based approach. Either way, I hope I helped and wish you luck ;) – Mike Cluck Apr 21 '16 at 20:13
  • 1
    Yes you did. Thanks mate – Bob van Luijt Apr 21 '16 at 20:15
1

common.js

function Cars(){
    this.name='car'; 
    return this;
}
Cars.fn=Cars.prototype ;

Volvo.js

Cars.fn.volvo=function(){
     this.name='Volvo';
     return this.name;
}

Saab.js

Cars.fn.saab=function(){
     this.name='Saab';
     return this.name;
}

impl.js

 var c1=new Cars();
 c1.volvo();
 //......

In HTML page, import your JS in this order : 

 <script src="common.js"></script>
 <script src="Volvo.js"></script>
 <script src="Saab.js"></script>
 <script src="impl.js"></script> <!-- where  use API -->
Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254