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

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

作者：繁依Fanyi0 | 2024-03-02 06:25:55

赞

踩

js工具库

0c1432bdd048db609f7b7b3af3f95b2e.png

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

color

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

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

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

uuidjs

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

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

  1. // Create a version 4 (random number-based) UUID object
  2. var objV4 = UUID.genV4();
  3.  
  4. // Create a version 1 (time-based) UUID object
  5. var objV1 = UUID.genV1();
  6.  
  7. // Create a UUID object from a hexadecimal string
  8. var uuid = UUID.parse("a0e0f130-8c21-11df-92d9-95795a3bcd40");
  9.  
  10. // Get string representations of a UUID object
  11. console.log(uuid.toString());   // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
  12. console.log(uuid.hexString);    // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
  13. console.log(uuid.hexNoDelim);   // "a0e0f1308c2111df92d995795a3bcd40"
  14. console.log(uuid.bitString);    // "101000001110000 ... 1100110101000000"
  15. console.log(uuid.urn);          // "urn:uuid:a0e0f130-8c21-11df-92d9-95795a3bcd40"
  16.  
  17. // Compare UUID objects
  18. console.log(objV4.equals(objV1));   // false
  19.  
  20. // Get UUID version numbers
  21. console.log(objV4.version); // 4
  22. console.log(objV1.version); // 1
  23.  
  24. // Get internal field values in 3 different forms via 2 different accessors
  25. console.log(uuid.intFields.timeLow);                // 2699096368
  26. console.log(uuid.bitFields.timeMid);                // "1000110000100001"
  27. console.log(uuid.hexFields.timeHiAndVersion);       // "11df"
  28. console.log(uuid.intFields.clockSeqHiAndReserved);  // 146
  29. console.log(uuid.bitFields.clockSeqLow);            // "11011001"
  30. console.log(uuid.hexFields.node);                   // "95795a3bcd40"
  31.  
  32. console.log(uuid.intFields[0]);                     // 2699096368
  33. console.log(uuid.bitFields[1]);                     // "1000110000100001"
  34. console.log(uuid.hexFields[2]);                     // "11df"
  35. console.log(uuid.intFields[3]);                     // 146
  36. console.log(uuid.bitFields[4]);                     // "11011001"
  37. console.log(uuid.hexFields[5]);

rc-upload

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

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

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

