前端高效開發不得不知道的一些JavaScript庫!

2022-01-06 前端之術


工欲善其事,必先利其器;器欲盡其能,必先得其法。

函數庫lodash

推薦指數:⭐️⭐️⭐️⭐️⭐️

Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。

地址:https://www.lodashjs.com/

請求庫 axios

推薦指數:⭐️⭐️⭐️⭐️⭐️

是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。Features從瀏覽器中創建 XMLHttpRequests 從node.js 創建 http 請求 支持Promise API 攔截請求和...

地址:http://www.axios-js.com/

flyio 

推薦指數:⭐️⭐️⭐️⭐️⭐️

一個支持所有JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可以讓您在多個端上儘可能大限度的實現代碼復用。

地址:https://www.npmjs.com/package/flyio

富文本 vue-ueditor-wrap

推薦指數:⭐️⭐️⭐️⭐️⭐️

一個「包裝」了 UEditor 的 Vue 組件,支持通過 v-model 來綁定富文本編輯器的內容,讓 UEditor 的使用簡單到像 Input 框一樣。省去了初始化 UEditor、手動調用 getContent,setContent 等繁瑣的步驟。

地址:https://hc199421.gitee.io/vue-ueditor-wrap/#/home

動畫庫 Animate.css

推薦指數:⭐️⭐️⭐️⭐️⭐️

內置了很多典型的css3動畫,兼容性好使用方便。

地址:http://www.animate.net.cn/

Magic.css 

推薦指數:⭐️⭐️⭐️

一款獨特的CSS3動畫特效包。

網址:https://www.minimamente.com/project/magic/

move.js 

推薦指數:⭐️⭐️

一個小型的JavaScript庫,通過JS來控制一系列的CSS動畫順序執行,使CSS3動畫變得非常簡單和優雅。

網址:https://github.com/visionmedia/move.js 

滾動庫 BetterScroll

推薦指數:⭐️⭐️⭐️⭐️⭐️

better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件。

better-scroll 是基於原生 JS 實現的,不依賴任何框架。它編譯後的代碼大小是 63kb,壓縮後是 35kb,zip 後僅有9kb,是一款非常輕量的 JS lib。

網址:https://github.com/ustbhuangyi/better-scroll

iscroll 

推薦指數:⭐️⭐️⭐️⭐️

iScroll是一個高性能,資源佔用少,無依賴,多平臺的javascript滾動插件。

它可以在桌面,行動裝置和智能電視平臺上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。

網址:http://caibaojian.com/iscroll-5/

存儲類store.js

推薦指數:⭐️⭐️⭐️⭐️⭐️

store.js 是一個兼容絕大部分主流瀏覽器的 LocalStorage 包裝器,不需要藉助 Cookie 或者 Flash。store.js 會根據瀏覽器自動選擇使用 localStorage、globalStorage 或者 userData 來實現本地存儲功能。

store.set('username', 'HQG') store.get('username') store.remove('username') store.clear() store.set('user', { name: 'lcq' }) var user = store.get('user')console.log(user.name);

地址:https://www.npmjs.com/package/store

js-cookie

推薦指數:⭐️⭐️⭐️⭐️⭐️

js-cookie是一個簡單的,輕量級的處理cookies的js API。

地址:https://www.npmjs.com/package/js-cookie

Mock數據類Mockjs

推薦指數:⭐️⭐️⭐️⭐️⭐️

生成任意隨機數據,攔截 Ajax 請求。

地址:https://www.npmjs.com/package/mockjs 

數據可視化 ECharts

推薦指數:⭐️⭐️⭐️⭐️⭐️

一個基於 JavaScript 的開源可視化圖表庫。

地址:https://echarts.apache.org/zh/index.html

D3.js 

推薦指數:⭐️⭐️⭐️⭐️⭐️

D3js 是一個可以基於數據來操作文檔的 JavaScript 庫。可以幫助你使用 HTML, CSS, SVG 以及Canvas 來展示數據。

地址:https://www.d3js.org.cn/

Three.js 

推薦指數:⭐️⭐️⭐️⭐️⭐️

three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。

地址:http://www.webgl3d.cn/

hightchart

推薦指數:⭐️⭐️⭐️⭐️

兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫。

地址:https://www.highcharts.com.cn/

DataV 

推薦指數:⭐️⭐️⭐️

Vue/React 大屏數據展示組件庫。

