推荐13个很棒的 JS 库，提高效率，解放生产力
- 推荐13个很棒的 JS 库，提高效率，解放生产力
- 1. three.js
- 2. babylon.js
- 3. axios.js
- 4. qs
- 5. js-cookie
- 6. lodash.js
- 7. moment.js
- 8. dayjs
- 9. mescroll.js
- 10. flv.js
- 11. url.js
- 12. vConsole.js
- 13. html2canvs
1. three.js
一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。
官方文档
- 安装
yarn add three -S
2. babylon.js
一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验. 除了游戏用来在页面实现一些3D场景也是没问题的
官方文档
- 安装
yarn add babylonjs -S
3. axios.js
一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官方文档
- 安装
yarn add axios -S
4. qs
一个url参数转化（parse和stringify）的js库。
官方文档
- 安装
yarn add qs -S
5. js-cookie
一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件
官方文档
- 安装
yarn add js-cookie -S
6. lodash.js
lodash-es （element-plus组件库已经集成）
一个一致性、模块化、高性能的 JavaScript 实用工具库。
lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
官方文档
- 安装
浏览器环境：
<script src="lodash.js"></script>
通过 npm或yarn：
npm i lodash -S
或
yarn add lodash -S
- 使用
// 全局引入
// import _ from 'lodash-es'
// 或
// 按需加载
import { cloneDeep } from 'lodash-es'
// 数组或对象深拷贝
const objects = [{ 'a': 1 }, { 'b': 2 }];
// const deep = _.cloneDeep(objects);
const deep = cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
7. moment.js
在 JavaScript 中解析、校验、操作、显示日期和时间。
官方文档
- 安装
yarn add moment -S
- 具体使用需要看文档
moment().format('MMMM Do YYYY, h:mm:ss a'); // 八月 16日 2023, 5:31:14 下午
moment().format('dddd'); // 星期三
moment().format("MMM Do YY"); // 8月 16日 23
moment().format('YYYY [escaped] YYYY'); // 2023 escaped 2023
moment().format(); // 2023-08-16T17:31:14+08:00
8. dayjs
element-plus组件库已经集成
一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。和 Moment.js 的 API 设计一样, dayjs.min.js最新版本为1.11.9，体积仅为6.94kb。
官方文档
- 安装
yarn add dayjs -S
- 具体使用需要看文档
9. mescroll.js
一款精致的、在H5端运行的下拉刷新和上拉加载插件。
原生js，不依赖jquery，zepto，支持vue，一套代码多端运行, 支持uni-app，完美运行于android, iOS, 手机各浏览器，兼容PC端主流浏览器。
官方文档
- 安装
yarn add mescroll.js -S
- 具体使用需要看文档
10. flv.js
是HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
学习文档
- 安装
yarn add flv.js -S
11. url.js
用于URL解析和解析的实用程序。
官方文档
- 安装
yarn add url -S
12. vConsole.js
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
官方文档
- 安装
yarn add vConsole -S
- 使用
import VConsole from 'vconsole'
new VConsole()
13. html2canvs
允许让我们直接在用户浏览器上拍摄网页或其部分的"截图"。
它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。
常见的应用场景就是在 H5 端生成分享图或海报。
官方文档
- 安装
yarn add html2canvas -S
- 使用
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!h4>
div>
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
})