《吐血整理》系列 大廠前端元件庫工具集合（PC端、移動端、JS、CSS等）

接水怪發表於2020-03-26
前端元件JSCSS

前言

Coding 應當是一生的事業，而不僅僅是 30 歲的青春?
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新

上一篇《吐血整理》系列 大廠前端必備工具集合（抓包、除錯、Mock 資料等等）釋出之後，很多小夥伴問怪怪有沒有大廠前端開發工具元件庫的集合，今天，它來了，它踏著七彩祥雲來了！！！

企業級中後臺

Ant Design

螞蟻金服開源 React 元件庫首選，企業級中後臺就直接用它就完事兒，準沒錯~
元件很齊全，開發起來簡直神速~

估計已經是很多公司的標配了，我們公司也用~

​

飛冰

視覺化快速搭建企業級中後臺前端應用，還是很值得試一試滴~

Ant Design Vue

如果你們公司技術棧是 Vue.js，用這個就完事兒了~

雖然有 Element UI，以及一些其它的元件庫，但掛怪還是推薦這個~

跨端框架

Taro

React 開發方式的跨端開發框架，目前已支援，微信/百度/位元組跳動/支付寶/QQ 小程式、快應用、H5、React Native 等多端的應用。

怪怪一直都覺得，前端側本來就不應該分這麼多端，多端統一是大趨勢~

怪怪好幾個朋友的公司都在用這個了?~

Taro UI

基於上面 Taro 跨端框架開發的多端 UI 元件庫，不得不說，京東還是考慮得周到，點贊！

使用 Taro，就可以實現全站技術棧統一了?~

uni-app

Vue.js 開發方式的跨端開發框架，有多強大，去用用就知道啦~

最近這玩意兒好像有點火~

資料視覺化

AntV

資料視覺化中的王者，別猶豫了，用它就對了~

pc 端，移動端都給你考慮到了~

圖片處理

Image Cropper

給圖片顯示一個裁剪框，裁剪框允許使用者調整大小和位置，常用來做使用者自定義頭像的裁剪功能。

其實就是一個圖片裁剪工具啦?~

img-2

使用 web worker 做的圖片懶載入~

不過針對自己的公司，怪怪建議像懶載入、預載入這種東西，還是自己做一套比較好哦~

Fabric.js

有時候會碰到圖片合成類的需求，這個庫是基於 canvas 開發滴，支援拖拽，有類似需求的小夥伴可以試試~

nsfwjs

這個庫就有點東西了，鑑定圖片是否符合要求，這個我沒用過，不過感覺會有點用~

像這種不符合要求的圖片過濾，真正企業裡面，都是風控團隊來處理滴，不需要我們前端來搞~

Squoosh

谷歌線上圖片壓縮，怪怪經常用~

不過真正專案裡面，公司前端基建小分隊一般都會封裝一套圖片壓縮類的元件~

SpriteJS

360 團隊開發的，高效能圖形系統，它能夠支援 web、node、桌面應用和小程式的圖形繪製和實現各種動畫效果，對 360 的東西還是挺有好感，齊舞週刊有點東西~

UI 樣式

imgcook

很大程度上減輕了前端的工作量！！！，支援 Sketch、PSD、靜態圖片直接轉 code，也就是大家常說的 ui2code。可以直接轉成程式碼！！?

沒用過的小夥伴，一定要去試試！！！

animate.css

這大概是最全的 css 動畫庫了~

direction-reveal

根據滑鼠進入位置，展現從不同方向 展現 hover 效果，pc 端還是會遇到這樣的需求。

支援很多種效果，基本上包含了日常所有的情況~

lax.js

上面的動畫庫，配上這個滾動特效庫，簡直完美

壓縮完只有 2kb，很輕量

purifycss

可以幫助你移除沒使用到的 css，也算是一個小優化點~

Vue.js

vue-virtual-scroller

基於 vue 的虛擬列表無限滾動，效能還不錯~

怪怪公司基建小分隊自己做了一套無限滾動載入滴，沒用這個~

Vue.Draggable

以前怪怪實習的時候，就遇到了運營需要對後臺一些元素進行拖拽的場景，就是用的這個~

JavaScript

eslint

這玩意的出現解決了大部分強迫症程式設計師的問題，統一 JavaScript 程式碼風格

這不用猶豫，公司的程式碼規範必須統一啊~

JavaScript Obfuscator Tool

JavaScript 程式碼混淆工具，該混淆時就混淆~

lodash

lodash 是一套工具庫，內部封裝了字串、陣列、物件等常見資料型別的處理函式。

很實用，用過你就知道了~

jlb-tools

前端 js 工具庫: 封裝常用的工具函式，如日期格式化、瀏覽器判斷等，提高開發效率

如果是自己的公司，這種東西一定要有一套封裝到腳手架裡面，對於開發很省事兒~

jscodeshift

將 js 內容解析成 AST 語法樹，然後提供一些便利的操作介面，方便我們對各個節點進行更改

有時候，需要去做一些底層的高階處理，這個東西就能派上用場了~

移動端

Swiper

主要用來解決移動端觸控滑動，像什麼輪播圖啊，上下滑動啊，用它就對了~

fullPage

非常好用的全屏滑動庫，去官網看 demo 就能感受到了~

PhotoSwipe

圖片預覽元件，支援移動端，相對上面元件庫裡面自帶的，比較輕量~

Swiper + PhotoSwipe + fullPage 這 3 個一配合，微信裡常見的 H5 頁完全不是問題噠！！！?

HAMMER.JS

移動端手勢庫，挺不錯滴~

其它常用小工具

Moment.js

用 JavaScript 解析、驗證、操作和顯示日期和時間，很方便哦~

axios

目前最常見的請求庫，強推~

Can I use

開發必備，檢視瀏覽器對各種新特性的相容情況

果然，瀏覽器還不支援接水怪，傷心??

regexr

日常自己寫一個正則的時候，這個網站很爽~

nodeppt

用 node 寫 ppt，就很有格局~

以這個工具結束，是希望大家都能做得一手好 ppt，都能夠順利晉升！！！

總結

本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新?

上一期的《吐血整理》系列 大廠前端必備工具集合（抓包、除錯、Mock 資料等等），獲得大家一致好評，於是怪怪我加班加點，寫下了這一期。

上面的元件庫，工具都是怪怪精心挑選滴，希望能幫助到小夥伴減輕工作，happy work！！

近期在寫 Node.js 的系列，傳送門：

喜歡的小夥伴麻煩加個關注，點個贊哦，感恩??

聯絡我 / 公眾號

微信搜尋【接水怪】或掃描下面二維碼回覆”加群“，我會拉你進技術交流群。講真的，在這個群，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙作者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。

接水怪也會定期原創，定期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一起跑個步? ↓↓↓

相關文章