Как писать лучшие модули JavaScript

Как и любые другие приложения, приложения на JavaScript также должны быть хорошо написаны.

В противном случае позже мы столкнемся с самыми разными проблемами.

В этой статье мы рассмотрим некоторые передовые практики, которым следует следовать при написании модулей JavaScript.

Предпочитать именованный экспорт

Именованный экспорт должен быть импортирован по имени, под которым экспортируется член.

Это отличается от экспорта по умолчанию, который можно импортировать под любым именем.

Следовательно, именованный экспорт менее запутан, чем экспорт по умолчанию.

Например, вместо того, чтобы писать:

export default class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

Мы пишем:

export class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

Первый пример можно импортировать с любым именем.

Второй должен быть импортирован как Person.

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

Нет работы во время импорта

Мы не должны ничего делать с нашим экспортированным кодом.

Легко получить неожиданные результаты, если мы экспортируем что-то с работающим выражением.

Например, следующий экспорт не годится:

config.js

export const config = {
  data: JSON.parse(str)
};

Работа по-прежнему будет выполнена после завершения экспорта, поэтому мы получаем последнее значение.

Когда мы его импортируем, вызывается JSON.parse.

Это означает, что импорт будет медленнее.

Если у нас есть:

import { config } from 'config';

Тогда будет запущен JSON.parse.

Чтобы JSON.parse работал лениво, мы можем написать:

config.js

let parsedData = null;
export const config  = {
  get data() {
    if (parsedData === null) {
      parsedData = JSON.parse(str);
    }
    return parsedData;
  }
};

Таким образом, мы кэшируем проанализированную строку в parsedData.

JSON.parse выполняется, только если parsedData равно null.

Модули высокой когезии

Сплоченность описывает степень, в которой компоненты внутри модуля принадлежат друг другу.

Мы должны убедиться, что модуль принадлежит друг другу.

Это означает, что у нас должны быть связанные сущности в одном модуле.

Например, мы можем создать math модуль с функциями, выполняющими арифметические операции.

Мы можем написать:

math.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

Все функции выполняют одинаковые функции, поэтому они принадлежат одному модулю.

Если у нас есть модули с низкой связностью, тогда трудно понять, что у них есть.

Несвязанные вещи в одном модуле просто не имеют смысла.

Избегайте длинных относительных путей

Трудно найти модуль, если они глубоко вложены.

Мы должны избегать глубокого вложения, чтобы избежать длинных относительных путей.

Итак, вместо того, чтобы писать:

import { addDates } from '../../date/add';
import { subtractDates }   from '../../date/subtract';

Мы пишем:

import { addDates } from './date/add';
import { subtractDates } from './date/subtract';

Если мы поместим их в пакет Node, мы сможем использовать абсолютные пути:

import { addDates } from 'utils/date/add';
import { subtractDates } from 'utils/date/subtract';

Мы помещаем все в пакет utils, чтобы мы могли ссылаться на него по абсолютному пути.

Заключение

Мы должны делать связные модули, чтобы облегчить их понимание.

Кроме того, именованный экспорт лучше, чем экспорт по умолчанию.

Мы должны экспортировать код, который действительно работает во время экспорта, поскольку он будет работать, когда мы его импортируем.

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!