推荐22个很棒的 JS 库，提高效率，解放生产力

• 推荐22个很棒的 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
  • 18. nzh
  • 19. Numeral.js
  • 20. 图片预览 viewerjs
  • 21. 十进制算术运算 big.js
  • 22. 文件保存并下载 FileSaver.js
  • 23. 正则验证类库 validator

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

18. nzh

Nzh 适用于需要转换阿拉伯数字与中文数字的场景。最新版本体积仅为5.38kb。

官方文档

• 安装

yarn add nzh -S

• 使用
  • encodeS(num,options) 转中文小写
  • encodeB(num,options) 转中文大写
  • toMoney(num,options) 转中文金额
  • decodeS(zh_num) 中文小写转数字
  • decodeB(zh_num) 中文大写转数字

const Nzh = require("nzh");
const nzhcn = Nzh.cn;                 // 使用简体中文,  另外有 Nzh.hk -- 繁体中文

nzhcn.encodeS(100111);              // 转中文小写 >> 十万零一百一十一
nzhcn.encodeB(100111);              // 转中文大写 >> 壹拾万零壹佰壹拾壹
nzhcn.encodeS("1.23456789e+21");    // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
nzhcn.toMoney("100111.11");         // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分
nzhcn.toMoney('100111.11', {
    outSymbol: ''
}) // 转中文金额 >> 壹拾万零壹佰壹拾壹元壹角壹分

19. Numeral.js

一款用于格式化和操作数字的JavaScript库。最新版本体积仅为11.18kb。

官方文档

• 安装

yarn add numeral -S

• 使用
• numeral(num).format(‘XXX’)
  数字可以格式化成货币、百分比、时间，甚至是带有小数点、千分位和缩写。

const string = numeral(1000000.9448).format('$0,0.00[0]') // ¥1,000,000.945
const number = numeral(1.6)

const added = number.add(1.01)
console.log( added._value) // 2.61

• 如果不考虑复杂情况和兼容性，可以直接使用toLocaleString方法

var num =100000111
num.toLocaleString() //  100,000,111

var num = 1234.2345
num.toLocaleString('zh',{style:'currency' , currency:'CNY' }) // "¥1,234.23"
num.toLocaleString('ja',{style:'currency' , currency:'JPY' }) // "￥1,234"
num.toLocaleString('zh',{style:'currency' , currency:'CNY' , useGrouping: false , minimumFractionDigits: 3}) // "¥1234.235"

var date = new Date()
date.toLocaleString() // "2020/9/28 下午5:14:53"
date.toLocaleString('zh',{ hour12: false }) // "2020/9/28 17:14:53"

var num = 2333.3;
console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5 }));    //02,333.3
//如果不想有分隔符，可以指定useGrouping为false
console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }));    //02333.3
console.log(num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false })); //2333.30

var num2 = 666.666;
console.log(num2.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false }));     //666.67

minimumIntegerDigits、 minimumFractionDigits 与 maximumFractionDigits
这组属性非常的强大，在某些场合会给我们带来极大的便利。
minimumIntegerDigits用来指定使用的整数数字的最小数目.可能的值是从1到21,默认值是1。
minimumFractionDigits用来指定使用的小数位数的最小数目.可能的值是从0到20;默认为普通的数字和百分比格式为0。
maximumFractionDigits用来指定使用的小数位数的最大数目。可能的值是从0到20。

20. 图片预览 viewerjs

一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。

官方文档

• 安装

yarn add viewerjs -S

• 使用

const imgEle = document.querySelector('.openImg')
// 判断是不是图片类型
if (imgEle) {
    const viewer = new Viewer(imgEle, {
        title: '预览图',
        toolbar: true,
        inline: false, // 内联模式
        button: true, //是否显示关闭按钮
        loading: true, // 图片加载状态
        zIndex: 9999 // 设置层级
    })
    viewer.show() //是否立即执行。
}

21. 十进制算术运算 big.js

一个小型，快速的 JavaScript 库，用于任意精度的十进制算术运算，体积仅为6.72kb；

官方文档

• 安装

yarn add big.js -S

• 使用

const sum = new Big(1.01).plus(1.02).toNumber()
console.log(sum) // 输出：2.03

22. 文件保存并下载 FileSaver.js

一种用于将Blob对象保存到本地计算机的JavaScript库，客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序，体积仅为2.68kb；

官方文档

• 安装

yarn add file-saver -S

• 使用

<canvas id="my-canvas" />

const blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' })
saveAs(blob, '文件名称.txt')

const canvas = document.getElementById('my-canvas')
canvas.toBlob((blob) => {
    saveAs(blob, '画布图片.png')
})

23. 正则验证类库 validator

一种用于将Blob对象保存到本地计算机的JavaScript库，客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序，体积仅为2.68kb；

官方文档
相关CSDN文章

• 安装

yarn add validator -S

• vue3中使用

import isEmail from 'validator/lib/isEmail'
import isURL from 'validator/lib/isURL'
import isMobilePhone from 'validator/lib/isMobilePhone'
import isIdentityCard from 'validator/lib/isIdentityCard'

// 官方文档：https://www.npmjs.com/package/validator?activeTab=readme

export const validator = {
  isEmail,
  isURL,
  isMobilePhone,
  isIdentityCard
}

export default function (app) {
  app.config.globalProperties.$validator = validator
}