is there a way to put the method functions of a class, in separate files (javascript)?

Question

if there is a way to split and make the code of every method in a separate file?

so I can have clean code and be simple and easier to maintain.

for now, I have a structure like this (minimal reproducible example):

// there is also a parentClass
// and I want to make sure that the method be inside parent
// so I can modify all the childs
// with the same method

class Parent {
  // myMethod.js
  myMethod() {
    // my long code
  }

  //secondMethod.js
  secondMethod() {
    // my long code
  }

  // thirdMethod.js
  thirdMethod() {
    // my long code
  }
}
class Child extends Parent {
  constructor() {
    this.someData = "someData";
  }
}

// this need to work after putting the file externally for example
new Child.myMethod();

but I want that the methods be in separate files

something like this:

the problem is how can a method know that is been part of a specific Class and not another Class for example.

---

for example If we want to separate the Child from parentClass, this is easy:

• thanks to import, export, extends

import ParentClass from './ParentClass.js';

// here since we have "extends" the child class know that is been part of Parent.
export default class Child extends ParentClass {
  // my child things and it will work
}

// but methods don't have extends or similar thing? 
// and if yes how we can export them? 
// export as a function? 
// (but they aren't function, they are methods?)

---

so what do I want?

1. method -> file
2. file -> method can be exported
3. method -> parentClass can import it
4. import -> method be part of parentClass
5. method ParentClass -> get extended to all childs
6. method extended -> read (and change) correctly the values of this. (like it was before inside with code splitting)

Answer 1

Some languages support partial classes, which is similar to what you are requesting. They don't get used a great deal as they make it hard to understand a class when it's internals are scattered around your project.

A more OOP way to solve your problem is to look at the parts you label // my long code.

You can usually break up that code and place it in other classes that you delegate the request to. For example, if your long code does many things:

myMethod(input) {
    // Map the input into a different shape
    // Part of the long code
    // Perform some form of calculation on some values
    // Another part of the long code
    // Create a response object and return it
    // This part probably isn't too long
    return response;
}

You might be able to split these up by creating a class that does mapping and a class that does the calculation. This means the mapping and calculation are easily used from other places and reduces the length of code in your method:

myMethod(input) {
    const mapped = this.specificMapper.map(input);
    const response = this.specificCalculator.calculate(mapped);
    return response;
}