react-copy-to-clipboard

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

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

  1. npm install --save react react-copy-to-clipboard
  2.  
  3.  
  4. import React from 'react';
  5. import ReactDOM from 'react-dom';
  6. import {CopyToClipboard} from 'react-copy-to-clipboard';
  7.  
  8. class App extends React.Component {
  9.   state = {
  10.     value: '',
  11.     copied: false,
  12.   };
  13.  
  14.   render() {
  15.     return (
  16.       <div>
  17.         <input value={this.state.value}
  18.           onChange={({target: {value}}) => this.setState({value, copied: false})} />
  19.  
  20.         <CopyToClipboard text={this.state.value}
  21.           onCopy={() => this.setState({copied: true})}>
  22.           <span>Copy to clipboard with span</span>
  23.         </CopyToClipboard>
  24.  
  25.         <CopyToClipboard text={this.state.value}
  26.           onCopy={() => this.setState({copied: true})}>
  27.           <button>Copy to clipboard with button</button>
  28.         </CopyToClipboard>
  29.  
  30.         {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
  31.       </div>
  32.     );
  33.   }
  34. }
  35.  
  36. const appRoot = document.createElement('div');
  37. document.body.appendChild(appRoot);
  38. ReactDOM.render(<App />, appRoot);

numeral

http://numeraljs.com/

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

  1. var value = myNumeral.value();
  2. // 1000
  3.  
  4. var myNumeral2 = numeral('1,000');
  5.  
  6. var value2 = myNumeral2.value();
  7. // 1000

omit.js

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

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

  1. npm i --save omit.js
  2.  
  3. omit(obj: Object, fields: string[]): Object
  4.  
  5.  
  6. var omit = require('omit.js');
  7. omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18

Moment.js

https://momentjs.com/

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

  1. moment().format('MMMM Do YYYY, h:mm:ss a'); // December 22nd 2020, 10:55:15 am
  2. moment().format('dddd');                    // Tuesday
  3. moment().format("MMM Do YY");               // Dec 22nd 20
  4. moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
  5. 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

  1. dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示
  2.  
  3. dayjs()
  4.   .set('month', 3)
  5.   .month() // 获取
  6.  
  7. dayjs().add(1, 'year') // 处理
  8.  
  9. dayjs().isBefore(dayjs()) // 查询

milliseconds

https://github.com/HenrikJoreteg/milliseconds

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

  1. var ms = require('milliseconds');
  2.  
  3. ms.seconds(2); // 2000
  4. ms.minutes(2); // 120000
  5. ms.hours(2);   // 7200000
  6. ms.days(2);    // 172800000
  7. ms.weeks(2);   // 1209600000
  8. ms.months(2);  // 5259600000
  9. ms.years(2);   // 63115200000

filesize

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

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

  1. npm i filesize
  2.  
  3.  
  4. filesize(500);                        // "500 B"
  5. filesize(500, {bits: true});          // "4 Kb"
  6. filesize(265318, {base: 10});         // "265.32 kB"
  7. filesize(265318);                     // "259.1 KB"
  8. filesize(265318, {round: 0});         // "259 KB"
  9. filesize(265318, {output: "array"});  // [259.1, "KB"]
  10. filesize(265318, {output: "object"}); // {value: 259.1, symbol: "KB", exponent: 1}
  11. filesize(1, {symbols: {B: "Б"}});     // "1 Б"
  12. filesize(1024);                       // "1 KB"
  13. filesize(1024, {exponent: 0});        // "1024 B"
  14. filesize(1024, {output: "exponent"}); // 1
  15. filesize(265318, {standard: "iec"});  // "259.1 KiB"
  16. filesize(265318, {standard: "iec", fullform: true}); // "259.1 kibibytes"
  17. filesize(12, {fullform: true, fullforms: ["байтов"]});  // "12 байтов"
  18. filesize(265318, {separator: ","});   // "259,1 KB"
  19. filesize(265318, {locale: "de"});   // "259,1 KB"

react-markdown

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

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

  1. import { Row, Col, Menu, Affix, Anchor } from 'antd';
  2. import ReactMarkdown from 'react-markdown/with-html';
  3. import { isEmpty } from "lodash";
  4.  
  5. import HeadBlock from './HeadBlock';
  6.  
  7. import 'github-markdown-css/github-markdown.css'
  8. import './index.less';
  9.  
  10. const { Link } = Anchor;
  11.  
  12. const articles = {
  13.   '1': '/developer_guide.md',
  14.   '2': '/user_manual.md'
  15. }
  16.  
  17.  
  18. /**
  19.  *
  20.  * @param lists
  21.  * 这里只做两级处理
  22.  */
  23. export const navsToTree = (lists: any[]) => {
  24.   if (isEmpty(lists)) return [];
  25.   // 提取第一个level为最大level 后续比他大的一律为同级
  26.   const maxLevel = lists[0].level;
  27.   const newLists: any[] = [];
  28.   lists.forEach((item: any) => {
  29.     // 一级 同级
  30.     if (item.level <= maxLevel) {
  31.       newLists.push(item)
  32.     } else {
  33.       // 非同级
  34.       if (newLists[newLists.length - 1].children) {
  35.         newLists[newLists.length - 1].children.push(item)
  36.       } else {
  37.         newLists[newLists.length - 1].children = [item]
  38.       }
  39.     }
  40.   })
  41.   return newLists;
  42. }
  43.  
  44.  
  45.  
  46. const NormalTest: React.FC<any> = () => {
  47.  
  48.   const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url: '', content: '' });
  49.  
  50.   const [treeNavs, setTreeNavs] = useState<any[]>([])
  51.  
  52.   // 初始为开发文档
  53.   useEffect(() => {
  54.     // console.log(1);
  55.  
  56.     changeCurrentArticle(articles['1'])
  57.   }, [])
  58.  
  59.   // 这里是根据文档修改进行获取目录
  60.   useEffect(() => {
  61.     /**
  62.      *  获取所有的文章标题
  63.      */
  64.       // console.log(currentArticle);
  65.  
  66.     const markdownNavs = document.querySelectorAll('.article-nav')
  67.     const navs: any[] = [];
  68.     markdownNavs.forEach((item: any) => {
  69.       const level = item.getAttribute('data-level');
  70.       const value = item.textContent;
  71.       const nodeKey = item.id;
  72.       navs.push({ level, value, nodeKey })
  73.     })
  74.     transArticleNavs(navs)
  75.  
  76.   }, [currentArticle.content])
  77.  
  78.   // 更改当前文档
  79.   const changeCurrentArticle = async (url: string) => {
  80.     const res = await fetch(url);
  81.     const content = await res.text();
  82.     setCurrentArticle({ ...currentArticle, content, url })
  83.   }
  84.  
  85.   // 书籍导航点击
  86.   const menuOnClick = (e: any) => {
  87.     const url = articles[e.key]
  88.     changeCurrentArticle(url)
  89.   }
  90.  
  91.   // 转换为文章右侧目录
  92.   const transArticleNavs = (navs: any) => {
  93.  
  94.     // 转换为二级导航
  95.     const treedevelopDocs = navsToTree(navs);
  96.     setTreeNavs(treedevelopDocs)
  97.  
  98.   }
  99.  
  100.   return (
  101.     <>
  102.       <Row className='articles'>
  103.         <Col flex='200px' className="articles-list">
  104.           <Affix offsetTop={24}>
  105.             <Menu defaultSelectedKeys={['1']} onClick={menuOnClick} theme='light'>
  106.               <Menu.Item key="1">开发文档</Menu.Item>
  107.               <Menu.Item key="2">使用文档</Menu.Item>
  108.             </Menu>
  109.           </Affix>
  110.  
  111.         </Col>
  112.         <Col flex='1' className='articles-content'>
  113.           <div className='articles-content_wrpper'>
  114.             <ReactMarkdown
  115.               className="markdown-body"
  116.               source={currentArticle.content}
  117.               escapeHtml={false}
  118.               renderers={{
  119.                 heading: HeadBlock
  120.               }}
  121.             />
  122.           </div>
  123.         </Col>
  124.         <Col flex='200px' className="articles-menu">
  125.           <Affix offsetTop={20} >
  126.             <Anchor style={{ width: 160 }}>
  127.               {
  128.                 treeNavs.map((item: any) => {
  129.                   if (item.children) {
  130.                     return (
  131.                       <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey}>
  132.                         {
  133.                           item.children.map((childItem: any) => (
  134.                             <Link href={`###${childItem.nodeKey}`} title={childItem.value} key={childItem.nodeKey} />
  135.                           ))
  136.                         }
  137.                       </Link>
  138.                     )
  139.                   } else {
  140.                     return (
  141.                       <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey} />
  142.                     )
  143.                   }
  144.                 })
  145.               }
  146.             </Anchor>
  147.           </Affix>
  148.         </Col>
  149.       </Row>
  150.     </>
  151.   );
  152. };
  153.  
  154. export default NormalTest;
  1. import React from 'react';
  2.  
  3. const HeadBlock = (props) => {
  4.  
  5.   const { level, children } = props;
  6.   const { nodeKey } = children[0].props;
  7.  
  8.   return (
  9.     <>
  10.       {React.createElement(`h${level}`, { className: 'article-nav', id: nodeKey, 'data-level': level }, children)}
  11.     </>
  12.   );
  13. }
  14.  
  15. 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

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

  1. // Load the full build.
  2. var _ = require('lodash');
  3. // Load the core build.
  4. var _ = require('lodash/core');
  5. // Load the FP build for immutable auto-curried iteratee-first data-last methods.
  6. var fp = require('lodash/fp');
  7.  
  8. // Load method categories.
  9. var array = require('lodash/array');
  10. var object = require('lodash/fp/object');
  11.  
  12. // Cherry-pick methods for smaller browserify/rollup/webpack bundles.
  13. var at = require('lodash/at');
  14. 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这是一款运行跨平台设置和使用环境变量的脚本。

  1. npm install --save-dev cross-env
  2. {
  3.   "scripts": {
  4.     "parentScript": "cross-env GREET=\"Joe\" npm run childScript",
  5.     "childScript": "cross-env-shell \"echo Hello $GREET\""
  6.   }
  7. }

