50 个常用的 JS 工具库,让你避免重复造轮子

前端达人

共 21047字,需浏览 43分钟

 ·

2021-10-02 18:11


总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题下都是超链接,可点击自行查阅) 希望能对您有用!如有意思的 轮子 可以在评论列出一起讨论下


color

https://www.npmjs.com/package/color

==功能==:JavaScript库,用于不可变的颜色转换和对CSS颜色字符串的支持。

npm install color
var color = Color('###7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'
 
console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]
 
console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }

uuidjs

https://www.npmjs.com/package/uuidj

==功能==:UUID.js-JavaScript的RFC兼容UUID生成器

// Create a version 4 (random number-based) UUID object
var objV4 = UUID.genV4();
 
// Create a version 1 (time-based) UUID object
var objV1 = UUID.genV1();
 
// Create a UUID object from a hexadecimal string
var uuid = UUID.parse("a0e0f130-8c21-11df-92d9-95795a3bcd40");
 
// Get string representations of a UUID object
console.log(uuid.toString());   // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexString);    // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexNoDelim);   // "a0e0f1308c2111df92d995795a3bcd40"
console.log(uuid.bitString);    // "101000001110000 ... 1100110101000000"
console.log(uuid.urn);          // "urn:uuid:a0e0f130-8c21-11df-92d9-95795a3bcd40"
 
// Compare UUID objects
console.log(objV4.equals(objV1));   // false
 
// Get UUID version numbers
console.log(objV4.version); // 4
console.log(objV1.version); // 1
 
// Get internal field values in 3 different forms via 2 different accessors
console.log(uuid.intFields.timeLow);                // 2699096368
console.log(uuid.bitFields.timeMid);                // "1000110000100001"
console.log(uuid.hexFields.timeHiAndVersion);       // "11df"
console.log(uuid.intFields.clockSeqHiAndReserved);  // 146
console.log(uuid.bitFields.clockSeqLow);            // "11011001"
console.log(uuid.hexFields.node);                   // "95795a3bcd40"
 
console.log(uuid.intFields[0]);                     // 2699096368
console.log(uuid.bitFields[1]);                     // "1000110000100001"
console.log(uuid.hexFields[2]);                     // "11df"
console.log(uuid.intFields[3]);                     // 146
console.log(uuid.bitFields[4]);                     // "11011001"
console.log(uuid.hexFields[5]);  

rc-upload

https://www.npmjs.com/package/rc-upload

==功能==:文件上传下载拖拽文件 及文件夹等

var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);

react-copy-to-clipboard

https://www.npmjs.com/package/react-copy-to-clipboard

==功能==:react 复制粘贴

npm install --save react react-copy-to-clipboard


import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
 
class App extends React.Component {
  state = {
    value'',
    copiedfalse,
  };
 
  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) =>
 this.setState({value, copied: false})} />
 
        <CopyToClipboard text={this.state.value}
          onCopy={() =>
 this.setState({copied: true})}>
          <span>Copy to clipboard with spanspan>

        CopyToClipboard>
 
        <CopyToClipboard text={this.state.value}
          onCopy={() =>
 this.setState({copied: true})}>
          <button>Copy to clipboard with buttonbutton>
        CopyToClipboard>
 
        {this.state.copied ? <span style={{color: 'red'}}>Copied.span> : null}
      div>
    );
  }
}
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

numeral

http://numeraljs.com/

==功能==:一个用于格式化和处理数字的javascript库。

var value = myNumeral.value();
// 1000

var myNumeral2 = numeral('1,000');

var value2 = myNumeral2.value();
// 1000

omit.js

https://www.npmjs.com/package/omit.js

==功能==:返回 在目标对象中 omit[删除; 忽略] 指定属性的对象; 实用程序功能,用于创建删除了某些字段的对象的浅表副本。

npm i --save omit.js

omit(obj: Objectfields: string[]): Object


var omit = require('omit.js');
omit({ name'Benjy'age18 }, [ 'name' ]); // => { age: 18 

Moment.js

