{"draftJsState":{"blocks":[{"data":{"image":{"id":"6235193c42618e409a51e4c2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9cki"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"7iu8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Паттерн проектирования “Компоновщик” может быть универсальным решением для создания динамических пользовательских интерфейсов. При разработке веб-приложений мы работаем с DOM на стороне клиента. И это просто отличный вариант, учитывая структуру DOM.","type":"unstyled","key":"tke3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":94,"style":"ITALIC"}],"text":"Цель паттерна — объединить несколько объектов в древовидную структуру, представляющую собой иерархию “часть- целое”.","type":"unstyled","key":"9cmar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":76,"style":"ITALIC"},{"length":6,"offset":135,"style":"ITALIC"},{"length":13,"offset":152,"style":"ITALIC"},{"length":6,"offset":260,"style":"ITALIC"},{"length":4,"offset":267,"style":"ITALIC"},{"length":4,"offset":281,"style":"ITALIC"},{"length":6,"offset":427,"style":"ITALIC"}],"text":"Такой тип взаимоотношений предполагает, что каждый объект коллекции — это часть общей структуры, которая является совокупностью этих частей. Иерархия “часть-целое” представляет собой древовидную структуру, которая отличается единообразной трактовкой каждого листа (leaf) и узла (node). Данный принцип позволяет одинаково работать с ними в программе. Это значит, что совокупность или группа объектов (поддерево листьев/узлов) также является листом или узлом.","type":"unstyled","key":"7qcam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Описанная структура выглядит так:","type":"unstyled","key":"omsh"},{"data":{"image":{"id":"62351955988a6a0fb93276e5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d76tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В программной инженерии преимущества данного паттерна позволяют разработчикам работать с глубоко вложенными объектами и не беспокоиться о дальнейшей реализации. Эта эффективная техника помогает решать сложные задачи, в чем мы далее убедимся.","type":"unstyled","key":"8j6eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье мы приведем аргументы, доказывающие значимость паттерна “Компоновщик”.","type":"unstyled","key":"dglba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы работаете с коллекциями точно так же, как и с одиночными объектами","type":"header-three","key":"130pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможность одинаковым образом работать с объектами и их коллекциями значительно повышает эффективность.","type":"unstyled","key":"cgl5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вполне вероятно, что вы уже встречали код, использующий подобный принцип. Если вы имеете представление о DOM, то наверняка знакомы с такой операцией, как обход его дочерних узлов.","type":"unstyled","key":"ps6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const container = document.getElementById('root')\n\nfunction traverse(callback, elem) {\n if (elem.children.length) {\n for (const childNode of elem.children) {\n callback(childNode)\n traverse(callback, childNode)\n }\n }\n}","type":"unstyled","key":"63ump"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В структуре DOM узлы находятся в отношениях “часть-целое” с окружающими их узлами, что позволяет единообразно работать с DOM. Рассмотрим простой способ выделения потомка элемента img с помощью функции traverse:","type":"unstyled","key":"db7g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#gallery-container {\n margin: auto;\n}\n\n#gallery {\n display: flex;\n max-height: 200px;\n justify-content: center;\n}\n\n#gallery img {\n max-width: 100px;\n}\n\n.highlight {\n border: 1px solid magenta;\n}\n\nbutton {\n display: block;\n margin: auto;\n}","type":"unstyled","key":"987d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n\t\t

\n\t\t\n \t

","type":"unstyled","key":"d9i67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const container = document.getElementById('root')\n\nfunction traverse(callback, elem) {\n if (elem && elem.children && elem.children.length) {\n for (const childNode of elem.children) {\n callback(childNode)\n traverse(callback, childNode)\n }\n }\n}\n\ndocument.querySelector('button').addEventListener('click', function () {\n traverse(function onChild(childNode) {\n console.log(childNode.tagName)\n if (childNode.tagName === 'IMG') {\n childNode.classList.add('highlight')\n }\n }, document.getElementById('gallery'))\n})","type":"unstyled","key":"5fbvg"},{"data":{"image":{"id":"62351955988a6a0fb93276e4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"69fen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Упрощается рекурсия","type":"header-three","key":"647i8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":126,"style":"ITALIC"}],"text":"В предыдущем примере мы увидели, как обход DOM позволил выделить коллекцию узлов. Помимо этого, данный код также иллюстрирует рекурсию в функции traverse.","type":"unstyled","key":"dq0kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":103,"style":"ITALIC"}],"text":"Рекурсия значительно упрощается из-за уменьшения объема кода, что облегчает его обслуживание и чтение. Отпадает необходимость выполнять цикл for или отслеживать состояние для обхода всех потомков и получения к ним доступа.","type":"unstyled","key":"7h8o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы определяете положение любого элемента DOM","type":"header-three","key":"22ecf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодаря структурным особенностям паттерна “Компоновщик” мы можем использовать его для обхода дерева узлов DOM.","type":"unstyled","key":"16ob3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск положения элементов в DOM может превратиться в кошмар, особенно когда они смещены разными значениями position.","type":"unstyled","key":"4es5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно, можно воспользоваться методом myElement.getBoundingClientRect() и добиться желаемого результата, поскольку он возвращает позиции. Но такой способ не совсем надежный. Дело в том, что при прокрутке страницы мы можем получить отрицательное значение (в этом случае придется включить window.pageYOffset), так как оно вычисляется относительно прокрученного окна.","type":"unstyled","key":"17h9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":85,"style":"ITALIC"}],"text":"С помощью данного паттерна мы можем определить положение элемента в DOM, перемещаясь вверх по дереву, поскольку они все используют этот интерфейс:","type":"unstyled","key":"bmhf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function getParentOffset(el): number {\n if (el.offsetParent) {\n return el.offsetParent.offsetTop + getParentOffset(el.offsetParent)\n } else {\n return 0\n }\n}","type":"unstyled","key":"d9k3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы понимаете, как происходит передача свойств в React","type":"header-three","key":"emsh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы должны понимать, что передача свойств зависит от каждого компонента React, совместно использующего интерфейс children (возвращаемые элементы/компоненты негласно являются children):","type":"unstyled","key":"4ntbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState } from 'react'\n\nfunction Parent() {\n const [myLabel, setMyLabel] = React.useState('')\n\n React.useEffect(() => {\n setMyLabel('Hello')\n }, [])\n\n return \n}\n\nfunction ChildA({ label }) {\n return \n}\n\nfunction ChildB({ label }) {\n return (\n <>\n Our label is: \n \n )\n}\n\nfunction ChildC({ label }) {\n return {label}\n}\n\nexport default Parent","type":"unstyled","key":"29l1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В случае необходимости расширить существующие объекты мы легко сохраним их единообразие при условии, что будем придерживаться сигнатуры или интерфейса конечных узлов/составных компонентов. Это значит, что в дальнейшем масштабируемость не вызовет каких-либо трудностей.","type":"unstyled","key":"ddb9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы легко создаете формы","type":"header-three","key":"d1b9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формы наглядно демонстрируют эффективность паттерна в создании надежных приложений. Рассмотрим пример, иллюстрирующий его возможности при их разработке:","type":"unstyled","key":"assj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"class Form {\n constructor(...fields) {\n this.el = document.createElement('form')\n this.fields = fields.reduce((acc, field) => {\n acc[field.getName()] = field\n this.el.appendChild(field.el)\n return acc\n }, {})\n }\n\n get value() {\n const values = {}\n\n for (const [name, field] of Object.entries(this.fields)) {\n values[name] = field.value\n }\n\n return values\n }\n\n getName() {\n return this.el.name\n }\n\n setName(name) {\n this.el.name = name\n }\n\n render() {\n if (!document.body.contains(this.el)) {\n document.body.appendChild(this.el)\n }\n }\n\n submit() {\n // Отправляем куда-нибудь this.value \n }\n}\n\nclass Field {\n constructor(name = '', value = '') {\n this.name = name\n this.value = value\n }\n\n getName() {\n return this.name\n }\n\n setName(name) {\n this.name = name\n }\n}\n\nclass InputField extends Field {\n constructor(...args) {\n super(...args)\n this.el = document.createElement('input')\n }\n\n get value() {\n if (!this.el) return ''\n return this.el.value\n }\n\n set value(value) {\n if (this.el) {\n this.el.value = value\n }\n }\n}\n\nclass SelectField extends Field {\n constructor(...args) {\n super(...args)\n this.el = document.createElement('select')\n this.selected = ''\n }\n\n get value() {\n return this.el.value\n }\n\n set value(value) {\n if (this.el) {\n this.el.value = value\n }\n }\n\n select(option) {\n this.el.value = option\n }\n\n setOptions(options) {\n this.options = options\n }\n}\n\nclass EmployeeField extends Field {\n constructor(...args) {\n super(...args)\n this.el = document.createElement('div')\n this.firstNameField = new InputField('firstName')\n this.lastNameField = new InputField('lastName')\n this.el.appendChild(this.firstNameField.el)\n this.el.appendChild(this.lastNameField.el)\n }\n\n get value() {\n return {\n [this.firstNameField.getName()]: this.firstNameField.value,\n [this.lastNameField.getName()]: this.lastNameField.value,\n }\n }\n\n set value(values) {\n for (const [key, value] of Object.entries(values)) {\n if (key === 'firstName') {\n this.firstNameField.value = value\n } else if (key === 'lastName') {\n this.lastNameField.value = value\n }\n }\n }\n\n setFirstName(firstName) {\n this.firstNameField.value = firstName\n }\n\n setLastName(lastName) {\n this.lastNameField.value = lastName\n }\n}","type":"unstyled","key":"3r8eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Расширение класса Field было простым и кратким. Составная природа экземпляров позволяет собрать все значения в объект JSON путем вызова единой функции-геттера value:","type":"unstyled","key":"f0sik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const emailField = new InputField('email')\nconst nameField = new InputField('name')\nconst genderSelectField = new SelectField('gender')\nconst employeeField = new EmployeeField('employee')\nconst form = new Form(emailField, nameField, genderSelectField, employeeField)\n\nemailField.value = 'pfft@gmail.com'\nnameField.value = 'loc'\ngenderSelectField.value = 'Female'\nemployeeField.setFirstName('Holly')\nemployeeField.setLastName('Le')\n\nconsole.log(form.value)","type":"unstyled","key":"52uqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат:","type":"unstyled","key":"d9ols"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n \"email\": \"pfft@gmail.com\",\n \"name\": \"loc\",\n \"gender\": \"\",\n \"employee\": { \"firstName\": \"Holly\", \"lastName\": \"Le\" }\n}","type":"unstyled","key":"ae638"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработчик не беспокоится о деталях реализации при использовании компонентов и концентрируется на создании фактического кода для приложения.","type":"unstyled","key":"77agg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"ddsb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот мы и подошли к логическому завершению статьи. Надеюсь, что материал был полезен. До новых встреч!","type":"unstyled","key":"dalj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"9j9nt"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":42,"offset":0}],"inlineStyleRanges":[],"text":"Жизненный цикл разработки на примере сайта","type":"unordered-list-item","key":"3kivu"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":58,"offset":0}],"inlineStyleRanges":[],"text":"Как работает архитектурный паттерн «модель-вид-контроллер»","type":"unordered-list-item","key":"dphis"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":72,"offset":0}],"inlineStyleRanges":[],"text":"Как научиться задавать вопросы, проектировать системы и выявлять ошибки?","type":"unordered-list-item","key":"1m0uf"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"4bpt1"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":10,"offset":15},{"key":7,"length":58,"offset":27}],"inlineStyleRanges":[],"text":"Перевод статьи jsmanifest: 5 Reasons Why You Should Know The Composite Design Pattern","type":"unstyled","key":"btvgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"aXICT7DpkYxeqzqyWhuY"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/15482/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/15222/","url":"https://nuancesprog.ru/p/15222/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/13708/","url":"https://nuancesprog.ru/p/13708/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/14106/","url":"https://nuancesprog.ru/p/14106/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://medium.com/@jsmanifest?source=post_page-----226ecc651ce9-----------------------------------","url":"https://medium.com/@jsmanifest?source=post_page-----226ecc651ce9-----------------------------------"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://betterprogramming.pub/5-reasons-why-you-should-know-the-composite-design-pattern-226ecc651ce9","url":"https://betterprogramming.pub/5-reasons-why-you-should-know-the-composite-design-pattern-226ecc651ce9"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}