Модули

in ES6

Святая корова — мой очень длинный файл JavaScript. Это становится довольно беспокойным в середине, где я определяю классы. И где я снова поместил эту функцию? Там должен быть лучший способ!

МОДУЛИпозволяют разделить наш код на составные части и организовать его соответствующим образом.

Другие синтаксисы — до их включения в стандартный JavaScript, начиная с ES6 (ES2015), существовало несколько конкурирующих стандартов для определения модулей.

Node.js/стиль CommonJS

• такие утверждения, как const module = require('./mod.js'); и
• module.exports = class Doohickey {}

Стиль AMD/RequireJS

• утверждения типа define(idString, dependenciesArray, factoryFunction);

Импорт Экспорт

Внутри модуля, из которого вы хотите экспортировать функции:

export const a;
export function b() {};
export class C {};
// -- or --
export { a, b, C };

альтернативно для одного экспорта:

export default d;

Внутри скрипта вы хотите добавить функции модуля:

import { a, b, C } from './modules/abc.js';

и снова поочередно:

import d from './modules/d.js';
// -- or --
import whateverNameYouWant from './modules/d.js';

Вы также можете переименовывать вещи, как вам нравится:

export {
  a as apple,
  b as banana,
  C as Coconut
}
// in the importing script
import { 
  apple, 
  banana, 
  Coconut 
} from './modules/abc.js';

Вы также можете сделать это в обратном порядке.

export {
  a,
  b,
  C
}
// in the importing script
import { 
  a as apple, 
  b as banana, 
  C as Coconut
} from './modules/abc.js';

Эти функции теперь готовы к использованию, как если бы они были определены в том же скрипте.

Чтобы они работали с HTML, оба сценария должны быть явно определены как модули.

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

Вам также необходимо выполнять все ваши тесты через сервер, так как открытие HTML-файла напрямую вызовет ошибку CORS.

Объекты модуля

Мобъекты.

import * as CoolModule from './modules/coolModule.js';

Это меня зацепило, так как часто вы видите звездочку * как символ «всего» или «всего». Затем вы можете использовать функции в модуле как методы объекта.

CoolModule.coolFunction();

D Y N A M I C L O A D I N G

Если вы используете этот синтаксис, функция импорта вернет обещание, которое выполняется с объектом модуля.

import('./modules/coolModule.js')
  .then(module => {
    // cool async stuff
});

Модули!