bignumber.js

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

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

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

QRCode.js、 qrcode.vue

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

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

==功能==：

  1. npm install --save qrcode.vue
  2. npm i qrcodejs2
  3.  
  4.  
  5.    getBlob(base64) {
  6.       const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
  7.       const byteString = atob(base64.split(',')[1]); // base64 解码
  8.       const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
  9.       const intArray = new Uint8Array(arrayBuffer); // 创建视图
  10.       for (let i = 0; i < byteString.length; i += 1) {
  11.         intArray[i] = byteString.charCodeAt(i);
  12.       }
  13.       return new Blob([intArray], {
  14.         type: mimeString,
  15.       });
  16.     },
  17.     savePicture(Url = this.qrcodeUrl) {
  18.       const blob = new Blob([''], { type: 'application/octet-stream' });
  19.       const url = URL.createObjectURL(blob);
  20.       const a = document.createElement('a');
  21.       a.href = Url;
  22.       // eslint-disable-next-line prefer-destructuring
  23.       a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0];
  24.       const e = document.createEvent('MouseEvents');
  25.       e.initMouseEvent(
  26.         'click',
  27.         true,
  28.         false,
  29.         window,
  30.         0,
  31.         0,
  32.         0,
  33.         0,
  34.         0,
  35.         false,
  36.         false,
  37.         false,
  38.         false,
  39.         0,
  40.         null,
  41.       );
  42.       a.dispatchEvent(e);
  43.       URL.revokeObjectURL(url);
  44.     },
  45.     _qrcode(url) {
  46.       const div = document.createElement('div');
  47.       // eslint-disable-next-line new-cap
  48.       const code = new QRCode(div, {
  49.         text: url,
  50.         width: 500,
  51.         height: 500,
  52.         colorDark: '###000000',
  53.         colorLight: '###ffffff',
  54.         correctLevel: QRCode.CorrectLevel.L,
  55.       });
  56.       // 这里如果需要在页面上展示的话，就将div节点给添加到dom树上去；node.appendChild(div)
  57.       const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64
  58.       const base64Text = canvas.toDataURL('image/png');
  59.       const blob = this.getBlob(base64Text); // 将base64转换成blob对象
  60.       return window.URL.createObjectURL(blob);
  61.     },

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中间件。

  1. npm install cors
  2.  
  3.  
  4. var cors = require('cors');
  5. app.use(
  6.   cors({
  7.     origin: ['http://localhost:8000'],
  8.     methods: ['GET', 'POST'],
  9.     alloweHeaders: ['Conten-Type', 'Authorization'],
  10.   })
  11. );