地址:http://datav.jiaminghi.com/

地圖數據源 

推薦指數:⭐️⭐️⭐️⭐️⭐️

大屏/地圖/echarts地圖數據都可以從這裡面取!

地址:http://datav.aliyun.com/tools/atlas/index.html

地圖 高德地圖

推薦指數:⭐️⭐️⭐️⭐️⭐️

地址:https://lbs.amap.com/

百度地圖 

推薦指數:⭐️⭐️⭐️⭐️

地址:https://lbsyun.baidu.com/

地圖坐標系轉換 (gcoord)

推薦指數:⭐️⭐️⭐️⭐️⭐️

gcoord主要解決了兩個問題

能將坐標在不同坐標系下相互轉換

能夠處理GeoJSON

地址:https://github.com/hujiulong/gcoord 

日期處理moment.js

推薦指數:⭐️⭐️⭐️⭐️⭐️

JavaScript日期處理插件。

moment().format('YYYY-MM-DD HH:mm:ss'); moment("20120901", "YYYYMMDD").fromNow(); 

地址:http://momentjs.cn/

day.js 

推薦指數:⭐️⭐️⭐️⭐️⭐️

一個輕量的處理時間和日期的 JavaScript 庫。

地址:https://github.com/iamkun/dayjs

輪播swiper.js 

推薦指數:⭐️⭐️⭐️⭐️⭐️

Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。

Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!

地址:https://www.swiper.com.cn/

slip.js 

推薦指數:⭐️⭐️

移動端跟隨手指滑動組件,零依賴。

地址:https://github.com/binnng/slip.js

複製粘貼插件clipboard-polyfill

推薦指數:⭐️⭐️⭐️⭐️⭐️

這個庫是現代基於Promise的異步剪貼板API的polyfill。

地址:https://www.npmjs.com/package/clipboard-polyfill

clipboard.js 

推薦指數:⭐️⭐️⭐️⭐️

Clipboard.js 實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼板的功能。可以在瀏覽器和 Node 環境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。

地址:https://mateusmirandaalmeida.github.io/clipboard.js/index.html

二維碼插件 qrcode.js

推薦指數:⭐️⭐️⭐️⭐️⭐️

qrcode.js 是一個用於生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標籤,再通過 HTML5 Canvas 繪製而成,不依賴任何庫。

地址:https://www.npmjs.com/package/qrcode

拖拽插件Draggabilly

推薦指數:⭐️⭐️⭐️

可幫你輕鬆實現網頁上各種元素的拖放操作。支持 IE8+ 和多觸摸。

地址:https://draggabilly.desandro.com/

dragula 

推薦指數:⭐️⭐️⭐️⭐️

dragula讓你能夠很方便地實現拖拽功能的JS庫。Dragula 是一個 JavaScript 庫,實現了網頁上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

地址:https://www.npmjs.com/package/dragula

文件上傳 WebUploader

推薦指數:⭐️⭐️⭐️⭐️⭐️

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的FLASH運行時,兼容IE6+,iOS 6+, android 4+。兩套運行時,同樣的調用方式,可供用戶任意選用。

採用大文件分片並發上傳,極大的提高了文件上傳效率。

地址:http://fex.baidu.com/webuploader/

Canvas庫 html2canvas

推薦指數:⭐️⭐️⭐️⭐️⭐️

html2canvas是一款使你可以直接在用戶瀏覽器上截取網頁或部分網頁的「屏幕快照」的庫。

地址:https://www.npmjs.com/package/html2canvas

Fabric.js 

推薦指數:⭐️⭐️⭐️⭐️⭐️

是一個強大而簡單的 Javascript HTML5 畫布庫 Fabric 在畫布元素之上提供交互式對象模型 Fabric 還具有 SVG-to-canvas(和 canvas-to-SVG)解析器。

地址:http://fabricjs.com/

圖片處理 cropperjs

推薦指數:⭐️⭐️⭐️⭐️⭐️

cropperjs是一款非常強大卻又簡單的圖片裁剪工具,它可以進行非常靈活的配置,支持手機端使用,支持包括IE9以上的現代瀏覽器。(關鍵是使用方法簡單,幾行代碼就可以搞定)。

地址:https://www.npmjs.com/package/cropperjs 

gif.js

推薦指數:⭐️⭐️⭐️⭐️⭐️

