Использование шаблона прототипа для клонирования и изменения компонентов Ui в Ember.js

Введение в шаблон прототипа и Ember.js

Паттерн прототипа является одним из основополагающих шаблонов креационного дизайна, каталогизированных в книге «Банда четырех» (GoF). Его основная идея проста, но мощна: вместо того, чтобы создавать объекты с нуля с помощью конструкторов или заводов, вы создаете новые объекты, клонируя существующий экземпляр — прототип. Этот шаблон превосходит, когда создание объектов дорого, когда количество различных типов объектов велико, но их различия незначительны или когда вам нужно уменьшить сложность иерархий подклассов.

В контексте Ember.js, зрелой структуры для создания амбициозных веб-приложений, шаблон прототипа может быть применен к управлению компонентами пользовательского интерфейса. Система компонентов Ember уже разработана вокруг многоразового использования и инкапсуляции, но по мере роста приложений разработчики часто обнаруживают, что создают много похожих компонентов, которые отличаются только несколькими свойствами - типами кнопок, вариантами карт, входами форм с различными правилами проверки. Без структурированного подхода к клонированию это приводит к повторяющейся шаблонной и разрозненной логике настройки. Используя шаблон прототипа, вы можете поддерживать один источник истины для поведения и внешнего вида компонента по умолчанию, клонировать его, а затем модифицировать только те части, которые необходимо изменить.

В этой статье вы узнаете о теории, лежащей в основе шаблона прототипа, покажите, как реализовать его в Ember.js с конкретными примерами кода, обсудите его преимущества и подводные камни и предоставьте рекомендации о том, когда использовать или избегать этого шаблона в ваших собственных проектах.

Понимание шаблона прототипа в глубине

Паттерн прототипа основан на концепции прототипного наследования, которая является родной для самого JavaScript.Каждый объект JavaScript имеет внутреннюю цепочку , которая позволяет делегировать свойства. Однако шаблон дизайна выходит за рамки языковой механики: он вводит выделенный объект прототипа, который служит шаблоном для всех клонов. Клиентский код никогда не называет «новым» на конструкторе; вместо этого он вызывает метод на прототипе, который возвращает новый объект с той же структурой и состоянием, что и оригинал.

Ключевые участники в шаблоне:

В таких языках, как Java или C++, клонирование часто требует реализации и тщательного обращения с глубокими и неглубокими копиями.В JavaScript, поскольку объекты уже динамически расширяемы, клонирование более простое, но оно также вводит тонкости вокруг обмена ссылками.

Для разработчиков Ember.js понимание этой модели не просто академическое. Собственная объектная модель Ember, построенная на , обеспечивает метод , который может быть использован для инстанцирования объектов из базового объекта. Однако больше похожа на фабрику, чем на клон — он сбрасывает большинство внутренних состояний. Истинное клонирование означает сохранение существующих значений свойств от прототипа, а не только структуры.

Применение шаблона прототипа к компонентам Ember.js

Компоненты в Ember — это экземпляры классов, определенных через или более старые . В современном Ember (Octane и далее) компоненты поддерживаются родными классами JavaScript, и каждый экземпляр имеет собственное состояние (аргументы, отслеживаемые свойства). Паттерн прототипа может быть реализован на нескольких уровнях: вы можете клонировать класс компонентов (создавая новый класс компонентов с модифицированными по умолчанию), или вы можете клонировать компонент инстанция после того, как он был визуализирован — хотя последний более сложен и менее распространен.

Классы компонентов клонирования с помощью прототипа

Представьте, что у вас есть компонент , который определяет поведение по умолчанию (например, действие клика, которое запускает событие, метка по умолчанию «Отправить», класс CSS по умолчанию «btn»). Вы хотите создать и без переписывания всего шаблона или файла JavaScript.

Один из подходов заключается в использовании наследования по классу Эмбера: . Но наследование создает статические отношения между родителями и детьми. Паттерн прототипа предлагает более динамичный подход: вы можете хранить экземпляр компонента «прототипа» (или простой объект со всеми свойствами по умолчанию) и клонировать его для создания новых экземпляров с настраиваемыми настройками.

Вот упрощенный пример использования сервиса, который действует как реестр прототипов:


// app/services/component-prototypes.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class ComponentPrototypesService extends Service {
 @tracked prototypes = new Map();

 registerPrototype(name, prototypeObject) {
 this.prototypes.set(name, prototypeObject);
 }

 clonePrototype(name, overrides = {}) {
 const prototype = this.prototypes.get(name);
 if (!prototype) {
 throw new Error(`Prototype '${name}' not found`);
 }
 // Create a shallow copy of the prototype properties
 const clone = Object.assign({}, prototype, overrides);
 return clone;
 }
}

Затем в вашем приложении вы регистрируете прототип базовой кнопки:


