俗話說得好，工欲善其事必先利其器。本文阿寶哥將介紹一些優(yōu)秀的開源項(xiàng)目，利用這些開源項(xiàng)目，你將能能輕松應(yīng)對(duì)以下十個(gè)工作場景：文件上傳、圖片處理、文檔處理、網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)存儲(chǔ)、微前端、表單設(shè)計(jì)器、H5 頁面設(shè)計(jì)器、文檔管理和 API 管理。

文件上傳

uppy

• The next open source file uploader for web browsers 🐶
• https://github.com/transloadit/uppy

uppy 是一個(gè)體驗(yàn)順滑、模塊化的 JavaScript 文件上傳器，可以無縫地與任何應(yīng)用程序集成。它速度快，使用方便，可以讓你專注比構(gòu)建文件上傳器更重要的問題。該庫擁有以下特性：

• 支持 I18n 及可訪問性;
• 輕量，基于模塊化的插件架構(gòu)，可按需加載;
• 通過開放的 tus 標(biāo)準(zhǔn)，可恢復(fù)文件上傳，可以解決上傳過程中網(wǎng)絡(luò)故障的問題。

 

filepond

• 🌊 A flexible and fun JavaScript file upload library
• https://github.com/pqina/filepond

filepond 是一個(gè) JavaScript 庫，可以上傳你扔給它的任何內(nèi)容，優(yōu)化圖像以加快上傳速度，并提供出色的，可訪問的，柔滑的用戶體驗(yàn)。該庫擁有以下特性：

• 接受目錄，文件，Blobs，本地 URL，遠(yuǎn)程 URL 和 Data URIs;
• 圖像優(yōu)化，自動(dòng)調(diào)整圖像大小，支持裁剪，過濾和修復(fù) EXIF 方向;
• 支持拖拽文件，從文件系統(tǒng)選擇文件，復(fù)制和粘貼文件或使用 API 添加文件;
• 使用 AJAX 進(jìn)行異步上傳，支持分塊上傳，可以將文件編碼為 base64 數(shù)據(jù)，并可以通過表單提交。

✨ 擴(kuò)展閱讀 ✨

玩轉(zhuǎn)前端文件上傳

大規(guī)格文件的上傳優(yōu)化

圖片處理

tui.image-editor

• 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
• https://github.com/nhn/tui.image-editor

tui.image-editor 是使用 HTML5 Canvas 的全功能圖像編輯器。它易于使用，并提供強(qiáng)大的過濾器。同時(shí)它支持對(duì)圖像進(jìn)行裁剪、翻轉(zhuǎn)、旋轉(zhuǎn)、繪圖、形狀、文本、遮罩和圖片過濾等操作。該庫的瀏覽器兼容情況如下：

• Chrome
• Edge
• Safari
• Firefox
• IE 10+

cropperjs

• JavaScript image cropper.
• https://github.com/fengyuanchen/cropperjs

Cropper.js 是一款非常強(qiáng)大卻又簡單的圖片裁剪工具，它可以進(jìn)行非常靈活的配置，支持手機(jī)端使用，支持包括 IE9 以上的現(xiàn)代瀏覽器。它可以用于滿足諸如裁剪頭像上傳、商品圖片編輯之類的需求。該庫擁有以下特性：

• 支持 39 個(gè)配置選項(xiàng);
• 支持 27 個(gè)方法;
• 支持 6 種事件;
• 支持 touch(移動(dòng)端);
• 支持縮放、旋轉(zhuǎn)和翻轉(zhuǎn);
• 支持在畫布上裁剪;
• 支持在瀏覽器端通過畫布裁剪圖像;
• 支持處理 Exif 方向信息;
• 跨瀏覽器支持。

✨ 擴(kuò)展閱讀 ✨

• 你不知道的 Blob
• 玩轉(zhuǎn)前端二進(jìn)制
• 一文讀懂Base64編碼
• 圖片處理不用愁，給你十個(gè)小幫手

文檔處理

kkFileView

• 使用 Spring Boot 打造文件文檔在線預(yù)覽項(xiàng)目解決方案，支持 doc、docx、ppt、pptx、xls 等文件在線預(yù)覽。
• https://github.com/kekingcn/kkFileView

kkFileView 為文件文檔在線預(yù)覽解決方案，該項(xiàng)目使用流行的 Spring Boot 搭建，易上手和部署，基本支持主流辦公文檔的在線預(yù)覽，如doc，docx，xls，xlsx，ppt，pptx，pdf，txt，zip，rar，圖片，視頻，音頻等等。該庫擁有以下特性：

