Перейти к содержанию

Обзор композиции

Композиция — это стратегия управления сложностью и организации кода в многократно используемые части. Lit предоставляет несколько вариантов композиции и повторного использования кода:

  • Композиция компонентов.
  • Реактивные контроллеры.
  • Миксины классов.

Компонентная композиция — это процесс сборки сложных компонентов из более простых. Компонент может использовать подкомпоненты в своем шаблоне. Компоненты могут использовать стандартные механизмы DOM для взаимодействия: устанавливать свойства для подкомпонентов и прослушивать события от подкомпонентов.

Хотя композиция компонентов — это стандартный способ разбить сложный проект Lit на более мелкие части, есть еще два заметных паттерна кода, полезных для факторизации вашего кода Lit:

Реактивные контроллеры — это объекты, которые могут подключаться к жизненному циклу обновления компонента Lit, инкапсулируя состояние и поведение, связанное с функцией, в отдельную единицу кода.

Классы-миксины позволяют писать многократно используемые частичные определения компонентов и "подмешивать" их в цепочку наследования компонента.

И миксины, и реактивные контроллеры позволяют объединить логику компонента, связанную с определенной функцией, в единый модуль многократного использования. Сравнение контроллеров и миксинов приведено в следующем разделе.

Контроллеры и миксины

Контроллеры и миксины классов в чем-то очень похожи. Они оба могут подключаться к жизненному циклу хост-компонента, поддерживать состояние и вызывать обновления хоста.

Основное различие между контроллерами и миксинами заключается в их отношениях с компонентом. Компонент имеет отношения "has-a" с реактивным контроллером, поскольку он является его владельцем. Компонент имеет отношения "есть-есть" с миксином, поскольку компонент является экземпляром класса миксина.

Реактивный контроллер — это отдельный объект, принадлежащий компоненту. Контроллер может обращаться к методам и полям компонента, а компонент — к методам и полям контроллера. Но контроллер не может быть (легко) доступен кому-то, кто использует компонент, если только компонент не раскрывает для него публичный API. Методы жизненного цикла контроллера вызываются прежде соответствующего метода жизненного цикла компонента.

Миксин, с другой стороны, становится частью цепочки прототипов компонента. Любые публичные поля или методы, определенные миксином, являются частью API компонента. А поскольку миксин является частью цепочки прототипов, ваш компонент имеет некоторый контроль над тем, когда вызываются обратные вызовы жизненного цикла миксина.

В целом, если вы пытаетесь решить, как упаковать функцию — как контроллер или как миксин, вам следует выбрать контроллер, если только функция не требует одного из следующих условий:

  • Добавление публичного API к компоненту.
  • Очень подробный доступ к жизненному циклу компонента.

Комментарии