Javascript: расширить классы с неопределенным классом

Question

Рассмотрим следующие два файла:

/* file A.js */
class A extends B {

}

/* file B.js */
class B {

}

Если я случайно загружу эти два файла в браузер в обратном порядке (сначала A.js, затем B.js) javascript выдаст ошибку, я пытаюсь получить доступ к B, который не определен.

Моя проблема в том, что мне приходится иметь дело с 30-40 классами, определенными в Javascript, и сейчас, чтобы все они работали , Я должен иметь в виду порядок, в котором я хочу включить их на странице, или иначе, javascript выдаст ошибку, что я использую что-то неопределенное.

Как я могу решить это проблема, поэтому мне не нужно постоянно помнить порядок загрузки этих классов на веб-страницу?

Answer 1

Я бы разрешил это с помощью модулей. Модули декларируют свои зависимости явно, и вам нужно только сослаться на модуль верхнего уровня на странице; остальное будет загружено в соответствии с деревом зависимостей. Так, например, B.js будет:

export class B {
    // ...
}

Тогда A.js будет:

import { B } from "./B.js";
export class A extends B {
    // ...
}

Возможно, ваша основная точка входа (main.js или что-то еще) будет иметь:

import { A } from "./A.js";
// ...

Тогда ваша страница имеет

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

... и другие зависимости загружаются по мере необходимости.

Это работает с поддержкой собственных модулей в браузерах, и / или если вы используете такой пакет, как Rollup. js, Webpack, ...