countup.js

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

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

  1. npm i countup.js
  2.  
  3. interface CountUpOptions {
  4.   startVal?: number; // number to start at (0)
  5.   decimalPlaces?: number; // number of decimal places (0)
  6.   duration?: number; // animation duration in seconds (2)
  7.   useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  8.   useEasing?: boolean; // ease animation (true)
  9.   smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  10.   smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  11.   separator?: string; // grouping separator (',')
  12.   decimal?: string; // decimal ('.')
  13.   // easingFn: easing function for animation (easeOutExpo)
  14.   easingFn?: (t: number, b: number, c: number, d: number) => number;
  15.   formattingFn?: (n: number) => string; // this function formats result
  16.   prefix?: string; // text prepended to result
  17.   suffix?: string; // text appended to result
  18.   numerals?: string[]; // numeral glyph substitution
  19. }

js-base64

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

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

  1. npm install --save js-base64
  2.  
  3. require=require('esm')(module);
  4. import {Base64} from 'js-base64';
  5.  
  6.  
  7. let latin = 'dankogai';
  8. let utf8  = '小飼弾'
  9. let u8s   =  new Uint8Array([100,97,110,107,111,103,97,105]);
  10. Base64.encode(latin);             // ZGFua29nYWk=
  11. Base64.btoa(latin);               // ZGFua29nYWk=
  12. Base64.btoa(utf8);                // raises exception
  13. Base64.fromUint8Array(u8s);       // ZGFua29nYWk=
  14. Base64.fromUint8Array(u8s, true); // ZGFua29nYW which is URI safe
  15. Base64.encode(utf8);              // 5bCP6aO85by+
  16. Base64.encode(utf8, true)         // 5bCP6aO85by-
  17. Base64.encodeURI(utf8);           // 5bCP6aO85by-

