
前言
Coding 應當是一生的事業,而不僅僅是 30 歲的青春?
本文已收錄 Github https://github.com/ponkans/F2E,歡迎 Star,持續更新
上一篇《吐血整理》系列 大廠前端必備工具集合(抓包、除錯、Mock 資料等等)釋出之後,很多小夥伴問怪怪有沒有大廠前端開發工具元件庫的集合,今天,它來了,它踏著七彩祥雲來了!!!
企業級中後臺
Ant Design
- 官網地址:ant.design/index-cn
螞蟻金服開源 React 元件庫首選,企業級中後臺就直接用它就完事兒,準沒錯~
元件很齊全,開發起來簡直神速~估計已經是很多公司的標配了,我們公司也用~

飛冰
- 官網地址:ice.work/
視覺化快速搭建企業級中後臺前端應用,還是很值得試一試滴~

Ant Design Vue
如果你們公司技術棧是 Vue.js,用這個就完事兒了~
雖然有 Element UI,以及一些其它的元件庫,但掛怪還是推薦這個~

跨端框架
Taro
React 開發方式的跨端開發框架,目前已支援,微信/百度/位元組跳動/支付寶/QQ 小程式、快應用、H5、React Native 等多端的應用。
怪怪一直都覺得,前端側本來就不應該分這麼多端,多端統一是大趨勢~
怪怪好幾個朋友的公司都在用這個了?~

Taro UI
- 官網地址:taro-ui.jd.com/
基於上面 Taro 跨端框架開發的多端 UI 元件庫,不得不說,京東還是考慮得周到,點贊!
使用 Taro,就可以實現全站技術棧統一了?~

uni-app
- 官網地址:uniapp.dcloud.io/
Vue.js 開發方式的跨端開發框架,有多強大,去用用就知道啦~
最近這玩意兒好像有點火~

資料視覺化
AntV
資料視覺化中的王者,別猶豫了,用它就對了~
pc 端,移動端都給你考慮到了~

圖片處理
Image Cropper
給圖片顯示一個裁剪框,裁剪框允許使用者調整大小和位置,常用來做使用者自定義頭像的裁剪功能。
其實就是一個圖片裁剪工具啦?~

img-2
使用 web worker 做的圖片懶載入~
不過針對自己的公司,怪怪建議像懶載入、預載入這種東西,還是自己做一套比較好哦~

Fabric.js
- 官網地址:fabricjs.com/
有時候會碰到圖片合成類的需求,這個庫是基於 canvas 開發滴,支援拖拽,有類似需求的小夥伴可以試試~

nsfwjs
這個庫就有點東西了,鑑定圖片是否符合要求,這個我沒用過,不過感覺會有點用~
像這種不符合要求的圖片過濾,真正企業裡面,都是風控團隊來處理滴,不需要我們前端來搞~

Squoosh
- 官網地址:squoosh.app/
谷歌線上圖片壓縮,怪怪經常用~
不過真正專案裡面,公司前端基建小分隊一般都會封裝一套圖片壓縮類的元件~

SpriteJS
- 官網地址:spritejs.org/#/
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
- 官網地址:obfuscator.io/
JavaScript 程式碼混淆工具,該混淆時就混淆~

lodash
- 官網地址:lodash.com/
lodash 是一套工具庫,內部封裝了字串、陣列、物件等常見資料型別的處理函式。
很實用,用過你就知道了~

jlb-tools
前端 js 工具庫: 封裝常用的工具函式,如日期格式化、瀏覽器判斷等,提高開發效率
如果是自己的公司,這種東西一定要有一套封裝到腳手架裡面,對於開發很省事兒~

jscodeshift
將 js 內容解析成 AST 語法樹,然後提供一些便利的操作介面,方便我們對各個節點進行更改
有時候,需要去做一些底層的高階處理,這個東西就能派上用場了~

移動端
Swiper
- 官網地址:swiperjs.com/
主要用來解決移動端觸控滑動,像什麼輪播圖啊,上下滑動啊,用它就對了~

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

PhotoSwipe
圖片預覽元件,支援移動端,相對上面元件庫裡面自帶的,比較輕量~
Swiper + PhotoSwipe + fullPage 這 3 個一配合,微信裡常見的 H5 頁完全不是問題噠!!!?

HAMMER.JS
- 官網地址:hammerjs.github.io/
移動端手勢庫,挺不錯滴~

其它常用小工具
Moment.js
- 官網地址:momentjs.com/
用 JavaScript 解析、驗證、操作和顯示日期和時間,很方便哦~

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

Can I use
- 官網地址:caniuse.com
開發必備,檢視瀏覽器對各種新特性的相容情況
果然,瀏覽器還不支援接水怪,傷心??

regexr
- 官網地址:regexr.com/
日常自己寫一個正則的時候,這個網站很爽~

nodeppt
用 node 寫 ppt,就很有格局~
以這個工具結束,是希望大家都能做得一手好 ppt,都能夠順利晉升!!!

總結
本文已收錄 Github https://github.com/ponkans/F2E,歡迎 Star,持續更新?
上一期的《吐血整理》系列 大廠前端必備工具集合(抓包、除錯、Mock 資料等等),獲得大家一致好評,於是怪怪我加班加點,寫下了這一期。
上面的元件庫,工具都是怪怪精心挑選滴,希望能幫助到小夥伴減輕工作,happy work!!
近期在寫 Node.js 的系列,傳送門:
- 《大前端進階 Node.js》系列 必知、必會、必問
- 《大前端進階 Node.js》系列 雙十一秒殺系統(進階必看)
- 《大前端進階 Node.js》系列 多程式底層原理(位元組跳動被問)
- 《大前端進階 Node.js》系列 P6 前端必備腳手架/CI 構建能力(上)
喜歡的小夥伴麻煩加個關注,點個贊哦,感恩??
聯絡我 / 公眾號
微信搜尋【接水怪】或掃描下面二維碼回覆”加群“,我會拉你進技術交流群。講真的,在這個群,哪怕您不說話,光看聊天記錄也是一種成長。(阿里技術專家、敖丙作者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在)。
接水怪也會定期原創,定期跟小夥伴進行經驗交流或幫忙看簡歷。加關注,不迷路,有機會一起跑個步? ↓↓↓
