JavaScript导出类，而不仅仅是在索引文件中引用它们

Question

Why would I write separate classes in separate files, just to need to reference them in a central file main.js

import Class1 from "./Class1.js";
import Class2 from "./Class2.js";
export default {
  Class1,
  Class2
};

and then reference that central file in index file

<script src="main.js"></script>

instead of just reference them all in index file, which is simpler

<script src="Class1.js"></script>
<script src="Class2.js"></script>

in both cases I can create instances:

const class1 = new Class1();
const class2 = new Class2();

Why is the first approach better?

Answer 1

It's depends on you need. For example, in the main file you need to operate with two classes then you have to import them. But, if the two classes does not have anything in common is better import each one when is needed. In the last example, if you just need to work with one class and you the first approach ( import them in main.js ) you're loading unnecessary files and for instance using unnecessary resources.

Answer 2

Its for better code maintainability.

Lets, suppose you have 100 files, which used different classes.

If we want to add new class to these 100 files, you need to edit them all. But if you have main.js, you just need to update 1 file only.