50 个让你高效编程的前端轮子

总结下今年用到的一些有意思的《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 }

---

“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。

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: '',
    copied: false,
  };
 
  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 span</span>
        </CopyToClipboard>
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </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: Object, fields: string[]): Object


var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ '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, {bits: true});          // "4 Kb"
filesize(265318, {base: 10});         // "265.32 kB"
filesize(265318);                     // "259.1 KB&