предисловие
В соответствии с бизнес-потребностями компании я упаковываю компоненты следующим образом.
Выше приведена статья, которую я написал некоторое время назад о том, как я упаковывал компоненты в соответствии с потребностями бизнеса компании, которую можно рассматривать как небольшой итог этой напряженной работы. Иногда после напряженного процесса разработки нам нужно остановиться и подумать, читабельен ли написанный нами код? Может ли он быть более прочным? В то же время необходимо подвести итоги бизнеса и оглянуться назад, чтобы увидеть, разумен ли код компонента, разработанный на основе потребностей бизнеса? Может быть лучше?
Я думаю, что эти четыре вопросительных знака всегда будут со мной, потому что я знаю, что это единственный способ расти.
Потребности малого бизнеса
Любой, кто делал систему фонового управления, должен знать функцию загрузки файлов.Когда дело доходит до загрузки файлов, я вспоминаю случай загрузки больших файлов, который я изучал, и резюмирую такую статью. (пс:Реализуйте перетаскивание нескольких больших файлов + загрузка больших файлов по разделам + возобновление загрузки с точек останова + предварительный просмотр файла).
Полученное бизнес-требование — это не функция загрузки для прямой передачи файла на серверную часть, как указано выше, а анализ содержимого файла в формате данных, желаемом серверной частью, а затем отправка проанализированных данных на серверную часть. для загрузки файлов.
Упаковка компонентов
Я пропускаюelement-uiКомпонент загрузки иjs-xlsxбиблиотека для реализации такого требования.
Установить плагин
npm install element-ui xlsx -S
Как проектировать компоненты
Реализовать эту функцию несложно, идея состоит в том, чтобы сначала собрать файлы, а затем разобрать файлы наJSONданные и, наконец, отправляются на серверную часть. Но стоит подумать о том, как лучше проектировать компоненты и максимизировать повторное использование компонентов во всем проекте.
Здесь я разделил этот компонент на компоненты шаблона и функциональные компоненты. Группа компонентов шаблона используется для отображения пользовательского интерфейса и сбора файлов, а функциональный компонент используется для преобразования содержимого файла в данные. Потому что функция загрузки файла в рамках проекта может не только разобрать файл на данные, но и загрузить весь файл напрямую.Если содержимое файла разобрано наJSONТакие функции, как данные, помещаются в компонент, поэтому компонент выглядит раздутым. И это также может реализовать повторное использование компонентов шаблона и максимизировать повторное использование этого функционального компонента.
Так как же соединить компоненты шаблона и функциональные компоненты вместе? Суть здесь в том, чтобы использовать VueMixinsМожно смешать функциональность другого компонента. В частности, вы можете просмотреть:Mixins
пользовательский компонент
я использовалel-uploadкомпонент в качестве шаблона для настройки компонента. Для разработки этой функции требуется собственный метод загрузки, поэтому я передаюon-changeсобытия для сбора файлов иon-removeатрибут для удаления файлов. поддерживатьВысокая сплоченность и низкая связанностьв виду, я поместил эти два свойства непосредственно вel-uploadПривязка к компоненту вместо передачи его между классами путем передачи свойств, когда на странице используется пользовательский компонент.el-upload. Поскольку конечной целью является получение данных файла для запроса интерфейса, почему бы не обработать данные самостоятельно? Поэтому, чтобы облегчить мне внутреннюю организацию данных, я передаю функцию обратного вызова извне для выполнения последующих операций после получения данных файла.Функция обратного вызова является обязательным атрибутом конфигурации, который указывает последующие действия после интеграции данные файла. (ps: например, вызывающие интерфейсы и т. д.)
потому что вы хотите прочитать файл какJSONdata, поэтому пользовательский компонент настроен со свойствомheaderStr, Это свойство представляет собой массив объектов, который содержит поля для передачи в серверную часть.keyи какой столбец читать из таблицыstr, и тип данных, соответствующий полюtype. Так что как пользоваться этим пунктом конфигурации, оставьте вопрос и поговорим об этом позже. Как показано ниже:
Пользовательский компонент определяетmultipleсвойство, значениеtrueилиfalse, используется для включения загрузки нескольких файлов; компонент также настраивается самостоятельноstartа такжеendАтрибут используется, чтобы указать, к какому столбцу заканчивается таблица, формат файла также проверяется по одному внутри компонента. Функция обратного вызова также заключена внутри компонента и заключена в объект Promise, цель которого — разрешить одновременную загрузку нескольких файлов.
После того, как пользовательский компонент сможет собрать файлы в список файлов, для анализа данных файла требуется функциональный компонент.
Разобрать файл в данные JSON
Использование Vue было описано вышеMixins, поэтому я смешал функциональный компонент с пользовательским компонентомUploadXlsxпользовательский компонент может напрямую обращаться к методу функционального компонента.
В функциональном компоненте представлены два метода:
- Один из способов
handlerReaderFileИспользуется для чтения содержимого файла, здесьFileReaderпрочитать файл и использоватьxlsxПреобразовать табличный объект вJSONобъект (пс: вот использованиеxlsxпредоставлена библиотекаXLSX.utils.sheet_to_jsonметод. как использоватьjs-xlsxПодробнее об этой библиотеке см. на github.js-xlsx). Метод возвращаетPromiseобъект. В процессе кодирования в начале рассматривался только один файл таблицы .xlsx только с одним листом, но на самом деле таблица xlsx может иметь несколько листов (ps: то есть файл с несколькими листами) вниз), поэтому необходимо обрабатываться равномерно (ps: если листов несколько, анализируется каждый лист). Вот завершение парсинга каждого листа, сохраненного через очередь массиваJSONзначение послеresolveДайте пользовательский компонент шаблона. Внутри этой функции, переданной через пользовательский компонентstartа такжеendАтрибуты заголовков файлов проверяются, и те, которые не соответствуют требованиям, не будут загружены. Конкретную логику можно посмотреть в исходном коде.
прийти посмотреть насквозьxlsxсозданная библиотекаJSONКак выглядят данные:
- Другой способ
handlerUploadResultИспользуется для генерации того, что хочет реальный бэкендJSONданные. Здесь используется ядро элемента конфигурации headerStr черезstrАтрибут и ключ данных JSON, сгенерированных таблицей, сравниваются, сопоставляются и передаютсяtypeАтрибуты могут быть изменены по типу данных для создания реальныхJSONданные. Главная идея:
В основном функциональные компоненты готовы. Оглядываясь назад на пользовательский компонент шаблона, который предоставляется с помощью функционального компонента при обработке собранного списка файловhandlerReaderFileспособ разобрать файл наJSONданные и вызвать функцию обратного вызова. потому чтоhandlerReaderFileМетод возвращает очередь массива, поэтому я использую внутри пользовательского компонентаPromise.allДелайте одновременную загрузку файлов. Я передаю это возвращаемое значение функции, которая оборачивает только что описанный выше обратный вызов, зацикливает параметры, а затем вызывает функцию обратного вызова, оборачивая ее с помощью Promsie, а затем разрешая. Наконец, значение, возвращаемое вызовом функции-оболочки, какPromise.allпараметр. Конкретную логику реализации можно посмотреть в исходном коде.
использовать компоненты
- как использовать:
- Отображение компонентов:
Кодирование мышления
-
Поскольку вначале я думал об обработке только одного листа, я упустил случай с несколькими листами. На самом деле рассматривается только один лист, и функцию еще можно использовать, но код этого функционального компонента не является надежным. Что, если в следующий раз мой коллега напишет 3 листа на один лист? Затем компонент опускает обработку данных. Поэтому стоит больше думать о различных возможностях и наблюдать за различными бизнес-возможностями, чтобы сделать ваш код более надежным.
-
Я считаю необходимым разделить компоненты на функциональные и шаблонные. Потому что схема реализации загрузки файлов может иметь много возможностей. Теперь данные таблицы анализируются, а затем загружаются, как насчет загрузки файла напрямую в следующий раз? Тогда шаблон можно будет использовать повторно, и не возникнет конфликта с атрибутами для определенных функций, но этот компонент можно будет лучше поддерживать. А те, кто делал фоновые системы управления, наверное, знают, что такие функции, как маркеры, есть везде.Как лучше оформить такие требования в проекте, я думаю, можно ли отображать компонент маркера (UI) и нужно ли отображать маркер Блок (функциональный компонент) извлекается, так что весь проект может повторно использовать этот функциональный компонент, и вы также можете создать элемент конфигурации при встрече с подобным всплывающим окном.
-
Настройте элементы конфигурации для компонентов, таких как
headerStrа такжеcallback. Затем в следующий раз, когда другие заголовки будут загружены таким же образом, этот компонент можно будет повторно использовать напрямую. и компонентов как можно больше高内聚低耦合, Если он может быть обработан внутри, он должен быть обработан внутри, а результаты будут доступны для внешних пользователей.
Адрес источника
Исходный адрес можно посмотреть:исходный код
Суммировать
Разработав это требование, яPromiseа такжеObject.assignСуществует также более глубокое понимание этих основных вещей. Я по-прежнему считаю, что необходимо инкапсулировать компоненты вручную, и по мере роста времени у вас должна быть как можно больше собственной библиотеки компонентов.
Наконец, если это будет полезно всем копающим друзьям, я надеюсь наградить вас звездой~ (ps: не скупитесь)