https://momentjs.com/

==功能==:一个JavaScript日期库,用于解析,验证,操作和格式化日期。

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 22nd 2020, 10:55:15 am
moment().format('dddd');                    // Tuesday
moment().format("MMM Do YY");               // Dec 22nd 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();      

Day.js

https://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.zh-CN.md

==功能==:Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A'// 展示

dayjs()
  .set('month'3)
  .month() // 获取

dayjs().add(1'year'// 处理

dayjs().isBefore(dayjs()) // 查询

milliseconds

https://github.com/HenrikJoreteg/milliseconds

==~~~~功能==:用于将时间转换为毫秒。

var ms = require('milliseconds');

ms.seconds(2); // 2000
ms.minutes(2); // 120000
ms.hours(2);   // 7200000
ms.days(2);    // 172800000
ms.weeks(2);   // 1209600000
ms.months(2);  // 5259600000
ms.years(2);   // 63115200000

filesize

https://www.npmjs.com/package/filesize

==功能==:filesize.js提供了一种简单的方法来从数字(浮点数或整数)或字符串中获取人类可读的文件大小字符串。

npm i filesize


filesize(500);                        // "500 B"
filesize(500, {bitstrue});          // "4 Kb"
filesize(265318, {base10});         // "265.32 kB"
filesize(265318);                     // "259.1 KB"
filesize(265318, {round0});         // "259 KB"
filesize(265318, {output"array"});  // [259.1, "KB"]
filesize(265318, {output"object"}); // {value: 259.1, symbol: "KB", exponent: 1}
filesize(1, {symbols: {B"Б"}});     // "1 Б"
filesize(1024);                       // "1 KB"
filesize(1024, {exponent0});        // "1024 B"
filesize(1024, {output"exponent"}); // 1
filesize(265318, {standard"iec"});  // "259.1 KiB"
filesize(265318, {standard"iec"fullformtrue}); // "259.1 kibibytes"
filesize(12, {fullformtruefullforms: ["байтов"]});  // "12 байтов"
filesize(265318, {separator","});   // "259,1 KB"
filesize(265318, {locale"de"});   // "259,1 KB"

react-markdown

https://www.npmjs.com/package/react-markdown

==功能==:使用备注的React的Markdown组件。

import { Row, Col, Menu, Affix, Anchor } from 'antd';
import ReactMarkdown from 'react-markdown/with-html';
import { isEmpty } from "lodash";

import HeadBlock from './HeadBlock';

import 'github-markdown-css/github-markdown.css'
import './index.less';

const { Link } = Anchor;

const articles = {
  '1''/developer_guide.md',
  '2''/user_manual.md'
}


/**
 *
 * @param lists
 * 这里只做两级处理
 */

export const navsToTree = (lists: any[]) => {
  if (isEmpty(lists)) return [];
  // 提取第一个level为最大level 后续比他大的一律为同级
  const maxLevel = lists[0].level;
  const newLists: any[] = [];
  lists.forEach((item: any) => {
    // 一级 同级
    if (item.level <= maxLevel) {
      newLists.push(item)
    } else {
      // 非同级
      if (newLists[newLists.length - 1].children) {
        newLists[newLists.length - 1].children.push(item)
      } else {
        newLists[newLists.length - 1].children = [item]
      }
    }
  })
  return newLists;
}



const NormalTest: React.FC = () => {

  const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url''content'' });

  const [treeNavs, setTreeNavs] = useState([])

  // 初始为开发文档
  useEffect(() => {
    // console.log(1);

    changeCurrentArticle(articles['1'])
  }, [])

  // 这里是根据文档修改进行获取目录
  useEffect(() => {
    /**
     *  获取所有的文章标题
     */

      // console.log(currentArticle);

    const markdownNavs = document.querySelectorAll('.article-nav')
    const navs: any[] = [];
    markdownNavs.forEach((item: any) => {
      const level = item.getAttribute('data-level');
      const value = item.textContent;
      const nodeKey = item.id;
      navs.push({ level, value, nodeKey })
    })
    transArticleNavs(navs)

  }, [currentArticle.content])

  // 更改当前文档
  const changeCurrentArticle = async (url: string) => {
    const res = await fetch(url);
    const content = await res.text();
    setCurrentArticle({ ...currentArticle, content, url })
  }

  // 书籍导航点击
  const menuOnClick = (e: any) => {
    const url = articles[e.key]
    changeCurrentArticle(url)
  }

  // 转换为文章右侧目录
  const transArticleNavs = (navs: any) => {

    // 转换为二级导航
    const treedevelopDocs = navsToTree(navs);
    setTreeNavs(treedevelopDocs)

  }

  return (
    <>
      <Row className='articles'>
        <Col flex='200px' className="articles-list">
          <Affix offsetTop={24}>
            <Menu defaultSelectedKeys={['1']} onClick={menuOnClick} theme='light'>
              <Menu.Item key="1">开发文档Menu.Item>

              <Menu.Item key="2">使用文档Menu.Item>
            Menu>
          Affix>

        Col>
        <Col flex='1' className='articles-content'>
          <div className='articles-content_wrpper'>
            <ReactMarkdown
              className="markdown-body"
              source={currentArticle.content}
              escapeHtml={false}
              renderers={{
                heading: HeadBlock
              }}
            />

          div>
        Col>
        <Col flex='200px' className="articles-menu">
          <Affix offsetTop={20} >
            <Anchor style={{ width: 160 }}>
              {
                treeNavs.map((item: any) => {
                  if (item.children) {
                    return (
                      <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey}>
                        {
                          item.children.map((childItem: any) => (
                            <Link href={`###${childItem.nodeKey}`} title={childItem.value} key={childItem.nodeKey} />
                          ))
                        }
                      Link>
                    )
                  } else {
                    return (
                      <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey} />
                    )
                  }
                })
              }
            Anchor>
          Affix>
        Col>
      Row>
    
  );
};

