В этой статье мы анализируем класс DefaultMap в исходном коде CSS Tailwind. Это карта, которая может генерировать значения по умолчанию для несуществующих ключей. Сгенерированные значения по умолчанию добавляются на карту, чтобы избежать повторных вычислений.

/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap extends Map {
  constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}

В JavaScript есть Map API, но нет DefaultMap. Этот DefaultMap — это пользовательский класс, который расширяет Map в исходном коде CSS Tailwind.

Давайте разберемся в этом коде.

constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
}

DefaultMap — это класс, имеющий конструктор, ожидающий фабричной функции. super() вызывает конструктор родительского класса, в данном случае это Map API, а второй параметр фабричной функции — self: DefaultMap, что означает, что у него есть доступ к экземпляру Map.

Как инициализируется DefaultMap?

Давайте найдем пример, где инициализируется эта DefaultMap. design-system.ts демонстрирует использование DefaultMap.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

Здесь (вариант) => parseVariant(variant, designSystem) становится нашим фабричным методом, который добавляет значение по умолчанию, если ключ не существует.

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }

Это значение, возвращаемое функцией parseVariant.

О нас:

В Think Throo мы стремимся обучать передовым архитектурным концепциям кодовой базы, используемым в проектах с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в Next.js/React, изучайте лучшие практики и создавайте проекты промышленного уровня.

У нас открытый исходный код — https://github.com/thinkthroo/thinkthroo (дайте нам звезду!)

Мы также предоставляем услуги веб-разработки и технического написания. Свяжитесь с нами по адресу [email protected], чтобы узнать больше!

Ссылки:

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L40

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516