devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：煮酒与君饮 | 2024-07-26 05:25:38

赞

踩

js库
1. three.js

一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

官方文档

  • 安装
yarn add three -S

  • 1
2. babylon.js

一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验. 除了游戏用来在页面实现一些3D场景也是没问题的

官方文档

  • 安装
yarn add babylonjs -S

  • 1
3. axios.js

一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官方文档

  • 安装
yarn add axios -S

  • 1
4. qs

一个url参数转化（parse和stringify）的js库。

官方文档

  • 安装
yarn add qs -S

  • 1
5. js-cookie

一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件

官方文档

  • 安装
yarn add js-cookie -S

  • 1
6. lodash.js

lodash-es （element-plus组件库已经集成）

一个一致性、模块化、高性能的 JavaScript 实用工具库。
lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

官方文档

  • 安装
    浏览器环境：
<script src="lodash.js"></script>

  • 1

通过 npm或yarn：

npm i lodash -S
或
yarn add lodash -S

  • 1
  • 2
  • 3
  • 使用
// 全局引入 
// 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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
7. moment.js

在 JavaScript 中解析、校验、操作、显示日期和时间。

官方文档

  • 安装
yarn add moment -S

  • 1
  • 具体使用需要看文档
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

  • 1
  • 2
  • 3
  • 4
  • 5
8. dayjs

element-plus组件库已经集成

一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。和 Moment.js 的 API 设计一样, dayjs.min.js最新版本为1.11.9，体积仅为6.94kb。

官方文档

  • 安装
yarn add dayjs -S

  • 1
  • 具体使用需要看文档
9. mescroll.js

一款精致的、在H5端运行的下拉刷新和上拉加载插件。
原生js，不依赖jquery，zepto，支持vue，一套代码多端运行, 支持uni-app，完美运行于android, iOS, 手机各浏览器，兼容PC端主流浏览器。

官方文档

  • 安装
yarn add mescroll.js -S

  • 1
  • 具体使用需要看文档
10. flv.js

是HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

学习文档

  • 安装
yarn add flv.js -S

  • 1
11. url.js

用于URL解析和解析的实用程序。

官方文档

  • 安装
yarn add url -S

  • 1
12. vConsole.js

一个轻量、可拓展、针对手机网页的前端开发者调试面板。
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

官方文档

  • 安装
yarn add vConsole -S

  • 1
  • 使用
import VConsole from 'vconsole'

new VConsole()

  • 1
  • 2
  • 3
13. html2canvs

允许让我们直接在用户浏览器上拍摄网页或其部分的"截图"。
它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。
常见的应用场景就是在 H5 端生成分享图或海报。

官方文档

  • 安装
yarn add html2canvas -S

  • 1
  • 使用
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

  • 1
  • 2
  • 3
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
})

  • 1
  • 2
  • 3
18. nzh

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

官方文档

  • 安装
yarn add nzh -S

  • 1
  • 使用
    • 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: ''
}) // 转中文金额 >> 壹拾万零壹佰壹拾壹元壹角壹分

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
19. Numeral.js

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

官方文档

  • 安装
yarn add numeral -S

  • 1
  • 使用
  • 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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 如果不考虑复杂情况和兼容性，可以直接使用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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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

20. 图片预览 viewerjs

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

官方文档

  • 安装
yarn add viewerjs -S

  • 1
  • 使用
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() //是否立即执行。
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

如果需要在vue中使用，需要用到v-viewer库：

  • 安装
pnpm i v-viewer -S

  • 1
  • 使用
    1、main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<!-- Options API -->
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      }
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images
        })
      }
    }
  })
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
  import { api as viewerApi } from 'v-viewer'
  const images = [
    "https://picsum.photos/200/200",
    "https://picsum.photos/300/200",
    "https://picsum.photos/250/200"
  ]
  const show = () => {
    viewerApi({
      images
    })
  }
</script> -->

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
21. 十进制算术运算 big.js

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

官方文档

  • 安装
yarn add big.js -S

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

  • 1
  • 2
22. 文件保存并下载 FileSaver.js

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

官方文档

  • 安装
yarn add file-saver -S

  • 1
  • 使用
<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')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
23. 正则验证类库 validator

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

官方文档
相关CSDN文章

  • 安装
yarn add validator -S

  • 1
  • 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
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/883725
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号