export default NormalTest;
import React from 'react';

const HeadBlock = (props) => {

  const { level, children } = props;
  const { nodeKey } = children[0].props;

  return (
    <>
      {React.createElement(`h${level}`, { className: 'article-nav', id: nodeKey, 'data-level': level }, children)}
    

  );
}

export default HeadBlock;

cytoscape | cytoscape-dagre

https://www.npmjs.com/package/cytoscape

==功能==:Cytoscape.js是功能齐全的图论库。您是否需要对关系数据进行建模和/或可视化,例如生物数据或社交网络?如果是这样,Cytoscape.js就是您所需要的。Cytoscape.js包含一个图形理论模型和一个用于显示交互式图形的可选渲染器。该库旨在使程序员和科学家尽可能轻松地在其应用程序中使用图论,无论是用于Node.js应用程序中的服务器端分析还是用于丰富的用户界面。

Lodash

https://www.npmjs.com/package/lodash

==功能==:函数工具类库

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

patch-package node

https://www.npmjs.com/package/patch-package

==功能==:npm yran 补丁,用于改node_modules

cross-env node

https://www.npmjs.com/package/cross-env

==功能==:cross-env这是一款运行跨平台设置和使用环境变量的脚本。

npm install --save-dev cross-env
{
  "scripts": {
    "parentScript""cross-env GREET=\"Joe\" npm run childScript",
    "childScript""cross-env-shell \"echo Hello $GREET\""
  }
}

bignumber.js

https://www.npmjs.com/package/bignumber.js

==功能==:一个用于任意精度十进制和非十进制算术的JavaScript库

https://mikemcl.github.io/bignumber.js/
https://juejin.cn/post/6844903704714280968###heading-7

QRCode.js、 qrcode.vue

https://www.npmjs.com/package/qrcodejs2

https://www.npmjs.com/package/qrcode.vue

==功能==:

