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

举报
纸飞机 发表于 2021/10/15 10:12:18 2021/10/15
【摘要】 ​  工欲善其事,必先利其器;器欲尽其能,必先得其法。函数库lodash推荐指数:⭐️⭐️⭐️⭐️⭐️Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。地址:Lodash 简介 | Lodash 中文文档 | Lodash 中文网请求库 axios推荐指数:⭐️⭐️⭐️⭐️⭐️是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。F...

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

函数库

lodash

推荐指数:⭐️⭐️⭐️⭐️⭐️

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

地址:Lodash 简介 | Lodash 中文文档 | Lodash 中文网

请求库 

axios

推荐指数:⭐️⭐️⭐️⭐️⭐️

是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests 从node.js 创建 http 请求 支持Promise API 拦截请求和...

地址:axios中文网|axios API 中文文档 | axios

flyio 

推荐指数:⭐️⭐️⭐️⭐️⭐️

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

地址:flyio - npm

富文本 

vue-ueditor-wrap

推荐指数:⭐️⭐️⭐️⭐️⭐️

一个“包装”了 UEditor 的 Vue 组件,支持通过 v-model 来绑定富文本编辑器的内容,让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent,setContent 等繁琐的步骤。

地址:vue-ueditor-wrap - Vue + UEditor + v-model双向绑定

动画库 

Animate.css

推荐指数:⭐️⭐️⭐️⭐️⭐️

内置了很多典型的css3动画,兼容性好使用方便。

地址:Animate中文网 – Animate安装、Animate使用、Animate下载

Magic.css 

推荐指数:⭐️⭐️⭐️

一款独特的CSS3动画特效包。

网址:Magic Animations CSS3

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滚动插件。

它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

网址:iScroll 5 介绍 · iScroll 5 API 中文版

存储类

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);

地址:store - npm

js-cookie

推荐指数:⭐️⭐️⭐️⭐️⭐️

js-cookie是一个简单的,轻量级的处理cookies的js API。

地址:js-cookie - npm

Mock数据类

Mockjs

推荐指数:⭐️⭐️⭐️⭐️⭐️

生成任意随机数据,拦截 Ajax 请求。

地址:mockjs - npm 

数据可视化 

ECharts

推荐指数:⭐️⭐️⭐️⭐️⭐️

一个基于 JavaScript 的开源可视化图表库。

地址:Apache ECharts

D3.js 

推荐指数:⭐️⭐️⭐️⭐️⭐️

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及Canvas 来展示数据。

地址:D3js: Data-Driven Documents

Three.js 

推荐指数:⭐️⭐️⭐️⭐️⭐️

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

地址:Three.js中文网

hightchart

推荐指数:⭐️⭐️⭐️⭐️

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。

地址:兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts

DataV 

推荐指数:⭐️⭐️⭐️

Vue/React 大屏数据展示组件库。

地址:DataV

地图数据源 

推荐指数:⭐️⭐️⭐️⭐️⭐️

大屏/地图/echarts地图数据都可以从这里面取!

地址:地图选择器

地图 

高德地图

推荐指数:⭐️⭐️⭐️⭐️⭐️

地址:高德开放平台 | 高德地图API

百度地图 

推荐指数:⭐️⭐️⭐️⭐️

地址:百度地图开放平台 | 百度地图API SDK | 地图开发

地图坐标系转换 (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      
//等很多

地址:Moment.js 中文网

day.js 

推荐指数:⭐️⭐️⭐️⭐️⭐️

一个轻量的处理时间和日期的 JavaScript 库。

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

轮播

swiper.js 

推荐指数:⭐️⭐️⭐️⭐️⭐️

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

地址:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

slip.js 

推荐指数:⭐️⭐️

移动端跟随手指滑动组件,零依赖。

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

复制粘贴插件

clipboard-polyfill

推荐指数:⭐️⭐️⭐️⭐️⭐️

这个库是现代基于Promise的异步剪贴板API的polyfill。

地址:clipboard-polyfill - npm

clipboard.js 

推荐指数:⭐️⭐️⭐️⭐️

Clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。

地址:Clipboard.js

二维码插件 

qrcode.js

推荐指数:⭐️⭐️⭐️⭐️⭐️

qrcode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

地址:qrcode - npm

拖拽插件

Draggabilly

推荐指数:⭐️⭐️⭐️

可帮你轻松实现网页上各种元素的拖放操作。支持 IE8+ 和多触摸。

地址:Draggabilly

dragula 

推荐指数:⭐️⭐️⭐️⭐️

dragula让你能够很方便地实现拖拽功能的JS库。Dragula 是一个 JavaScript 库,实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

地址:dragula - npm

文件上传 

WebUploader

推荐指数:⭐️⭐️⭐️⭐️⭐️

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

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

地址:Web Uploader

Canvas库 

html2canvas

推荐指数:⭐️⭐️⭐️⭐️⭐️

html2canvas是一款使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”的库。

地址:html2canvas - npm

Fabric.js 

推荐指数:⭐️⭐️⭐️⭐️⭐️

是一个强大而简单的 Javascript HTML5 画布库 Fabric 在画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas(和 canvas-to-SVG)解析器。

地址:Fabric.js Javascript Canvas Library

图片处理 

cropperjs

推荐指数:⭐️⭐️⭐️⭐️⭐️

cropperjs是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括IE9以上的现代浏览器。(关键是使用方法简单,几行代码就可以搞定)。

地址:cropperjs - npm 

gif.js

推荐指数:⭐️⭐️⭐️⭐️⭐️

gif.js 是一个可直接在浏览器上运行的 JavaScript GIF 编码器。直接生成gif。

地址:gif.js - npm

LazyLoad 

推荐指数:⭐️⭐️⭐️⭐️⭐️

Lazy Load帮助高度较长的网页进行延迟载入图片,尚未浏览到该部分时,不会载入视角外的图片,提高效率。衍生有也有vue-lazyload以及react-lazyload。

地址:Lazy Load 中文网 | Javascript延迟加载(LazyLoad.js)图像插件

前端国际化 

i18n

推荐指数:⭐️⭐️⭐️⭐️⭐️

地址:i18n - npm

视频/音频 

xgplayer

推荐指数:⭐️⭐️⭐️⭐️⭐️

一款带解析器、支持音频、歌词解析、能节省流量的HTML5视频播放器。

地址:西瓜播放器

dplayer

推荐指数:⭐️⭐️⭐️⭐️

一个很好看的弹幕视频播放器。

地址:DPlayer

video.js

推荐指数:⭐️

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。说真的(不好看且难改)

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

其他插件 

screenfull.js

推荐指数:⭐️⭐️

浏览器全屏插件,消除浏览器差异。

地址:screenfull - npm

highlight.js

推荐指数:⭐️⭐️⭐️⭐️

针对Web程序所做的高亮显示上色。

高亮

地址:highlight.js中文网 


以上是目前总结出的常用的库,会一直更新,如果你也有好用的库要推荐请在评论区或私信我们。

以上推荐指数不代表个人观点,只是一个统计。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。