gif.js 是一個可直接在瀏覽器上運行的 JavaScript GIF 編碼器。直接生成gif。

地址:https://www.npmjs.com/package/gif.js

LazyLoad 

推薦指數:⭐️⭐️⭐️⭐️⭐️

Lazy Load幫助高度較長的網頁進行延遲載入圖片,尚未瀏覽到該部分時,不會載入視角外的圖片,提高效率。衍生有也有vue-lazyload以及react-lazyload。

地址:https://www.lazyloadjs.cn/

前端國際化 i18n

推薦指數:⭐️⭐️⭐️⭐️⭐️

地址:https://www.npmjs.com/package/i18n

視頻/音頻 xgplayer

推薦指數:⭐️⭐️⭐️⭐️⭐️

一款帶解析器、支持音頻、歌詞解析、能節省流量的HTML5視頻播放器。

地址:https://v2.h5player.bytedance.com/

dplayer

推薦指數:⭐️⭐️⭐️⭐️

一個很好看的彈幕視頻播放器。

地址:http://dplayer.js.org/

video.js

推薦指數:⭐️

Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫,Video.js 自動檢測瀏覽器對 HTML5 的支持情況,如果不支持 HTML5 則自動使用 Flash 播放器。說真的(不好看且難改)

地址:https://github.com/videojs/video.js

其他插件 screenfull.js

推薦指數:⭐️⭐️

瀏覽器全屏插件,消除瀏覽器差異。

地址:https://www.npmjs.com/package/screenfull

highlight.js

推薦指數:⭐️⭐️⭐️⭐️

針對Web程序所做的高亮顯示上色。

地址:https://www.fenxianglu.cn/highlight.html 

以上是目前總結出的常用的庫,會一直更新。

PS:如果覺得我的分享不錯,歡迎大家隨手點讚、在看。

