написать впереди
Это время золота, серебра и серебра. Многие компании начали первый раунд набора в этом году. Хотя в этом году холодная зима в Интернете, если у вас всегда есть энтузиазм в отношении технологий и отличная сила, даже холодная зима не будет мешать вам, шаг вперед. Во время собеседования, часто со второй и третьей стороны, интервьюер задаст несколько вопросов о пунктах вашего резюме на основе вашего резюме, и следующий вопрос будет задан много раз.
在这个项目中你有遇到什么技术难点，你是怎么解决的？
На самом деле, этот вопрос направлен на то, чтобы понять решение, когда вы сталкиваетесь с проблемами, ведь поле фронтенд-технологий широко, различные фреймворки и библиотеки компонентов возникают бесконечным потоком, а бизнес-требования иногда сложны.Понаблюдайте за программистом, когда столкнулись с неизвестными проблемами. Как с этим справиться? Этот процесс может лучше понять фактическую способность интервьюируемого решать проблемы по сравнению с тем, чтобы просто задать несколько вопросов интервьюеру, чтобы проверить интервьюера.
И многие скажут, что мой проект не большой, сложности нет, или он не сложный, можно сказать только какие-то ямки, просто погуглите и это решаемо, спросить у коллег реально невозможно , эти проблемы давно меня не беспокоили . На самом деле, я тоже столкнулся с такой ситуацией: нехорошо рассказывать интервьюеру, как решить эти подводные камни через поисковые системы, чтобы интервьюер думал, что вы просто API Caller, но нет никаких сложностей проекта, о которых стоит говорить. .
Мое предложение состоит в том, что если нет технических сложностей, которые можно было бы подробно обсудить, то можно попробовать инкапсулировать несколько часто используемых компонентов в ежедневном процессе разработки, одновременно постараться проанализировать узкое место производительности проекта и найти некоторые оптимизированные решения.Офицер имеет полное представление о вас
В прошлой статье я поделился тем, как я разделил модули по функциям и навыкам оптимизации производительности в своем проекте, а в этой главе я запишу процесс проектирования и инкапсуляции компонентов.
Стек технологий представляет собой одностраничное приложение Vue + Element.
Компоненты пакета
Некоторые люди скажут, что на github так много хороших компонентов с открытым исходным кодом, а хорошие библиотеки с открытым исходным кодом не используются, зачем беспокоиться?
На самом деле, я думаю, что имеет смысл инкапсулировать компонент самостоятельно, потому что, если вы пишете компонент с нуля, вы можете лучше понять все функции вашего собственного компонента, а также вы можете настроить некоторые специальные функции в соответствии с потребностями бизнеса компании. Кроме того, понимание внутреннего механизма реализации компонента также помогает улучшить личные способности кодирования, вместо того, чтобы спрашивать других, вы только знаете, что я использовал определенный компонент, который очень полезен, но я не знаю, как сделай это. Поэтому я все же рекомендую попробовать написать несколько часто используемых компонентов.
Поскольку это фоновая система управления, основные компоненты должны быть компонентами форм и компонентами таблиц, а общие компоненты являются вторичной инкапсуляцией на основе компонентов элементов.Дизайн компонентов следует следующим идеям.
- Высокая связность и низкая связанность, как можно меньше раскрывайте API компонента и как можно больше инкапсулируйте функции внутри компонента.
- Некоторые элементы конфигурации по умолчанию задаются внутри компонента в соответствии с бизнес-требованиями, а различные элементы конфигурации передаются через разные страницы для повышения универсальности компонента.
Целью разработки компонентов является дальнейшее отделение компонентов и отделение элементов конфигурации от тегов шаблона, что, с одной стороны, уменьшает объем кода в компонентах бизнес-логики, а с другой стороны, отдельные элементы конфигурации можно динамически передавать на передний план. закончить через фон. , или создать файл js/ts для элементов конфигурации самостоятельно (если у вас есть стандартизированные документы разработчика, вы также можете использовать nodejs для написания скрипта, который читает документы разработчика и записывает элементы конфигурации одним щелчком мыши, что еще больше улучшит разработку эффективность)
компонент формы
Дизайн компонента таблицы примерно разделен на следующие части.
- Старайтесь быть как можно ближе к API библиотеки компонентов элементов.
- Передайте массив элементов конфигурации в заголовке и динамически сгенерируйте тег el-table-columns через этот элемент конфигурации.
- Решение для интерактивных сложных столбцов заголовков
Старайтесь быть как можно ближе к API библиотеки компонентов элементов.
используемый компонент$attrs,$listenersРеализуйте межуровневую передачу свойств и событий прослушивания, чтобы свойства, переданные пользовательскому компоненту на странице, могли напрямую стать свойствами тега el-table через внутреннюю пересылку пользовательского компонента, чтобы достичь перекрестного Передача свойств на уровне, в то время как $ Listeners аналогичны $ attrs, которые могут прослушивать события, инициированные в компонентах el-table, и перенаправлять события в пользовательские компоненты на странице.
Пользовательские компоненты:
Цель этого состоит в том, чтобы ваши пользовательские компоненты и компоненты el-table имели одинаковое использование, входящие свойства и события прослушивания также были одинаковыми.
Используя пользовательские компоненты на странице, вы можете видеть, что использование z-table и el-table почти одинаково, просто нужно передать дополнительный атрибут столбцов:
Дизайн элемента конфигурации заголовка
Продолжайте добавлять теги заголовков к этому компоненту таблицы. Здесь я удалил некоторые ненужные суждения, оставив только основную логику. Фактически, вам нужно только зациклить этот элемент конфигурации, чтобы динамически генерировать тег el-table-column внутри компонента. span
Пользовательские компоненты:
Файл элемента конфигурации:
Суть вот в этомv-bind, когда v-привязкаКогда никакие параметры не переносятся, а связанное значение является объектом, он будет проходить по всем свойствам этого объекта и связывать свойства и значения одно за другим
Что это значит? Здесь это объясняется в сочетании с файлом элемента конфигурации. Если указанный выше элемент конфигурации передается, внутренняя часть компонента на самом деле выглядит так.
Оставив в стороне ключ, предоставьте атрибут attrs в каждом элементе элемента конфигурации, который содержит все атрибуты, которые может принять тег el-table-column. В примере три атрибута label, prop и width находятся в атрибуте attrs каждого элемента элемента конфигурации.Через v-bind="column.attrs" эти три атрибута и их значения отображаются в el -table-column соответственно. Привязка выполняется в теге, чтобы достичь цели разделения шаблона и элемента конфигурации.
Решение для интерактивных сложных столбцов заголовков
Для данных некоторых столбцов заголовков, которые требуют специальной обработки, я использую слоты и слоты области внутри компонента, чтобы определить позицию вставки столбца заголовка через слот, а затем вернуть информацию в родительский компонент через слот области. отображение определяется в родительском компоненте, что делает табличный компонент очень гибким и способным реагировать на большинство потребностей бизнеса.
Видно, что имя именованного слота также передается через элемент конфигурации, а слот области передает данные внутри всей формы родительскому компоненту через область.Слоты и слоты с областью позволяют родительскому компоненту решать, что делать. делать с данными
Добавьте атрибут слота в элемент конфигурации:
Компоненты страницы:
В компоненте страницы вы можете использовать слот области действия, предоставленный элементом, аналогичным образом.Через область действия вы можете получить доступ ко всем данным внутри компонента и передать их компоненту страницы для сложной логической обработки.
Другие функции
В соответствии с потребностями компании я дополнительно модифицировал компоненты
- Используйте функцию рендеринга, чтобы сделать отображение заголовка более гибким.
- Элемент конфигурации предоставляет функцию, которая позволяет данным текущего столбца выполнять эту функцию для достижения эффекта предварительной обработки.
- В элементе конфигурации задается двумерный массив, который может объединять поля данных для достижения эффекта отображения данных в разных строках.
- Добавлены значки действий
- Добавлена функция преобразования данных (кода) в соответствующую китайскую семантику
исходный код
компонент формы
По сравнению с компонентом таблицы, компонент формы немного сложнее реализовать, потому что форма имеет много элементов управления, и каждый элемент конфигурации должен быть очень гибким.Здесь я позаимствовал статью, которую видел в Zhihu раньше.блог, хотя код в статье не указан, но указана общая схема реализации, а дальше я спроектировал этот компонент формы по идеям из статьи
Схема условно разделена на следующие части
- Дизайн элемента конфигурации формы
- проверка формы
- форма запроса
- Связь между элементами управления формы
- Возможность вызова внутреннего интерфейса для создания элемента управления формой
Дизайн элемента конфигурации формы
Согласно идее инкапсуляции табличного компонента выше, мы по-прежнему используем $attrs для передачи атрибутов корневого элемента, и используем v-bind для установки атрибутов внутри компонента в элементе конфигурации.
Компоненты формы:
Файл элемента конфигурации:
В отличие от компонента формы, поскольку компонент формы разделен на две части: тег el-form-item и элемент управления формы, эти две части должны соответствовать свойствам конфигурации в элементе конфигурации и использовать itemAttrs в элементе конфигурации для управления el. -form-item Атрибуты метки, используйте attrs для управления атрибутами элемента управления формы
Также используется здесьcomponentТег, управление формой el-input динамически генерируется через тег tag элемента конфигурации, но вы можете видеть, что я не задавал напрямую значение тега для el-input, так как же input становится el-input?
Здесь я определил элементы конфигурации, общие для каждого компонента, поэтому нет необходимости каждый раз объявлять некоторые повторяющиеся атрибуты в атрибутах компонента, такие как заполнитель, очищаемый и т. д.
Общий файл элемента конфигурации:
Самое главное, что я установил элемент конфигурации компонента и элемент общей конфигурацииассоциация, Найдите объект, соответствующий элементу общей конфигурации, через атрибут тега в элементе конфигурации компонента.В сочетании с приведенным выше примером, если значение тега является входным, объект, соответствующий входному атрибуту, будет найден из элемента общей конфигурации. , а реальное значение тега будет указывать на Компонент общего элемента конфигурации, здесь el-input
А как устанавливается эта ассоциация?На самом деле Object.assgin используется для слияния объектов
Основная логика выглядит следующим образом (параметр formItem относится к каждому элементу в элементе конфигурации компонента formItems):
Здесь определена функция calculateFormItem.Передавая каждый элемент массива элементов конфигурации, соответствующее значение в общем элементе конфигурации (базовом объекте) находится в соответствии со значением тега элемента, а затем используется Object.assgin для объединить его Об этой функции calculateFormItem Функция, о которой я подробно расскажу позже, в связи с элементами управления формы.
Доступны как общие элементы конфигурации, так и элементы конфигурации компонентов, и следующее, что необходимо реализовать, — это объект данных, который компонент формы должен загрузить в серверную часть.
Моя идея здесь состоит в том, чтобы динамически генерировать объект данных через имя поля (ключ), объявленное в элементе конфигурации, что может уменьшить количество входящих элементов конфигурации, и объявить переменную модели внутри компонента для сохранения объекта данных.
Но здесь есть 2 момента, на которые стоит обратить внимание
- Поскольку Модель, объявленная внутри компонента, является пустым объектом, отзывчивая система Vue не может отслеживать создание новых свойств объектом.Его необходимо установить с помощью $set, чтобы принудительно обновить представление.
- Здесь вам нужно присвоить значения объекту данных модели через formItems, Если вы поместите его в смонтированный хук и выполните его, вы получите пустой массив, поэтому я использую здесь watch для мониторинга formItems и использую немедленное выполнение это сразу (объявление нового массива с вычислением теоретически также может)
проверка формы
С точки зрения проверки формы, постарайтесь максимально соответствовать входящему методу компонента элемента, оставьте все атрибуты, записанные в теге el-form-item, записанными в itemAttrs, а все атрибуты, записанные в элементе управления формы, запишите в attrs. , чтобы его можно было записать в itemAttrs. Напишите логику проверки формы в
форма запроса
С точки зрения запросов формы, поскольку во время рефакторинга была создана новая папка API, функции API внутренних интерфейсов сохраняются, поэтому страница соответствует файлу интерфейса в папке API.
Функции нескольких интерфейсов могут быть экспортированы в каждый файл интерфейса.
В компоненте формы вам нужно только объявить реквизиты API для передачи компонента страницы.
Затем привяжите событие click к кнопке отправки, выполните проверку формы и, наконец, выполните функцию интерфейса и передайте объект данных модели.
После того, как вызов функции интерфейса успешно возвращает данные ответа, я позволяю компоненту страницы прослушивать это событие, запуская событие после отправки, и передаю данные ответа компоненту страницы, чтобы компонент страницы мог получить данные ответа и выполнить некоторая обработка
Компонент страницы прослушивает событие после отправки:
Связь между элементами управления формы
Я думаю, что эта часть также является самой сложной для реализации.В повседневных бизнес-требованиях может потребоваться один элемент управления, чтобы контролировать, отображается ли другой элемент управления или нет.
Основная идея состоит в том, чтобы определить функцию getAttrs в элементе конфигурации.Эта функция динамически генерирует объект attrs в соответствии с текущей Моделью, то есть определенным значением в объекте данных, и, наконец, объединяет объект attrs с атрибутами текущей модели. элемент конфигурации. , а также определяет функцию ifRender, которая может управлять визуализацией элемента управления формы, и, наконец, наш элемент конфигурации может выглядеть так:
Далее, как реализовать эти две функции внутри компонента формы — это еще предыдущая функция calculateFormItem, которая используется для расчета элементов конфигурации текущего компонента формы.
В отличие от приведенной выше функции calculateFormItem, я передаю второй параметр Model, чтобы текущий элемент конфигурации компонента формы мог динамически изменяться в соответствии с Model, и выполнял внутреннюю функцию getAttrs для передачи в Model, а возвращаемый объект передает Object, Assgin объединяется с текущим элементом конфигурации, а для другой функции ifRender также передается Модель, возвращается логическое значение, и, наконец, это логическое значение используется для управления тем, следует ли отображать элемент управления формы через v-if в шаблоне.
Здесь мы проанализируем основную часть всей формы: функцию calculateFormItem., его функция заключается в динамическом создании нового элемента конфигурации в соответствии с изменением данных в текущей модели, потому что наш элемент управления формой отображается в соответствии с элементом конфигурации, и элемент управления формы необходимо изменить, можно изменить только элемент конфигурации.
Согласно приведенному выше рисунку мы можем обнаружить, что мы не используем напрямую элементы конфигурации formItems из компонентов страницы, но метки, которые отображаются в цикле на основе _formItems, а _formItems являются элементами конфигурации, основанными на formItems и сгенерированными calculateFormItem, пока данные в модели меняются, этот элемент конфигурации необходимо пересчитать для создания нового значения, поэтому я решил поместить _formItems в вычисляемое свойство
Таким образом, всякий раз, когда зависимости (здесь Model и formItems) изменяются, функция будет запускаться для пересчета новых _formItems.
Выпадающий список/Радио/Флажок
В компоненте формы я использую тег компонента для динамического создания элементов управления формы, но для некоторых элементов управления формы с подузлами это сложно реализовать через компоненты.Здесь я буду использовать компоненты с подузлами (раскрывающийся список/переключатель поле/флажок) Выполняется еще один уровень инкапсуляции, удаляются дочерние узлы и все свойства настраиваются на уровне компонента.
пользовательский компонент выбора
Таким образом, пока атрибут options объявлен в элементе конфигурации, компонент преобразуется в настраиваемый компонент выбора через тег компонента, так что атрибут options становится атрибутом компонента выбора, так что $attrs. параметры для его получения (обратите внимание, что значение и метка должны быть явно объявлены, в противном случае будет сообщено об ошибке, поскольку компонент элемента будет внутренне проверять входящие свойства)
Файл элемента конфигурации компонента:
Здесь снова общий файл элемента конфигурации используется для сопоставления элемента конфигурации выбранного компонента, объявленного в элементе конфигурации компонента, с пользовательским выбранным компонентом.
Возможность вызова внутреннего интерфейса для создания элемента управления формой
В реальных бизнес-требованиях параметры некоторых раскрывающихся списков и переключателей генерируются путем извлечения интерфейса бэкэнда. Если вы поместите его в компонент формы, вам все равно нужно изменить элемент конфигурации и изменить элемент формы в компоненте страницы. Найдите ключ раскрывающегося списка/переключателя и назначьте данные интерфейса свойству options.
Суммировать
Видно, что компонент формы все еще относительно сложен, фактически этот компонент формы все еще имеет определенные ограничения по сравнению с компонентом таблицы, и функция слота может быть разработана для него в будущем. Кроме того, реальные потребности бизнеса определенно более сложны и изменчивы.В любом случае, некоторые компоненты формы, которые не особенно сложны с интерактивной логикой, все же могут быть проведены.Мои возможности ограничены, так что это просто идея, я надеюсь, что последует -up может быть все более и более совершенным
исходный код
Генерация элементов конфигурации одним щелчком мыши
Представьте библиотеку инструментов, написанную мной, которая может отлично работать с табличным компонентом, прочитайте документацию разработчика, сгенерируйте элементы конфигурации компонента одним щелчком мыши и избегайте ошибок и дублирования многопольного ввода.Если это полезно, Я надеюсь, что вы дадите звезду ~