json-bigint

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

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

  1. var JSONbig = require('json-bigint');
  2.  
  3. var json = '{ "value" : 9223372036854775807, "v2": 123 }';
  4. console.log('Input:', json);
  5. console.log('');
  6.  
  7. console.log('node.js built-in JSON:');
  8. var r = JSON.parse(json);
  9. console.log('JSON.parse(input).value : ', r.value.toString());
  10. console.log('JSON.stringify(JSON.parse(input)):', JSON.stringify(r));
  11.  
  12. console.log('\n\nbig number JSON:');
  13. var r1 = JSONbig.parse(json);
  14. console.log('JSONbig.parse(input).value : ', r1.value.toString());
  15. console.log('JSONbig.stringify(JSONbig.parse(input)):', JSONbig.stringify(r1));

vuejs-datetimepicker

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

==功能==：

  1. npm install vuejs-datetimepicker
  2.  
  3.  
  4. <template>
  5.     <datetime format="MM/DD/YYYY" width="300px" v-model="val"></datetime>
  6. </template>
  7.  
  8. <script>
  9. import datetime from 'vuejs-datetimepicker';
  10.  
  11. export default {
  12.     components: { datetime }
  13. };
  14. </script>

vue-meta-info

https://www.npmjs.com/package/vue-meta-info

==功能==：基于Vue 2.0 的单页面 meta info 管理.

  1. <template>
  2.   ...
  3. </template>
  4.  
  5. <script>
  6.   export default {
  7.     metaInfo: {
  8.       title: 'My Example App', // set a title
  9.       meta: [{                 // set meta
  10.         name: 'keyWords',
  11.         content: 'My Example App'
  12.       }]
  13.       link: [{                 // set link
  14.         rel: 'asstes',
  15.         href: 'https://assets-cdn.github.com/'
  16.       }]
  17.     }
  18.   }
  19. </script>

vue-smooth-scroll

https://www.npmjs.com/package/vue-smooth-scroll

==功能==：Scroll

  1. npm install --save vue-smooth-scroll
  2.  
  3. import vueSmoothScroll from 'vue-smooth-scroll'
  4. Vue.use(vueSmoothScroll)

prismjs

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

==功能==：Prism是一个轻量，健壮，优雅的语法高亮库。这是Dabblet的衍生项目。

vuex-persistedstate

https://www.npmjs.com/package/vuex-persistedstate

==功能==：

  1. npm install --save vuex-persistedstate
  2.  
  3.  
  4. import createPersistedState from 'vuex-persistedstate';
  5. import * as Cookies from 'js-cookie';
  6. import cookie from 'cookie';
  7.  
  8. export default ({ store, req }) => {
  9.     createPersistedState({
  10.         paths: [...],
  11.         storage: {
  12.             getItem: (key) => {
  13.                 // See https://nuxtjs.org/guide/plugins/###using-process-flags
  14.                 if (process.server) {
  15.                     const parsedCookies = cookie.parse(req.headers.cookie);
  16.                     return parsedCookies[key];
  17.                 } else {
  18.                     return Cookies.get(key);
  19.                 }
  20.             },
  21.             // Please see https://github.com/js-cookie/js-cookie###json, on how to handle JSON.
  22.             setItem: (key, value) =>
  23.                 Cookies.set(key, value, { expires: 365, secure: false }),
  24.             removeItem: key => Cookies.remove(key)
  25.         }
  26.     })(store);
  27. };