// app/initializers/register-prototypes.js
export function initialize(application) {
 const service = application.lookup('service:component-prototypes');
 service.registerPrototype('button', {
 componentName: 'base-button',
 args: {
 text: 'Submit',
 type: 'button',
 action: 'defaultAction',
 theme: 'primary',
 },
 });
}

Если вам нужна кнопка удаления:


const deleteButtonConfig = service.clonePrototype('button', {
 args: {
 text: 'Delete',
 theme: 'danger',
 action: 'deleteRecord',
 },
});
// Then render using

Такой подход отделяет конфигурацию от шаблона компонентов и позволяет создавать множество вариантов с минимальным кодом.

Клонирование компонентов (клонирование в режиме реального времени)

Клонирование уже отредактированных экземпляров компонентов сложнее, потому что компоненты Ember имеют крючки жизненного цикла, внутреннее состояние (отслеженные свойства) и ассоциации DOM. Если вам нужно дублировать компонент, с которым пользователь уже взаимодействовал (например, строка формы, которая заполнила данные), вы должны глубоко скопировать его отслеживаемое состояние и аргументы.

Практическая схема заключается в использовании «снимка» аргументов компонента и внутреннего состояния, а затем в построении нового экземпляра с этими снимками. Помощник Эмбера может использоваться для динамического отображения компонентов из объекта конфигурации. Например, с помощью помощника :


