Splitting Javascript Classes Into Different Files

I come from a C++ background, so I turn to header files to help me organize files and reduce file size. I'm new to object oriented programming in Javascript, and I have been searching for best practices on the equivalent of header files for classes or splitting classes up into multiple files. I could not find a definitive answer (and didn't know the best keywords to search on) but I did come up with something on my own. Since classes in Javascript are just special functions and functions are just Function objects, I toyed around with declaring the class itself and being able to add in functions later in the same way you can create an object and add key-value pairs in later. After learning a little bit more about what happens with classes under the hood, I realized that adding functions to the class's prototype had the same effect as adding the functions inside the class's body.

I went from something like this:

// animal.js
class Animal {
  noise() {
    return 'moo';
  }
}

to something like this:

// moo.js
function noise() {
  return 'moo';
}

module.exports = {
  noise,
};

//animal.js
const { noise } = require('./moo');
class Animal {}

Animal.prototype.noise = noise;

The main motivation behind looking into this was classes that could potentially get large and wanting to split those files up into smaller more digestable files. With this approach the class functions can be put into as many different files as need be and collected in the file where the class is declared. Is there a better or more standard way of doing this?

Comments

[JavaScript Joel]

If you are going this far, then you don't even need the class.

this:

class Animal {}

is the same as:

function Animal() { }

This is basically how classes were created prior to ES6.

You could use Object.assign to assign multiple functions at the same time:

function Animal() { }

Object.assign(Animal.prototype, { noise, name, move })

[Plinpod]

I do something similar but since I end up usually importing all the methods in a file I skip adding individual methods to the prototype. Essentially what Joel wrote but still using the class syntax and requiring the file directly.

class Animal {}

Object.assign(Anima.prototype, require('./moo'))

[Kevin]

I imagine the idea is similar to C# partial classes. I personally wouldn't split up a JavaScript "class" into multiple files just for organization. If a class gets too long, you have to really question why that is and if there's some refactoring to do.

The case for using "partial" classes is more about extending functionality. This is useful in template-built code, or if you feel like extending a third party library without modifying it. I would say it is like interfaces and abstractions, but you'd be better off using prototypical inheritance there.

So my final opinion! Don't do it just for organization or to keep file sizes small.