前端高效开发不得不知道的一些JavaScript库！

最新推荐文章于 2023-06-14 17:05:36 发布

前端纸飞机

最新推荐文章于 2023-06-14 17:05:36 发布

阅读量1w

点赞数 113

纸飞机

本文链接：https://blog.csdn.net/qq_32442973/article/details/120004973

版权

JavaScript 专栏收录该内容

60 篇文章 108 订阅

订阅专栏

工欲善其事,必先利其器；器欲尽其能,必先得其法。

函数库

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 来实现本地存储功能。

//存储键值对key-value
store.set('username', 'HQG')
 
//根据key，获取存储的value值
store.get('username')
 
//移除指定的key数据
store.remove('username')
 
//清除所有key
store.clear()
 
//运用store.js存储轻量级的json对象,自动stringify
store.set('user', { name: 'lcq' })
 
//根据key,获取一个存储对象,自动parse
var user = store.get('user')
console.log(user.name)；

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

推荐指数：⭐️⭐️⭐️⭐️⭐️

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'); //2021-08-29 23:36:09 
moment("20120901", "YYYYMMDD").fromNow(); //2 years ago      
//等很多

地址：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+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。