// In a template
{{#each this.clonedConfigs as |config|}}
 <component @name="base-button" @config={{config}} />
{{/each}}

Логика JavaScript снимет аргументы исходного компонента с помощью и любого отслеживаемого внутреннего состояния с помощью . Затем вы создаете новый объект конфигурации и толкаете его в массив . Это не настоящий клон экземпляра (новый компонент будет иметь новый жизненный цикл), но он достигает того же эффекта: копия текущего внешнего вида и поведения компонента.

Пример: создание тематической кнопочной семьи

Давайте расширим пример кнопки в полный готовый к производству сценарий. Предположим, вы создаете систему проектирования с несколькими вариантами кнопок: первичный, вторичный, успех, опасность, предупреждение, контур и ссылка. Каждый вариант отличается цветом фона, границей, цветом текста, эффектами наведения, а иногда и поведением (например, кнопка «опасность» может потребовать диалога подтверждения).

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

Шаг 1: Определите компонент базовой кнопки

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


// app/components/base-button.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class BaseButton extends Component {
 get text() {
 return this.args.config.text || 'Button';
 }
 get theme() {
 return this.args.config.theme || 'primary';
 }
 get className() {
 return `btn btn-${this.theme}`;
 }
 @action
 handleClick() {
 if (this.args.config.action) {
 this.args.config.action.call(this);
 }
 }
}


{{! app/components/base-button.hbs }}
<button type="button" class={{this.className}} {{on "click" this.handleClick}} disabled={{@config.disabled}}>
 {{this.text}}
 {{#if @config.icon}}
 <span class="icon">{{@config.icon}}</span>
 {{/if}}
</button>

Шаг 2: Создайте кнопочную фабрику с прототипом клонирования

Вместо простого объекта мы можем использовать класс , который включает в себя методы для общих настроек.


// app/services/button-prototype.js
import Service from '@ember/service';

export default class ButtonPrototypeService extends Service {
 constructor() {
 super(...arguments);
 this._registry = new Map();
 this._registerDefaults();
 }

 _registerDefaults() {
 const base = {
 text: 'Submit',
 theme: 'primary',
 disabled: false,
 icon: null,
 action: null,
 confirmation: null,
 };
 this._registry.set('button', { ...base });
 }

 registerVariant(name, overrides) {
 const base = this._registry.get('button');
 if (!base) throw new Error('Base button prototype not found');
 const variant = { ...base, ...overrides };
 this._registry.set(`button:${name}`, variant);
 }

 clone(name, customOverrides = {}) {
 const prototype = this._registry.get(name);
 if (!prototype) throw new Error(`Prototype '${name}' not found`);
 return { ...prototype, ...customOverrides };
 }
}

Шаг 3: Регистрировать вариации

В инициализаторе или маршруте:


this.buttonPrototype.registerVariant('danger', {
 text: 'Delete',
 theme: 'danger',
 confirmation: 'Are you sure?',
 action: () => alert('Deleted!'),
});
this.buttonPrototype.registerVariant('success', {
 text: 'Save',
 theme: 'success',
 icon: 'check',
});

Шаг 4: Используйте шаблон


<BaseButton @config={{this.buttonPrototype.clone 'button:danger'}} />
<BaseButton @config={{this.buttonPrototype.clone 'button' (hash text='Create New' theme='primary')}} />

Этот шаблон уменьшает дублирование и делает тривиальным добавление новых вариантов кнопок — просто регистрируйте новый прототип с перезагрузками.

Глубокое клонирование против мелкого клонирования в Эмбере

При клонировании объектов, содержащих вложенные структуры данных (например, массивы объектов), необходимо выбирать между мелкой и глубокой копиями. Неглубокая копия копирует ссылки; клон по-прежнему указывает на одни и те же лежащие в основе объекты. Глубокая копия создает совершенно новые объекты рекурсивно.

В Ember аргументы компонентов () часто плоские (струны, числа, булевы), но иногда они включают массивы или объекты. Например, выпадающий компонент может иметь массив . Если вы мелкоклонируете прототип, все выпадающие экземпляры будут иметь один и тот же массив, а варианты мутирования в одном компоненте будут влиять на другие. Это обычно нежелательно.

Для выполнения глубокого клонирования в JavaScript можно использовать (поддерживаемый в современных браузерах и Node.js 17+) или библиотеку, подобную Lodash's . помощник Эмбера от также обеспечивает функциональность глубокой копирования. Пример:


import { copy } from '@ember/object/internals';
const deepClone = copy(prototype, true); // true for deep

Будьте осторожны при клонировании объектов, которые содержат прокси-серверы Ember или отслеживаемые свойства - они могут не сериализоваться должным образом. Часто безопаснее сохранять прототип объектов простыми, простыми объектами JavaScript (POJO) без специфичной для Ember реактивности. Затем клонированный конфигуратор может быть передан компоненту, который интерпретирует его.

Сравнение прототипа с другими моделями в Эмбере

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

Прототип vs. наследование класса

Ember поддерживает наследование классов для компонентов. Вы можете писать и переопределять свойства. Это работает, но создает фиксированную иерархию. Если вам позже понадобится кнопка, которая сочетает в себе характеристики двух вариантов (например, небольшая кнопка опасности), вам понадобится множественное наследование или миксы, которые могут запутаться. Паттерн прототипа, с другой стороны, позволяет динамически сочинять переопределения во время выполнения без создания новых классов.

Прототип vs. Фабричный шаблон

Фабричный шаблон также централизует создание объектов, но он обычно каждый раз возвращает новый экземпляр на основе параметров, а не клонов существующего объекта. Разница незначительна: завод может жестко закодировать логику создания, в то время как основанный на прототипе подход хранит данные шаблона внешне. Паттерн прототипа более гибкий, когда сам базовый шаблон может изменяться во время выполнения (например, пользовательские настраиваемые темы). Кроме того, шаблон прототипа позволяет создавать реестр прототипов, который может быть сериализован и десериализирован (спасен как JSON), что сложнее с заводами.

Прототип vs. шаблон декоратора

Паттерн Декоратора добавляет поведение к объекту, не изменяя его структуру. Паттерн Прототипа создает копию, а затем модифицирует ее. Их можно комбинировать: можно клонировать прототип, а затем украшать его дополнительным поведением с помощью миксов или компонентов более высокого порядка.

Преимущества использования шаблона прототипа в Ember.js

Потенциальные подводные камни и когда следует избегать шаблона

Внешние ресурсы и дальнейшее чтение

Для более глубокого понимания шаблона прототипа в JavaScript и Ember рассмотрите следующие ресурсы:

Вывод: Интеграция шаблона прототипа в рабочий процесс вашего Эмбер

Паттерн прототипа является универсальным инструментом в наборе инструментов разработчика Ember.js, особенно для управления вариантами компонентов пользовательского интерфейса. Храня конфигурацию компонента по умолчанию в качестве прототипа и клонируя ее с перезагрузками, вы можете значительно уменьшить дублирование, улучшить согласованность и достичь высокой степени гибкости среды выполнения. Паттерн хорошо согласуется с моделью компонентов Ember и может быть реализован с использованием простых объектов JavaScript, служб или даже объектной системы Ember.

Как и в случае с любым шаблоном дизайна, ключ заключается в его разумном использовании. Начните с небольшого набора компонентов, которые имеют четкие варианты (кнопки, карты, списки). По мере того, как вы обретаете уверенность, вы можете расширить шаблон до более сложных сценариев. Объединив шаблон прототипа с реактивной системой Ember и помощниками компонентов, вы можете создать бережливую, масштабируемую архитектуру пользовательского интерфейса, которая адаптируется к изменяющимся требованиям без растягивания кода.

Помните, что цель состоит не в том, чтобы следовать шаблону ради него самого, а в том, чтобы сделать ваш код более удобным для обслуживания, а процесс разработки более эффективным. Когда вы обнаружите, что вставляете один и тот же шаблон компонентов в дюжину файлов, остановитесь и спросите: «Могу ли я создать прототип и клонировать его вместо этого?» Ответ часто приведет вас к более чистому, более элегантному решению.