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

文件上傳

uppy

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

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

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

filepond

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

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

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

玩轉(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 的全功能圖像編輯器。它易于使用，并提供強大的過濾器。同時它支持對圖像進行裁剪、翻轉(zhuǎn)、旋轉(zhuǎn)、繪圖、形狀、文本、遮罩和圖片過濾等操作。該庫的瀏覽器兼容情況如下：

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

cropperjs

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

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

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

擴展閱讀

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

文檔處理

kkFileView

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

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

• 一鍵部署，快速接入：支持 Windows、Linux 平臺一鍵部署，兩行 JS 代碼就可以接入預(yù)覽;
• 支持常見文件格式，兼容新版 Office 文檔：支持文本、圖片、Office 文檔、WPS 文檔、PDF、視頻、音頻、壓縮包等常見文件類型預(yù)覽;
• 支持多種預(yù)覽模式靈活切換：支持 PDF、懶加載分頁圖、輪播圖片等預(yù)覽模式動態(tài)配置、靈活切換;
• 獨立部署，提供 Restful 接口，適用于微服務(wù)場景：獨立于業(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 的在線表格，功能強大、配置簡單、完全開源。該庫擁有以下特性：

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

 

擴展閱讀

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

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

Axios

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

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

• 支持 Promise API;
• 能夠攔截請求和響應(yīng);
• 能夠轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù);
• 客戶端支持防御 CSRF 攻擊;
• 同時支持瀏覽器和 Node.js 環(huán)境;
• 能夠取消請求及自動轉(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 是一個用在 React 項目中，用于獲取、緩存和更新異步數(shù)據(jù)的鉤子。該庫擁有以下特性：

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

擴展閱讀

77.9K 的 Axios 項目有哪些值得借鑒的地方

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

PouchDB

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

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

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

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，若當前環(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)式意味著你不僅可以查詢當前狀態(tài)，還可以訂閱所有狀態(tài)更改，比如查詢的結(jié)果或文檔的單個字段。

RxDB 支持以下特性：

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

擴展閱讀

前端存儲除了 localStorage 還有啥

微前端

qiankun

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

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

該庫擁有以下特性：

• 基于 single-spa 封裝，提供了更加開箱即用的 API;
• 技術(shù)棧無關(guān)，任意技術(shù)棧的應(yīng)用均可 使用/接入，不論是 React/Vue/Angular/JQuery 還是其他等框架;
• HTML Entry 接入方式，讓你接入微應(yīng)用像使用 iframe 一樣簡單;
• 樣式隔離，確保微應(yīng)用之間樣式互相不干擾;
• JS 沙箱，確保微應(yīng)用之間 全局變量/事件 不沖突;
• 資源預(yù)加載，在瀏覽器空閑時間預(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 是一個將多個單頁面應(yīng)用聚合為一個整體應(yīng)用的 JavaScript 微前端框架。使用 single-spa 進行前端架構(gòu)設(shè)計可以帶來很多好處，例如：

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

擴展閱讀

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

表單設(shè)計器

form-generator

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

 

form-render

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

H5 頁面設(shè)計器

gods-pen

• 基于 vue 的高擴展在線網(wǎng)頁制作平臺，可自定義組件，可添加腳本，可數(shù)據(jù)統(tǒng)計。
• 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 是一個 UI 組件的開發(fā)環(huán)境。它允許你能夠瀏覽一個組件庫，查看每個組件的不同狀態(tài)，以及支持交互式的方式開發(fā)和測試組件。

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

TypeDoc

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

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

API 管理

yapi

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

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

該項目擁有以下特性：

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

APIJSON

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

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

該項目擁有以下特性：

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