npm install --save qrcode.vue
npm i qrcodejs2


   getBlob(base64) {
      const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
      const byteString = atob(base64.split(',')[1]); // base64 解码
      const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
      const intArray = new Uint8Array(arrayBuffer); // 创建视图
      for (let i = 0; i < byteString.length; i += 1) {
        intArray[i] = byteString.charCodeAt(i);
      }
      return new Blob([intArray], {
        type: mimeString,
      });
    },
    savePicture(Url = this.qrcodeUrl) {
      const blob = new Blob([''], { type'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = Url;
      // eslint-disable-next-line prefer-destructuring
      a.download = Url.replace(/(.*\/)*([^.]+.*)/gi'$2').split('?')[0];
      const e = document.createEvent('MouseEvents');
      e.initMouseEvent(
        'click',
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null,
      );
      a.dispatchEvent(e);
      URL.revokeObjectURL(url);
    },
    _qrcode(url) {
      const div = document.createElement('div');
      // eslint-disable-next-line new-cap
      const code = new QRCode(div, {
        text: url,
        width500,
        height500,
        colorDark'###000000',
        colorLight'###ffffff',
        correctLevel: QRCode.CorrectLevel.L,
      });
      // 这里如果需要在页面上展示的话,就将div节点给添加到dom树上去;node.appendChild(div)
      const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas,并将canvas转换成base64
      const base64Text = canvas.toDataURL('image/png');
      const blob = this.getBlob(base64Text); // 将base64转换成blob对象
      return window.URL.createObjectURL(blob);
    },

cssnano、js-beautify

https://www.npmjs.com/package/cssnano

https://www.npmjs.com/package/js-beautify

==功能==:css js 压缩工具

cors node

https://www.npmjs.com/package/cors

==功能==:CORS是一个node.js软件包,用于提供可用于通过各种选项启用CORS的Connect / Express中间件。

npm install cors


var cors = require('cors');
app.use(
  cors({
    origin: ['http://localhost:8000'],
    methods: ['GET''POST'],
    alloweHeaders: ['Conten-Type''Authorization'],
  })
);

countup.js

https://www.npmjs.com/package/countup.js

==功能==:数字滚动插件使用方法详解

npm i countup.js

interface CountUpOptions {
  startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution
}

js-base64

https://www.npmjs.com/package/js-base64

==功能==:另一个Base64转码器。

npm install --save js-base64

require=require('esm')(module);
import {Base64} from 'js-base64';


let latin = 'dankogai';
let utf8  = '小飼弾'
let u8s   =  new Uint8Array([100,97,110,107,111,103,97,105]);
Base64.encode(latin);             // ZGFua29nYWk=
Base64.btoa(latin);               // ZGFua29nYWk=
Base64.btoa(utf8);                // raises exception
Base64.fromUint8Array(u8s);       // ZGFua29nYWk=
Base64.fromUint8Array(u8s, true); // ZGFua29nYW which is URI safe
Base64.encode(utf8);              // 5bCP6aO85by+
Base64.encode(utf8, true)         // 5bCP6aO85by-
Base64.encodeURI(utf8);           // 5bCP6aO85by-

json-bigint

https://www.npmjs.com/package/json-bigint

==功能==:Native Bigint是最近添加到JS的,因此我们添加了一个利用它的选项,而不是bignumber.js。但是,使用本机BigInt进行解析仍然是向后兼容的选项。

var JSONbig = require('json-bigint');
 
var json = '{ "value" : 9223372036854775807, "v2": 123 }';
console.log('Input:', json);
console.log('');
 
console.log('node.js built-in JSON:');
var r = JSON.parse(json);
console.log('JSON.parse(input).value : ', r.value.toString());
console.log('JSON.stringify(JSON.parse(input)):'JSON.stringify(r));
 
console.log('\n\nbig number JSON:');
var r1 = JSONbig.parse(json);
console.log('JSONbig.parse(input).value : ', r1.value.toString());
console.log('JSONbig.stringify(JSONbig.parse(input)):', JSONbig.stringify(r1));

vuejs-datetimepicker

https://www.npmjs.com/package/vuejs-datetimepicker

==功能==:

npm install vuejs-datetimepicker