• 一鍵部署，快速接入：支持 Windows、Linux 平臺(tái)一鍵部署，兩行 JS 代碼就可以接入預(yù)覽;
• 支持常見文件格式，兼容新版 Office 文檔：支持文本、圖片、Office 文檔、WPS 文檔、PDF、視頻、音頻、壓縮包等常見文件類型預(yù)覽;
• 支持多種預(yù)覽模式靈活切換：支持 PDF、懶加載分頁圖、輪播圖片等預(yù)覽模式動(dòng)態(tài)配置、靈活切換;
• 獨(dú)立部署，提供 Restful 接口，適用于微服務(wù)場景：獨(dú)立于業(yè)務(wù)系統(tǒng)外，提供 Restful Http 接口，開發(fā)語言無關(guān)，微服務(wù)場景下直接提供在線預(yù)覽服務(wù)。

Luckysheet

• Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
• https://github.com/mengshukeji/Luckysheet

Luckysheet ，一款純前端類似 excel 的在線表格，功能強(qiáng)大、配置簡單、完全開源。該庫擁有以下特性：

• 格式設(shè)置：樣式、條件格式、文本對(duì)齊及旋轉(zhuǎn)、支持文本的截?cái)唷⒁绯?、自?dòng)換行和單元格多樣式;
• 單元格：拖拽選取來修改單元格、選取下拉填充、自動(dòng)填充選項(xiàng)、多選區(qū)操作、查找與替換和合并單元格;
• 操作體驗(yàn)：撤銷/重做、復(fù)制/粘貼/剪切操作、快捷鍵支持和格式刷;
• 公式和函數(shù)：內(nèi)置公式、公式支持?jǐn)?shù)組、遠(yuǎn)程公式和自定義公式;
• 數(shù)據(jù)透視圖：字段拖拽、聚合方式、篩選數(shù)據(jù)和數(shù)據(jù)透視表下鉆。

✨ 擴(kuò)展閱讀 ✨

在前端如何玩轉(zhuǎn) Word 文檔

網(wǎng)絡(luò)請(qǐng)求

Axios

• Promise based HTTP client for the browser and node.js
• https://github.com/axios/axios

Axios 是一個(gè)基于 Promise 的 HTTP 客戶端，該庫擁有以下特性：

• 支持 Promise API;
• 能夠攔截請(qǐng)求和響應(yīng);
• 能夠轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù);
• 客戶端支持防御 CSRF 攻擊;
• 同時(shí)支持瀏覽器和 Node.js 環(huán)境;
• 能夠取消請(qǐng)求及自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)。

react-query

• ⚛️ Hooks for fetching, caching and updating asynchronous data in React
• https://github.com/tannerlinsley/react-query

react-query 是一個(gè)用在 React 項(xiàng)目中，用于獲取、緩存和更新異步數(shù)據(jù)的鉤子。該庫擁有以下特性：

• 多層緩存 + 自動(dòng)垃圾回收;
• 支持分頁和基于游標(biāo)的查詢;
• 支持加載更多、無限滾動(dòng)查詢和滾動(dòng)恢復(fù);
• 自動(dòng)緩存 + 重新獲取(重新驗(yàn)證時(shí)有效，窗口重新聚焦，輪詢/實(shí)時(shí))。

✨ 擴(kuò)展閱讀 ✨

77.9K 的 Axios 項(xiàng)目有哪些值得借鑒的地方

數(shù)據(jù)存儲(chǔ)

PouchDB

• 🐨 - PouchDB is a pocket-sized database.
• https://github.com/pouchdb/pouchdb

PouchDB 是一個(gè)瀏覽器內(nèi)數(shù)據(jù)庫，允許應(yīng)用程序在本地保存數(shù)據(jù)，以便用戶即使在離線時(shí)也可以享受應(yīng)用程序的所有功能。另外，數(shù)據(jù)在客戶端之間是同步的，因此用戶可以隨時(shí)隨地保持最新狀態(tài)。

PouchDB 也在 Node.js 中運(yùn)行，可以用作與 CouchDB 兼容的服務(wù)器的直接接口。該 API 在每個(gè)環(huán)境中工作都是相同的，因此你可以花更少的時(shí)間來擔(dān)心瀏覽器的差異，而花更多的時(shí)間來編寫干凈、一致的代碼。

PouchDB 支持所有現(xiàn)代瀏覽器：

• 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，若當(dāng)前環(huán)境不支持 IndexedDB 則回退到 Web SQL。

Rxdb

