Load Multiple JS Files As If They Were One?

Question

I am trying to break apart a very large JavaScript file. In this file, we have a hierarchy of classes, with many children of the root class. However, the root class has a function with a switch statement that returns a different object of one of its subclasses based on the argument. It looks like this:

class RootClass {
  static FromArg(arg) {
    switch (arg.Type) {
      case FirstType:
        return new FirstSubclass()
      case SecondType:
        return new SecondSubclass()
      ...
    }
  }
}

I kept the subclasses in other JavaScript files. They look like this:

class FirstSubclass extends RootClass {
  ...
}

When they were kept in a single JS file, this worked fine, because everything was defined in one file. However, when I try to break this apart and reference both JS files externally, I run into an issue. I can't load the JS file with the root class first because now the subclasses aren't defined. I also can't load the JS file with the subclasses first because then the root class they're inheriting from isn't defined. Is there a trick to load both of these files into an html page as if they were still in a single JavaScript file?

Edit: This question doesn't solve my problem because I am not trying to export a JS file to another JS file, but I'm looking for a way to load multiple JS files into an HTML file as if they were in one page.

Alex look into imports, requires and modules and perhaps browserify since its simple and uses commonJS modules. — Michael Paccione, Jun 27 '19 at 18:17
i see the problem now. why is your factory code inside of the root class? separate the factory pattern from the root class, then you won't need to have the subclasses before downloading the root class. — dqhendricks, Jun 27 '19 at 18:41

score 1 · Accepted Answer · answered Jun 27 '19 at 18:51

consider separating your factory pattern from the root class. something like this:

class RootClassFactory {
    static ObjectFromArg(arg) {
        switch (arg.Type) {
            case FirstType:
                return new FirstSubclass()
            case SecondType:
                return new SecondSubclass()
            ...
        }
    }
}

class RootClass {

}

class FirstSubclass extends RootClass {
  ...
}

then just load in order of dependency, with the factory class last.

https://en.wikipedia.org/wiki/Factory_method_pattern

Load Multiple JS Files As If They Were One?

1 Answers1