相關焦點

  • 前端高效開發必備的 js 庫梳理
    作者: 徐小夕 來源:趣談前端之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結。首先我覺得在學習任何知識之前必須要有一個明確的學習目標, 知道自己為什麼要學它, 而不是看網上說的一股腦的給你灌輸各種知識, 讓你學習各種庫, 從而不斷的製造大家的焦慮感。前端由於入行門檻低, 更新換代很快, 每年都會有大量新的框架和庫出現, 也有大量庫被淘汰(比如 JQuery, 但是學習它的設計思想很有必要).
  • 可能是最全面的2020年前端,後端,全棧學習實用指南
    如果您構建自己的定製設計,則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經了解CSS,那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序,可為標準CSS添加更多功能並使其更加高效。
  • 2020年最熱度最高的5個JavaScript框架
    前端JavaScript框架主要是用於讓編碼比以前更快更高效。2019年的優秀框架什麼是框架,為什麼我們需要它?基本上,在Vue中,開發人員可以將一些最佳功能組合在一起,例如將Angular,Ember和React的功能合而為一。它和Angular相似,提供了數據雙向綁定的功能。其中Vue的優點是體積小,可以輕鬆地輕鬆下載;使開發人員可以自由地在HTML文件中編寫其模板;簡單易學和簡單易懂的文檔支持。
  • 前端組件/庫打包利器rollup使用與配置實戰
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫目前主流的前端框架vue和react都採用rollup來打包,為了探索rollup的奧妙,接下來就讓我們一步步來探索,並基於rollup搭建一個庫打包腳手架,來發布自己的庫和組件。
  • 2020 十大 JavaScript 圖像處理庫
    幸運的是,有許多庫可以使這事變得非常簡單。以下是我最喜歡的不同類別的庫。如果你發現有用的東西,嘗試將其封裝成所選框架的組件。通過這種方式,你將擁有一個具備聲明式 API 的可復用組件,並隨時可用。1. Pica此插件可助你減小大圖的上傳大小,從而節省上傳時間。
  • 如何使用JavaScript實現前端導入和導出excel文件
    使用JavaScript實現前端導入excel文件並自動生成可編輯的Table組件在開始實現之前, 我們先來看看實現效果.1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.
  • ​​【第 244 期】小智周末學習發現了 10 個好用JavaScript圖像處理庫
    幸運的是,有許多庫可以讓這些變得簡單得多。下面介紹一些圖像處理的庫。1.Pica是一個執行數學計算的底層開發庫,儘可能地減少了封裝帶來的影響。如果對二進位圖像進行縮放,需要先加載到canvas(再保存為blob)。
  • 8個可以提高開發效率的JavaScript 庫
    來源 | https://my.oschina.net/lav/blog/5077207現代前端開發相比以前來說幸福很多了
  • 介紹幾個開發前端動畫不得不學的動畫庫
    Velocity 是一個簡單易用、高性能、功能豐富的輕量級 JS 動畫庫。Dynamics.js 是一款可以創建物理運動動畫效果的 js 庫插件(http://dynamicsjs.com/)採用純 JavaScript 開發,擁有 CSS 動畫,不依賴任何框架(http://ytiurin.github.io/html5tooltipsjs/)
  • 給開發者提供的 35 款 JavaScript 圖形圖表庫
    幾乎每個開發或者項目管理團隊都需要圖表或者圖形來簡化理解,可視化複雜的數據和 web 應用工作流。可視化圖表可以幫助開發者更容易理解複雜d數據,提高生產的效率和 web 應用和項目的可靠性。JavaScript 圖表和圖形庫就是一個簡單創建圖表和圖形的工具。現在網際網路上有許多五花八門的 JavaScript 圖表和圖形庫,幫助開發者們更好的創建 web 應用的圖表和圖形。
  • 那些前端開發必不可少的生產力工具
    引言一些開源的生產力工具能極大的提升我們的開發效率(我一直是這麼認為的 🤠)。今天推薦一些我一直在用的、比較香的工具給大家。其中包括一些文檔、可視化工具、分析工具、代碼片段、調試工具等。unDraw 🍉unDraw[7] 是由希臘設計師 Katerina Limpitsouni 開發的一套開源矢量插圖庫,在這個網站上有超過 1000 個扁平矢量插畫供你下載使用
  • 「首席架構師推薦」一系列很棒的的瀏覽器端JavaScript庫資源(1)
    恩德 - 無庫圖書館。volo - 從模板創建前端項目,添加依賴項並自動生成項目。Duo - 下一代軟體包管理器,融合了Component,Browserify和Go的最佳創意,使組織和編寫前端代碼快速而輕鬆。
  • 前端開發有哪些比較推薦學習的項目?
    前端開發有哪些比較推薦學習的項目?要找到這些項目可以通過如下方式:1、通常情況下,我們可以在github上面去搜索awesome javascript,很多優秀的JavaScript項目都被分門別類歸納好了。
  • 10個JavaScript圖像處理庫,收藏好留備用
    英文 | https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af
  • 想加密JavaScript怎麼辦,試試這款加密庫!
    大家好,我是為廣大程式設計師兄弟操碎了心的小編,每天推薦一個小工具/源碼,裝滿你的收藏夾,每天分享一個小技巧,讓你輕鬆節省開發效率
  • 【第1350期】2018年值得關注的10大JavaScript動畫庫
    前言平時大家開發動畫是採用什麼方式呢?雖然18年過半,可這十個動畫庫是真的沒聽過幾個,有點尷尬。
  • 從後端開發轉職前端開發,我學到了什麼?
    特別是當你已經習慣了後端開發的工作模式,習慣了構建數據結構,編寫類似於測試驅動開發的測試,習慣了使用持久層、倉庫和資料庫圖表,以及給前端創建API接口。凡此種種,不勝枚舉。後端有其複雜性,所以大部分人沒有時間學習前端開發的內部運作方式。我也是。
  • 我在成人網站 PornHub 做前端開發
    肯定有童鞋想知道像 P 站這種大站在用哪些技術棧。(或工作體驗之類的)別著急,往下看。去年 David Walsh 採訪了一個 P 站的 Web 開發者。我們能從中探知答案。在 PortHub 做 Web 開發是一種什麼體驗?
  • 學姐親述:這些GitHub庫,真的能幫你提升編程技能!
    144k連結:https://github.com/jwasham/coding-interview-university4.開發人員路線圖2020前端、後端、全棧程式設計師的路線圖138k連結:https://github.com/kamranahmedse/developer-roadmap5.API用於軟體和Web開發的免費API的匯總列表。
  • 前端如何一鍵生成多維度數據可視化分析報表
    這裡筆者總結為如下3點核心知識:如何使用JavaScript實現前端導入和導出excel文件(H5編輯器實戰復盤)前端如何基於table中的數據一鍵生成多維度數據可視化分析報表如何實現會員管理系統下的權限路由和權限菜單