vue-slider-component

https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md

==功能==：一个高度定制化的滑块组件

  1. $ yarn add vue-slider-component
  2. ### npm install vue-slider-component --save
  3.  
  4.  
  5. <template>
  6.   <vue-slider v-model="value" />
  7. </template>
  8.  
  9. <script>
  10. import VueSlider from 'vue-slider-component'
  11. import 'vue-slider-component/theme/antd.css'
  12.  
  13. export default {
  14.   components: {
  15.     VueSlider
  16.   },
  17.   data () {
  18.     return {
  19.       value: 0
  20.     }
  21.   }
  22. }
  23. </script>

CodeMirror

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

==功能==：CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。

vue-codemirror

https://www.npmjs.com/package/vue-codemirror

==功能==：

  1. <codemirror
  2.         ref="editQuerySQL"
  3.         @ready="onCodemirrorReady"
  4.         @input="onCodemirrorInput"
  5.         v-model="query.sql"
  6.         :options="cmOptions"
  7.       ></codemirror>
  8.       
  9.       
  10. import { codemirror } from 'vue-codemirror';
  11. import { getEthdb } from '@/api';
  12. import 'codemirror/lib/codemirror.css';
  13. import 'codemirror/theme/idea.css';
  14. // import 'codemirror/theme/base16-dark.css';
  15. import 'codemirror/theme/panda-syntax.css';
  16. import 'codemirror/addon/hint/show-hint.css';
  17.  
  18. import 'codemirror/lib/codemirror';
  19. import 'codemirror/mode/sql/sql';
  20. import 'codemirror/addon/hint/show-hint';
  21. import 'codemirror/addon/hint/sql-hint';
  22.  
  23.         
  24. export default {
  25.     data(){
  26.         retrun {
  27.             query: {
  28.                 sql: 'SELECT * FROM ethblock LIMIT 200',
  29.              },
  30.               cmOptions: {
  31.                 scroll: false,
  32.                 tabSize: 4,
  33.                 lineNumbers: false,
  34.                 line: false,
  35.                 indentWithTabs: true,
  36.                 smartIndent: true,
  37.                 autofocus: false,
  38.                 mode: 'text/x-mariadb',
  39.                 theme: 'idea',
  40.                 hintOptions: {
  41.                   completeSingle: false,
  42.                 },
  43.               },
  44.         }
  45.     },
  46.     methods:{
  47.      onCodemirrorReady(cm) {
  48.       cm.on('keypress', () => {
  49.         cm.showHint();
  50.       });
  51.     },
  52.      onCodemirrorInput(newQuery) {
  53.       this.query.sql = newQuery;
  54.     },
  55.     }
  56.     
  57.     
  58. }

portfinder || get-port node

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

https://www.npmjs.com/package/get-port

==功能==：端口查看器

  1. [sudo] npm install portfinder
  2.  
  3.  
  4.  
  5. portfinder.getPort({
  6.     port: 3000,    // minimum port
  7.     stopPort: 3333 // maximum port
  8. }, callback);

regedit node

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

==功能==：使用node.js和Windows脚本宿主对Windows注册表进行读取，写入，列出和处理各种时髦的事情。

lowdb

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

