Чтобы получить больше удовольствия от чтения, ознакомьтесь с оригинальной и полной статьей, размещенной на сайте enmascript.com 5 октября 2018 г.
При создании функций нам часто нужно создавать экземпляры на основе параметров, поступающих из конечной точки или аналогичного динамического источника. В этой статье я попытаюсь дать вам представление о том, как мы можем использовать шаблон с одной фабрикой в таких случаях.
Мы проведем рефакторинг фрагмента кода, чтобы сделать его более масштабируемым и понятным. Предположим, у нас есть такая предпосылка:
По заданному объекту данных элемента напишите алгоритм, который позволит пользователям указывать тип элемента для его динамической визуализации. Кроме того, проверьте элементы по мере необходимости:
- Общие текстовые поля ввода, такие как адрес электронной почты и пароль, должны быть проверены.
- Убедитесь, что разрывы строк удалены из элементов textarea.
Пример источника данных, назовем его elementsData.js:
export default {
elements: {
email: {
type: 'email',
text: 'Email',
name: 'userEmail'
},
summary: {
type: 'textarea',
text: 'Summary',
name: 'summary'
},
role: {
type: 'select',
text: 'Role',
name: 'role',
options: [
{
value: 1,
display: 'Software Developer'
},
{
value: 2,
display: 'Designer'
},
{
value: 3,
display: 'Manager'
},
...
]
},
...
}
};
Не масштабируемый подход
Теперь я напишу, что может быть псевдо «решением» для динамического создания типов элементов формы и их проверки (обратите внимание, что я буду определять только те методы, которые важны для целей этой статьи):
import config from './elementsData';
export default class FormElement {
constructor(type) {
this.type = type;
this.elements = config.elements;
}
getElementByType() {
return this.type in this.elements ? this.elements[this.type] : null;
}
/* This would validate our email*/
emailValidator() { ... }
/* this would remove line breaks from our textareas */
textareaSanitizer() { ... }
/* We would use this to bind all the validators and sanitizers events */
bindEventListeners() { ... }
renderFormElement() {
const element = this.getElementByType();
if (!element) {
return false;
}
switch(this.type) {
case 'email':
return `
<div class="field-wrapper">
<input type="email" name=${element.name} placeholder=${element.text} />
</div>
`;
break;
case: 'textarea':
return `
<div class="field-wrapper">
<textarea name=${element.name} placeholder=${element.text} />
</div>
`;
case 'select':
return `
<div class="field-wrapper">
<select name=${element.name}>
${element.options.map(option => `
<option value=${option.value}>
${option.display}
</option>
`)}
</select>
</div>
`;
}
}
}
и мы создадим экземпляр класса в нашем main.js, например:
const formElement = new FormElement('email'); formElement.renderFormElement();Это должно работать, верно? Мы потребляем данные, динамически создаем элементы и проверяем их… НО, есть некоторые вещи, которых мы не видим, я хочу, чтобы вы подумали в будущем, что произойдет с этим классом, когда вы или кому-то еще нужно добавлять все больше и больше элементов формы?, метод renderFormElements будет расти, и в итоге мы получим огромный метод с бесконечными условиями, методами проверки, и не будем даже говорить о сложности и масштабируемости.
Реализация одной фабрики
Фабричный шаблон — это шаблон проектирования, который является частью группы creational. Он в основном касается проблемы создания объектов, когда класс, который создает его экземпляр, должен быть динамическим, а также очень помогает в организации вашего кода. , так как:
- Изолирует объекты, которые необходимо создать.
- Продвигает небольшие классы с меньшей ответственностью.
- Ответственность за создание объекта делегирована классу под названием «фабрика».
- Создает экземпляры, получая динамическое значение в вашей точке входа.
Вот визуальное представление, которое я создал, чтобы продемонстрировать, как работает фабрика.
Теперь мы начнем с рефакторинга нашего решения на основе списка, который мы создали выше, давайте начнем: Продолжить чтение на enmascript.com