• 💻 🔄 📱 A realtime Database for JavaScript Applications.
• https://github.com/pubkey/rxdb

RxDB(Reactive Database 的縮寫)是 NoSQL 數(shù)據(jù)庫，用于 JavaScript 應(yīng)用程序，如網(wǎng)站，混合應(yīng)用程序，Electron Apps，Progressive Web Apps 和 Node.js。響應(yīng)式意味著你不僅可以查詢當(dāng)前狀態(tài)，還可以訂閱所有狀態(tài)更改，比如查詢的結(jié)果或文檔的單個(gè)字段。

RxDB 支持以下特性：

• Mango-Query：支持 mquery API 從集合中獲取數(shù)據(jù)，支持鏈?zhǔn)降?mongoDB 查詢風(fēng)格。
• Replication：因?yàn)?RxDB 依賴于 PouchDB，因此很容易實(shí)現(xiàn)終端設(shè)備與服務(wù)器之間的數(shù)據(jù)同步。
• Reactive：RxDB 使得同步 DOM 的狀態(tài)變得很簡單。
• MultiWindow/Tab：當(dāng) RxDB 的兩個(gè)實(shí)例使用相同的存儲(chǔ)引擎，它們的狀態(tài)和操作流將會(huì)被廣播。這意味著對(duì)于兩個(gè)瀏覽器窗口，窗口 #1 的數(shù)據(jù)變化也會(huì)自動(dòng)影響窗口 #2 的數(shù)據(jù)狀態(tài)。
• Schema：通過 jsonschema 來定義 Schemas，它們用來描述數(shù)據(jù)格式。
• Encryption：通過將模式字段設(shè)置為encrypted，該字段的值將以加密模式存儲(chǔ)，沒有密碼就無法讀取。

✨ 擴(kuò)展閱讀 ✨

前端存儲(chǔ)除了 localStorage 還有啥

微前端

qiankun

• 📦 🚀 Blazing fast, simple and completed solution for micro frontends.
• https://github.com/umijs/qiankun

qiankun 是一個(gè)基于 single-spa 的微前端實(shí)現(xiàn)庫，旨在幫助大家能更簡單、無痛的構(gòu)建一個(gè)生產(chǎn)可用微前端架構(gòu)系統(tǒng)。目前 qiankun 已在螞蟻內(nèi)部服務(wù)了超過 200+ 線上應(yīng)用，在易用性及完備性上，絕對(duì)是值得信賴的。

該庫擁有以下特性：

• 📦 基于 single-spa 封裝，提供了更加開箱即用的 API;
• 📱 技術(shù)棧無關(guān)，任意技術(shù)棧的應(yīng)用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架;
• 💪 HTML Entry 接入方式，讓你接入微應(yīng)用像使用 iframe 一樣簡單;
• 🛡 樣式隔離，確保微應(yīng)用之間樣式互相不干擾;
• 🧳 JS 沙箱，確保微應(yīng)用之間 全局變量/事件 不沖突;
• ⚡️ 資源預(yù)加載，在瀏覽器空閑時(shí)間預(yù)加載未打開的微應(yīng)用資源，加速微應(yīng)用打開速度;
• 🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 應(yīng)用一鍵切換成微前端架構(gòu)系統(tǒng)。

single-spa

• The router for easy microfrontends
• https://github.com/single-spa/single-spa

Single-spa 是一個(gè)將多個(gè)單頁面應(yīng)用聚合為一個(gè)整體應(yīng)用的 JavaScript 微前端框架。使用 single-spa 進(jìn)行前端架構(gòu)設(shè)計(jì)可以帶來很多好處，例如：

• 獨(dú)立部署每一個(gè)單頁面應(yīng)用;
• 改善初始加載時(shí)間，遲加載代碼;
• 新功能使用新框架，舊的單頁應(yīng)用不用重寫可以共存;
• 在同一頁面上使用多個(gè)前端框架 而不用刷新頁面 (React，AngularJS，Angular，Ember 等)。

 

✨ 擴(kuò)展閱讀 ✨

• 最全微前端集合：https://juejin.cn/post/6844904030720770055

表單設(shè)計(jì)器

form-generator

• ✨Element UI 表單設(shè)計(jì)及代碼生成器
• https://github.com/JakHuang/form-generator

form-render

• 🚴‍♀️ 易用的跨組件體系的表單渲染引擎 - 通過 JSON Schema 快速生成自定義表單配置界面
• https://github.com/alibaba/form-render

H5 頁面設(shè)計(jì)器

gods-pen