==功能==：适用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动。⚡️

  1. npm install lowdb
  2. const low = require('lowdb')
  3. const FileSync = require('lowdb/adapters/FileSync')
  4.  
  5. const adapter = new FileSync('db.json')
  6. const db = low(adapter)
  7.  
  8. // Set some defaults
  9. db.defaults({ posts: [], user: {} })
  10.   .write()
  11.  
  12. // Add a post
  13. db.get('posts')
  14.   .push({ id: 1, title: 'lowdb is awesome'})
  15.   .write()
  16.  
  17. // Set a user using Lodash shorthand syntax
  18. db.set('user.name', 'typicode')
  19.   .write()

cheerio node

https://github.com/cheeriojs/cheerio/wiki/Chinese-README

==功能==：为服务器特别定制的，快速、灵活、实施的jQuery核心实现. 爬虫

  1. npm install cheerio
  2. const cheerio = require('cheerio');
  3. const $ = cheerio.load('<h2 class="title">Hello world</h2>');
  4.  
  5. $('h2.title').text('Hello there!');
  6. $('h2').addClass('welcome');
  7.  
  8. $.html();
  9. //=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>

libxmljs

https://github.com/libxmljs/libxmljs/wiki

==功能==：解析xml

node-fetch、 got node

https://github.com/node-fetch/node-fetch

https://github.com/sindresorhus/got###readme

==功能==：node-ajax

ora node

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

==功能==：优雅的终端旋转器

  1. const ora = require('ora');
  2.  
  3. const spinner = ora('Loading unicorns').start();
  4.  
  5. setTimeout(() => {
  6.     spinner.color = 'yellow';
  7.     spinner.text = 'Loading rainbows';
  8. }, 1000);

node-mkdirp 、rimraf node

https://github.com/substack/node-mkdirp

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

==功能==：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建创建文件

  1. var mkdirp = require('mkdirp');
  2.     
  3. mkdirp('/tmp/foo/bar/baz', function (err) {
  4.     if (err) console.error(err)
  5.     else console.log('pow!')
  6. });

shelljs

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

==功能==：hellJS是在Node.js API之上的Unix shell命令的可移植（Windows / Linux / OS X）实现。您可以使用它消除shell脚本对Unix的依赖，同时仍然保留其熟悉而强大的命令。您还可以全局安装它，以便可以从Node项目外部运行它-告别那些讨厌的Bash脚本！

  1. var shell = require('shelljs');
  2.  
  3. if (!shell.which('git')) {
  4.   shell.echo('Sorry, this script requires git');
  5.   shell.exit(1);
  6. }
  7.  
  8. // Copy files to release dir
  9. shell.rm('-rf', 'out/Release');
  10. shell.cp('-R', 'stuff/', 'out/Release');
  11.  
  12. // Replace macros in each .js file
  13. shell.cd('lib');
  14. shell.ls('*.js').forEach(function (file) {
  15.   shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  16.   shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  17.   shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
  18. });
  19. shell.cd('..');

shx

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

==功能==：Shx 是一个包装 ShellJS Unix 命令的包装器，为 npm 包脚本中简单的类 Unix 跨平台命令提供了一个简单的解决方案

  • ShellJS: Good for writing long scripts, all in JS, running via NodeJS (e.g. node myScript.js).

  • shx: Good for writing one-off commands in npm package scripts (e.g. "clean": "shx rm -rf out/").

  1. npm install shx --save-dev
  2.  
  3. package.json:
  4. {
  5.   "scripts": {
  6.     "clean": "shx rm -rf build dist && shx echo Done"
  7.   }
  8. }

node-ssh

https://github.com/steelbrain/node-ssh###readme

==功能==：Node-SSH 是 ssh2的一个非常轻量级的 Promise 包装器。

chalk

https://github.com/chalk/chalk

==功能==：给终端嵌套您想要的样式。

  1. const chalk = require('chalk');
  2. const log = console.log;
  3.  
  4. // Combine styled and normal strings
  5. log(chalk.blue('Hello') + ' World' + chalk.red('!'));
  6.  
  7. // Compose multiple styles using the chainable API
  8. log(chalk.blue.bgRed.bold('Hello world!'));
  9.  
  10. // Pass in multiple arguments
  11. log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
  12.  
  13. // Nest styles
  14. log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
  15.  
  16. // Nest styles of the same type even (color, underline, background)
  17. log(chalk.green(
  18.     'I am a green line ' +
  19.     chalk.blue.underline.bold('with a blue substring') +
  20.     ' that becomes green again!'
  21. ));

