ES6 Module: Shared class best approach

Question

Considering the following where both the importer and a module use another module:

main.js:

export class Main {
  static func1() {}
  static func2() {}
  static func3() {}
}

one.js:

import { Main } from './main.js';
export { one };
// one also uses some methods in Main.

background.js:

import { Main } from './main.js';
import { one } from './one.js';

Would it be better if the process is done as a re-export?

main.js:

export class Main {
  static func1() {}
  static func2() {}
  static func3() {}
}

one.js:

import { Main } from './main.js';
export { one, Main };
// one also uses some methods in Main.

background.js:

import { one, Main } from './one.js';

First one is easier to read. Are there any performance concerns?

I doubt there’s any significant performance concerns given that a module is only executed once when imported anywhere in the module tree. — Sebastian Simon, Oct 30 '22 at 19:04
don't do the re-export. that's gonna be so confusing when things get more complicated. then again i would probably not use static methods either. instead I would give Main regular methods, instantiate the Main class, then pass the Main object into the constructor of the other two classes, to give them a reference to save and use when needed. but this is more of an opinion. — dqhendricks, Oct 30 '22 at 19:50
@dqhendricks Wouldn't that instantiate the Main class twice? Any examples? — erosman, Oct 30 '22 at 20:09
mixins are sort of how you derivce a class that has functions from other classes. — chovy, Oct 30 '22 at 20:47
Doing both `export { Main }` and `export class Main {…}` in the same module is an error. — Bergi, Oct 30 '22 at 21:10
[Don't export a `class` with only static methods!](https://stackoverflow.com/a/29895235/1048572) — Bergi, Oct 30 '22 at 21:11
@Bergi .. oops, right.... typo corrected. AFA `static` export, why is that? Of course this is a simplified example. — erosman, Oct 31 '22 at 04:52
@erosman Simplified or not, the rule of thumb is: if you never instantiate multiple `new Main` (or at least, one), then you shouldn't be using `class` syntax — Bergi, Oct 31 '22 at 12:49
@erosman Yes, or even better, just multiple named exports. See the link above. — Bergi, Oct 31 '22 at 14:02
@erosman no, you instantiate the main class once, then pass that one object into both classes that need to use it. — dqhendricks, Nov 01 '22 at 15:16
@dqhendricks Why would you use a `class` if you instantiate it only once? Use a simple object then. — Bergi, Nov 01 '22 at 15:20
@Bergi In a Utility type `class` with 10+ `static` methods, export/importing one by one could be cumbersome. Furthermore, it appears that a single class/object saved to a single memory location performs better than multiple variables saved to multiple locations in a browser extension environment. — erosman, Nov 01 '22 at 16:27
@erosman Exporting function declarations isn't really cumbersome, but still, what I'm arguing is that you should just use an object literal instead of a `class` if you need only a single instance (or none at all), that's even more memory-efficient. — Bergi, Nov 01 '22 at 18:19
@Bergi I am going to start a new topic for proper discussion. — erosman, Nov 01 '22 at 18:49

score 0 · Answer 1 · answered Oct 31 '22 at 08:36

0

ES modules only evaluate once, no matter how many times they are imported (and don't ever evaluate if they are not imported anywhere). You may check that by adding console.log into the outer scope of the module.

In your case, using import { Main } from './one.js'; will evaluate one.js module on top of main.js, but since your already import one from one.js that makes no difference at all.

answered Oct 31 '22 at 08:36

Dimava

7,654
1
9
24

1

Small caveat that feels worth mentioning: modules are identified by URL, so the same module can be imported twice (and execute twice) if the URL is different. They’re also identified by MIME type, at least in upcoming JS engines. – Sebastian Simon Oct 31 '22 at 15:55

ES6 Module: Shared class best approach

1 Answers1