Как говорится, если рабочий хочет хорошо работать, он должен сначала наточить свои инструменты. В этой статье Brother Abao представит несколько отличных проектов с открытым исходным кодом.С помощью этих проектов с открытым исходным кодом вы сможете легко справиться со следующими десятью рабочими сценариями: загрузка файлов, обработка изображений, обработка документов, сетевой запрос, хранение данных, микро - интерфейс, дизайнер форм, дизайнер страниц H5, управление документами и управление API.
Прочитайте последние популярные статьи брата А Бао (спасибо за вашу поддержку и поддержку 🌹🌹🌹):
- Какие уроки можно извлечь из проекта 77.9K Star Axios?(1018+ 👍)
- Используя эти идеи и методы, я прочитал множество отличных проектов с открытым исходным кодом.(724+ 👍)
- Вы освоили эти передовые функциональные техники?(629+ 👍)
Файл загружен
uppy
Следующий загрузчик файлов с открытым исходным кодом для веб-браузеров 🐶
uppy— это гладкий модульный загрузчик файлов JavaScript, который легко интегрируется с любым приложением. Он быстрый, простой в использовании и позволяет вам сосредоточиться на более серьезных проблемах, чем создание загрузчика файлов. Библиотека имеет следующие возможности:
- поддержка и доступность I18n;
- Легкий, основанный на модульной архитектуре плагинов, которые можно загружать по запросу;
- через открытыйtusСтандартная возобновляемая загрузка файлов, которая может решить проблему сбоя сети во время загрузки.
filepond
🌊 Гибкая и интересная библиотека загрузки файлов JavaScript
filepond— это библиотека JavaScript, которая загружает все, что вы в нее бросаете, оптимизирует изображения для более быстрой загрузки и обеспечивает отличный, доступный и удобный пользовательский интерфейс. Библиотека имеет следующие возможности:
- принимает каталоги, файлы, большие двоичные объекты, локальные URL-адреса, удаленные URL-адреса и URI данных;
- Оптимизация изображения, автоматическое изменение размера изображения, поддержка обрезки, фильтрации и исправления ориентации EXIF;
- Поддержка перетаскивания файлов, выбор файлов из файловой системы, копирование и вставка файлов или добавление файлов с помощью API;
- Асинхронная загрузка с использованием AJAX, поддержка загрузки из нескольких частей, файлы могут быть закодированы как данные base64 и могут быть отправлены через формы.
✨Расширенное чтение✨
Смотрите «полный стек на выращивание дороги», чтобы прочитать три бесплатных электронного книги оригинального брата BAO (всего около 20 000 загрузок) и несколько 50 «повторных изучений TS».
Обработка изображения
tui.image-editor
🍞🎨 Полнофункциональный редактор фотоизображений с использованием холста. Это очень просто и поставляется с отличными фильтрами.
tui.image-editor— полнофункциональный редактор изображений, использующий HTML5 Canvas. Он прост в использовании и предлагает мощные фильтры. В то же время он поддерживает такие операции, как обрезка, переворачивание, вращение, рисование, форма, текст, маска и фильтрация изображений на изображениях. Браузерная совместимость этой библиотеки следующая:
- Chrome
- Edge
- Safari
- Firefox
- IE 10+
cropperjs
JavaScript image cropper.
Cropper.jsЭто очень мощный, но простой инструмент для обрезки изображений, который можно очень гибко настраивать, он поддерживает использование мобильных телефонов и поддерживает современные браузеры, включая IE9 и выше. Его можно использовать для удовлетворения таких потребностей, как загрузка обрезанного аватара, редактирование изображения продукта и т. д. Библиотека имеет следующие возможности:
- Поддерживает 39 вариантов конфигурации;
- поддерживается 27 методов;
- Поддержка 6 видов событий;
- Поддержка касания (мобильный терминал);
- Поддержка масштабирования, поворота и переворота;
- Поддержка обрезки на холсте;
- Поддержка обрезки изображений через холст на стороне браузера;
- Поддержка обработки информации о направлении Exif;
- Кроссбраузерная поддержка.
✨Расширенное чтение✨
- Капли, о которых вы не знали
- Играйте с интерфейсным двоичным кодом
- Прочитайте кодировку Base64 в одной статье
- Не беспокойтесь об обработке изображений, я дам вам десять маленьких помощников.
обработка документов
kkFileView
Используйте Spring Boot для создания решения для проекта онлайн-просмотра файловых документов, которое поддерживает онлайн-просмотр файлов doc, docx, ppt, pptx, xls и других файлов.
kkFileViewРешение онлайн-просмотра для файловых документов, проект создан с использованием популярного Spring Boot, прост в использовании и развертывании и в основном поддерживает онлайн-просмотр основных офисных документов, таких как doc, docx, xls, xlsx, ppt, pptx, pdf, txt, zip, rar, изображения, видео, аудио и многое другое. Библиотека имеет следующие возможности:
- Развертывание одним щелчком, быстрый доступ: поддерживает развертывание одним щелчком на платформах Windows и Linux и может получить доступ к предварительному просмотру с помощью двух строк кода JS;
- Поддержка распространенных форматов файлов, совместимых с новой версией документов Office: поддержка текста, изображений, документов Office, документов WPS, PDF, видео, аудио, сжатых пакетов и других распространенных типов файлов предварительного просмотра;
- Поддержка гибкого переключения нескольких режимов предварительного просмотра: поддержка динамической настройки и гибкое переключение режимов предварительного просмотра, таких как PDF, разбиение на страницы с отложенной загрузкой и карусельные изображения;
- Независимое развертывание, предоставляющее реструктурный интерфейс, подходящий для сценариев Micro-Service: Независимо от бизнес-системы, предоставляя редкий HTTP-интерфейс, независимый от языка развития и предоставляя онлайн-службу предварительного просмотра непосредственно в сценариях Micro-Service.
Luckysheet
Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
Luckysheet, чистая онлайн-форма, похожая на Excel, с мощными функциями, простой конфигурацией и полностью открытым исходным кодом. Библиотека имеет следующие возможности:
- Форматирование: стили, условное форматирование, выравнивание и поворот текста, поддержка усечения текста, переполнение, перенос слов и мультистиль ячеек;
- Ячейки: перетащите выделение, чтобы изменить ячейки, выбрать заливку в раскрывающемся списке, параметры автозаполнения, операции множественного выбора, найти и заменить, а также объединить ячейки;
- Опыт работы: отмена/повтор, операции копирования/вставки/вырезания, поддержка горячих клавиш и кисть форматирования;
- Формулы и функции: встроенные формулы, массивы поддержки формул, удаленные формулы и пользовательские формулы;
- Перспектива данных: перетаскивание полей, метод агрегирования, фильтрация данных и алмаз сводной таблицы.
✨Расширенное чтение✨
сетевой запрос
Axios
Promise based HTTP client for the browser and node.js
Axiosявляется HTTP-клиентом на основе Promise, библиотека имеет следующие функции:
- Поддержка Promise API;
- Возможность перехвата запросов и ответов;
- Возможность преобразования данных запроса и ответа;
- Защита поддержки клиентовCSRFатака;
- Поддерживает как браузер, так иNode.jsокружающая обстановка;
- Возможность отмены запросов и автоматического преобразования данных JSON.
react-query
⚛️ Хуки для получения, кэширования и обновления асинхронных данных в React
react-query— это хук для извлечения, кэширования и обновления асинхронных данных в проектах React. Библиотека имеет следующие возможности:
- Многоуровневый кеш + автоматическая сборка мусора;
- Поддержка подкачки и запросов на основе курсора;
- Поддержка загрузки большего количества файлов, запроса бесконечной прокрутки и восстановления прокрутки;
- Автоматическое кэширование + повторная загрузка (действует при повторной проверке, перефокусировке окна, опросе/в реальном времени).
✨Расширенное чтение✨
хранилище данных
PouchDB
🐨 — PouchDB — это карманная база данных.
PouchDB— это встроенная в браузер база данных, которая позволяет приложениям сохранять данные локально, чтобы пользователи могли пользоваться всеми функциями приложения даже в автономном режиме. Кроме того, данные синхронизируются между клиентами, поэтому пользователи могут получать актуальную информацию в любое время и в любом месте.
PouchDB также запускает Node.js и может использоваться какCouchDBПрямой интерфейс совместим с сервером. Работа API в каждой среде одинаково, поэтому вы можете потратить меньше времени на беспокойство о различиях в браузере и тратить больше времени, чтобы написать чистый, последовательный код.
PouchDB поддерживает все современные браузеры:
- Firefox 29+ (Including Firefox OS and Firefox for Android)
- Chrome 30+
- Safari 5+
- Internet Explorer 10+
- Opera 21+
- Android 4.0+
- iOS 7.1+
- Windows Phone 8+
PouchDB использует IndexedDB за кулисами и возвращается к Web SQL, если текущая среда не поддерживает IndexedDB.
Rxdb
💻 🔄 📱 База данных реального времени для приложений JavaScript.
RxDB (сокращение от Reactive Database) — это база данных NoSQL, используемая в приложениях JavaScript, таких как веб-сайты, гибридные приложения, приложения Electron, прогрессивные веб-приложения и Node.js. Реактивность означает, что вы можете не только запрашивать текущее состояние, но и подписываться на все изменения состояния, такие как результат запроса или отдельное поле документа.
RxDB поддерживает следующие функции:
- Mango-Query: поддержка API mquery для получения данных из коллекции, поддержка стиля запросов mongoDB с цепочкой.
- Репликация: поскольку RxDB опирается на PouchDB, данные между конечными устройствами и серверами легко синхронизировать.
- Реактивный: RxDB упрощает синхронизацию состояния DOM.
- MultiWindow/Tab: когда два экземпляра RxDB используют один и тот же механизм хранения, их состояние и рабочие потоки будут транслироваться. Это означает, что для обоих окон браузера изменения данных в окне №1 также автоматически влияют на состояние данных в окне №2.
- Схема: пройтиjsonschemaдля определения схем, описывающих форматы данных.
- Шифрование: при установке в поле режима зашифрованного значение этого поля будет храниться в зашифрованном режиме и не может быть прочитано без пароля.
✨Расширенное чтение✨
микро интерфейс
qiankun
📦 🚀 Молниеносно быстрое, простое и законченное решение для микрофронтендов.
qiankunЭто библиотека реализации микроинтерфейса, основанная на single-spa, которая призвана помочь вам более легко и безболезненно создать готовую к производству систему архитектуры микроинтерфейса. В настоящее время qiankun обслуживает более 200 онлайн-приложений в Ant, что абсолютно заслуживает доверия с точки зрения простоты использования и полноты.
Библиотека имеет следующие возможности:
- 📦на основеsingle-spaИнкапсуляция, обеспечивающая более готовый API;
- 📱Независимость от стека технологий, приложения любого стека технологий могут быть использованы/доступны, будь то React/Vue/Angular/JQuery или другие фреймворки;
- 💪Метод доступа к записи HTML, что позволяет получить доступ к микроприложениям так же просто, как с помощью iframe;
- 🛡изоляция стиля, чтобы стили между микроприложениями не мешали друг другу;
- 🧳JS-песочница, чтобы глобальные переменные/события между микроприложениями не конфликтовали;
- ⚡️Предварительная загрузка ресурсов, предварительно загружать неоткрытые ресурсы микроприложений во время простоя браузера для ускорения открытия микроприложений;
- 🔌уми плагин,при условии@umijs/plugin-qiankunДля приложений umi, чтобы переключиться на систему архитектуры микроинтерфейса одним щелчком мыши.
single-spa
The router for easy microfrontends
Single-spa — это фреймворк микроинтерфейса JavaScript, который объединяет несколько одностраничных приложений в монолитное приложение. Использование single-spa для проектирования архитектуры внешнего интерфейса может принести много преимуществ, таких как:
- Развертывайте каждое одностраничное приложение независимо;
- Улучшите время начальной загрузки, загрузите код позже;
- Новые функции используют новые фреймворки, а старые одностраничные приложения могут сосуществовать без перезаписи;
- Используйте несколько интерфейсных фреймворков на одной странице без обновления страницы (React, AngularJS, Angular, Ember и т. д.).
✨Расширенное чтение✨
конструктор форм
form-generator
✨Элемент дизайна формы пользовательского интерфейса и генератор кода
form-render
🚴♀️ Простой в использовании кросс-компонентный системный движок рендеринга форм — быстрое создание пользовательского интерфейса конфигурации формы с помощью схемы JSON.
Дизайнер страниц H5
gods-pen
Масштабируемая онлайн-платформа для создания веб-страниц на основе vue, которая может настраивать компоненты, добавлять сценарии и выполнять статистику данных.
luban-h5
Подобно продукции Yiqixiu H5, инструментам для создания веб-сайтов и системе визуального построения.
управление документами
storybook
📓 Обозреватель компонентов пользовательского интерфейса.Разрабатывайте, документируйте и тестируйте React, Vue, Angular, Ember, веб-компоненты и многое другое!
StorybookЭто среда разработки компонентов пользовательского интерфейса. Он позволяет вам просматривать библиотеку компонентов, просматривать различные состояния каждого компонента и поддерживать интерактивную разработку и тестирование компонентов.
Storybook работает за пределами вашего приложения. Это позволяет вам разрабатывать компоненты пользовательского интерфейса независимо друг от друга, а также повысить возможность повторного использования, тестируемость и скорость разработки компонентов. Вы можете создавать быстро, не беспокоясь о зависимостях конкретного приложения.
TypeDoc
Documentation generator for TypeScript projects.
Интернет-адрес:typedoc.org/
TypeDoc используется для преобразования комментариев в исходном коде TypeScript в документы HTML или модели JSON. Он гибко масштабируется и поддерживает несколько конфигураций.
Управление API
yapi
YApi — это локально развертываемая платформа управления визуальным интерфейсом, которая объединяет интерфейс и серверную часть, а также контроль качества.
Япи этоэффективный,легко использовать,МощныйПлатформа управления API предназначена для предоставления более элегантных услуг по управлению интерфейсом для разработчиков, продуктов и тестировщиков. Это может помочь разработчикам легко создавать, публиковать и поддерживать API.YApi также предоставляет пользователям отличный интерактивный опыт.Разработчикам нужно только использовать инструменты записи данных интерфейса, предоставляемые платформой, и простые операции щелчка для управления интерфейсом.
Проект имеет следующие особенности:
- Определяйте структуру и документируйте возвращаемые данные на основе Json5 и Mockjs, эффективность повышается многократно;
- Плоский дизайн разрешений не только обеспечивает управление крупномасштабными проектами уровня предприятия, но и обеспечивает простоту использования;
- Отладка интерфейса аналогична Postman;
- Автоматизированное тестирование, поддержка утверждений Response;
- В дополнение к поддержке нормальной случайной макеты MOCKSERVER увеличил функцию ожидания MOCK и возвращает ожидаемые данные в соответствии с запрошенным запросом фильтрации.
- Поддержка почтальона, хар, импорт данных чванства;
- Бесплатный и открытый исходный код, развертывание в интрасети, информация больше не боится утечки.
APIJSON
🏆Самый ценный проект с открытым исходным кодом Code Cloud 🚀Внутренний интерфейс и автоматизация документов, настройка внешнего интерфейса (клиента) для возврата данных и структуры JSON!
APIJSONЭто протокол сетевой передачи JSON для API и библиотека ORM, основанная на этом протоколе. APIJSON предоставляет полностью автоматизированный API для «простых добавлений, удалений, изменений, сложных запросов и простых транзакционных операций», что может значительно снизить затраты на разработку и связь, упростить процесс разработки и сократить цикл разработки. Он подходит для малых и средних проектов с разделением клиентской и серверной частей, особенно BaaS, бессерверных, интернет-предпринимательских проектов и корпоративных проектов для самостоятельного использования.
Проект имеет следующие особенности:
- Через API автоматизации интерфейс может настроить любые данные, любую структуру!
- Большинству серверных частей HTTP-запросов больше не нужно писать интерфейсы, не говоря уже о документах!
- Внешнему интерфейсу больше не нужно сообщать о проблемах интерфейса или документации с серверной частью! Больше никаких ошибок в документации!
- Бэкенду больше не нужно писать новую версию интерфейса и документацию для совместимости со старым интерфейсом! Никогда не надоедает интерфейс бесконечно в любое время и в любом месте!
Следуйте «Дорога к бессмертному совершенствованию с полным стеком», чтобы прочитать 3 бесплатные электронные книги (всего было загружено почти 20 000 раз) и 7 серий руководств по анализу исходного кода, изначально написанных братом А. Бао.
В этой статье брат Абао представляет проекты с открытым исходным кодом, которые могут работать с десятью рабочими сценариями, надеясь помочь или вдохновить всех. Если у вас есть другие хорошие проекты с открытым исходным кодом, оставьте сообщение и порекомендуйте их брату Абао.