Nzh

https://blog.whyoop.com/nzh/docs/###/

==功能==：适用于需要转换阿拉伯数字与中文数字的场景。特点如下:

  • 以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)

  • 支持科学记数法字符串的转换

  • 支持口语化

  • 支持自定义转换(不论是兆,京还是厘都可以用)

  • 对超大数支持用争议教少的万万亿代替亿亿

  • 当然,你还可以把中文数字再转回阿拉伯数字

  1. npm install nzh --save
  2. var Nzh = require("nzh");
  3. var nzhcn = require("nzh/cn"); //直接使用简体中文
  4. var nzhhk = require("nzh/hk"); //繁体中文
  5. var nzhcn = Nzh.cn;                 // 使用简体中文,  另外有 Nzh.hk -- 繁体中文
  6.  
  7. nzhcn.encodeS(100111);              // 转中文小写 >> 十万零一百一十一
  8. nzhcn.encodeB(100111);              // 转中文大写 >> 壹拾万零壹佰壹拾壹
  9. nzhcn.encodeS("1.23456789e+21");    // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
  10. nzhcn.toMoney("100111.11");         // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分

decko

https://github.com/developit/decko

节流 防抖https://blog.csdn.net/qq_2955...==功能==：三个最有用的装饰器的简洁实现：

  • @bind：this在方法内使常量的值

  • @debounce：限制对方法的调用

  • @memoize：根据参数缓存返回值

npm i -S decko

p-queue

https://github.com/sindresorhus/p-queue###readme

==功能==：对限制速率的异步（或同步）操作很有用。例如，在与REST API交互时或在执行CPU /内存密集型任务时。

  1. const {default: PQueue} = require('p-queue');
  2. const got = require('got');
  3.  
  4. const queue = new PQueue({concurrency: 1});
  5.  
  6. (async () => {
  7.     await queue.add(() => got('https://sindresorhus.com'));
  8.     console.log('Done: sindresorhus.com');
  9. })();
  10.  
  11. (async () => {
  12.     await queue.add(() => got('https://avajs.dev'));
  13.     console.log('Done: avajs.dev');
  14. })();
  15.  
  16. (async () => {
  17.     const task = await getUnicornTask();
  18.     await queue.add(task);
  19.     console.log('Done: Unicorn task');
  20. })();

sleep

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

==功能==：sleep

  1. npm i sleep
  2.  
  3. var sleep = require('sleep');
  4. function msleep(n) {
  5.   Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, n);
  6. }
  7. function sleep(n) {
  8.   msleep(n*1000);
  9. }

delay

https://github.com/sindresorhus/delay###readme

==功能==：将承诺推迟一定的时间

  1. npm install delay
  2. const delay = require('delay');
  3.  
  4. (async () => {
  5.     bar();
  6.  
  7.     await delay(100);
  8.  
  9.     // Executed 100 milliseconds later
  10.     baz();
  11. })();

better-scroll

https://github.com/ustbhuangyi/better-scroll

==功能==：BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

https://better-scroll.github.io/docs/zh-CN/guide/###betterscroll-%E6%98%AF%E4%BB%80%E4%B9%88

create-keyframe-animation

https://github.com/HenrikJoreteg/create-keyframe-animation

==功能==：使用JavaScrip在浏览器中动态生成CSS关键帧动画（不维护了）

vconsole

https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md

==功能==：一个轻量、可拓展、针对手机网页的前端开发者调试面板。

  1. <script src="path/to/vconsole.min.js"></script>
  2. <script>
  3.   // 初始化
  4.   var vConsole = new VConsole();
  5.   console.log('Hello world');
  6. </script>

源自：https://segmentfault.com/a/1190000038589634

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/179449
推荐阅读
相关标签

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

  

闽ICP备14008679号