• 基于 vue 的高擴(kuò)展在線網(wǎng)頁制作平臺(tái)，可自定義組件，可添加腳本，可數(shù)據(jù)統(tǒng)計(jì)。
• https://github.com/ymm-tech/gods-pen

luban-h5

• 類似易企秀的 H5 制作、建站工具、可視化搭建系統(tǒng).
• https://github.com/ly525/luban-h5

文檔管理

storybook

• 📓 The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!
• https://github.com/storybookjs/storybook/

Storybook 是一個(gè) UI 組件的開發(fā)環(huán)境。它允許你能夠?yàn)g覽一個(gè)組件庫，查看每個(gè)組件的不同狀態(tài)，以及支持交互式的方式開發(fā)和測試組件。

Storybook 在你的應(yīng)用程序之外運(yùn)行。這允許你能夠獨(dú)立的開發(fā) UI 組件，你可以提高組件的可重用性、可測試性和開發(fā)速度。你可以快速構(gòu)建，而無需擔(dān)心應(yīng)用程序特定的依賴項(xiàng)。

TypeDoc

• Documentation generator for TypeScript projects.
• 在線地址：https://typedoc.org/

TypeDoc 用于將 TypeScript 源代碼中的注釋轉(zhuǎn)換為 HTML 文檔或 JSON 模型。它可靈活擴(kuò)展，并支持多種配置。

API 管理

yapi

• YApi 是一個(gè)可本地部署的、打通前后端及QA的、可視化的接口管理平臺(tái)
• https://github.com/ymfe/yapi

YApi 是高效、易用、功能強(qiáng)大的 api 管理平臺(tái)，旨在為開發(fā)、產(chǎn)品、測試人員提供更優(yōu)雅的接口管理服務(wù)?？梢詭椭_發(fā)者輕松創(chuàng)建、發(fā)布、維護(hù) API，YApi 還為用戶提供了優(yōu)秀的交互體驗(yàn)，開發(fā)人員只需利用平臺(tái)提供的接口數(shù)據(jù)寫入工具以及簡單的點(diǎn)擊操作就可以實(shí)現(xiàn)接口的管理。

該項(xiàng)目擁有以下特性：

• 基于 Json5 和 Mockjs 定義接口返回?cái)?shù)據(jù)的結(jié)構(gòu)和文檔，效率提升多倍;
• 扁平化權(quán)限設(shè)計(jì)，即保證了大型企業(yè)級(jí)項(xiàng)目的管理，又保證了易用性;
• 類似 Postman 的接口調(diào)試;
• 自動(dòng)化測試, 支持對(duì) Response 斷言;
• MockServer 除支持普通的隨機(jī) mock 外，還增加了 Mock 期望功能，根據(jù)設(shè)置的請(qǐng)求過濾規(guī)則，返回期望數(shù)據(jù);
• 支持 postman, har, swagger 數(shù)據(jù)導(dǎo)入;
• 免費(fèi)開源，內(nèi)網(wǎng)部署，信息再也不怕泄露了。

APIJSON

• 🏆碼云最有價(jià)值開源項(xiàng)目 🚀后端接口和文檔自動(dòng)化，前端(客戶端) 定制返回 JSON 的數(shù)據(jù)和結(jié)構(gòu)!
• https://github.com/Tencent/APIJSON

APIJSON 是一種專為 API 而生的 JSON 網(wǎng)絡(luò)傳輸協(xié)議 以及 基于這套協(xié)議實(shí)現(xiàn)的 ORM 庫。APIJSON 為 “簡單的增刪改查、復(fù)雜的查詢、簡單的事務(wù)操作” 提供了完全自動(dòng)化的 API，能大幅降低開發(fā)和溝通成本，簡化開發(fā)流程，縮短開發(fā)周期。它適合中小型前后端分離的項(xiàng)目，尤其是 BaaS、Serverless、互聯(lián)網(wǎng)創(chuàng)業(yè)項(xiàng)目和企業(yè)自用項(xiàng)目。

該項(xiàng)目擁有以下特性：

• 通過自動(dòng)化API，前端可以定制任何數(shù)據(jù)、任何結(jié)構(gòu)!
• 大部分 HTTP 請(qǐng)求后端再也不用寫接口了，更不用寫文檔了!
• 前端再也不用和后端溝通接口或文檔問題了!再也不會(huì)被文檔各種錯(cuò)誤坑了!
• 后端再也不用為了兼容舊接口寫新版接口和文檔了!再也不會(huì)被前端隨時(shí)隨地沒完沒了地?zé)┝?