2024年Web前端最新前端高效开发不得不知道的一些JavaScript库！(1)，我在华为做前端外包的真实经历

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

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、Angular_JS 和 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

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

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。