点击上方关注 前端技术江湖，每天一个知识点，dayday up
原文来自：ZHUIMEN，https://segmentfault.com/a/1190000038589634
总结下今年用到的一些有意思的《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(react-copy-to-clipboard
https://www.npmjs.com/package/react-copy-to-clipboard==功能==：react 复制粘贴
npm install --save react react-copy-to-clipboardimport 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 ( this.setState({value, copied: false})} />
this.setState({copied: true})}>
Copy to clipboard with span
this.setState({copied: true})}>
{this.state.copied ? Copied. : null});
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(, appRoot);
numeral
http://numeraljs.com/==功能==：一个用于格式化和处理数字的javascript库。
var value = https://www.it610.com/article/myNumeral.value();
// 1000var myNumeral2 = numeral('1,000');
var value2 = myNumeral2.value();
// 1000
omit.js
https://www.npmjs.com/package/omit.js==功能==：返回 在目标对象中 omit[删除; 忽略] 指定属性的对象; 实用程序功能，用于创建删除了某些字段的对象的浅表副本。
npm i --save omit.jsomit(obj: Object, fields: string[]): Objectvar 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 filesizefilesize(500);
// "500 B"
filesize(500, {bits: true});
// "4 Kb"
filesize(265318, {base: 10});
// "265.32 kB"
filesize(265318);
// "259.1 KB"
filesize(265318, {round: 0});
// "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, {exponent: 0});
// "1024 B"
filesize(1024, {output: "exponent"});
// 1
filesize(265318, {standard: "iec"});
// "259.1 KiB"
filesize(265318, {standard: "iec", fullform: true});
// "259.1 kibibytes"
filesize(12, {fullform: true, fullforms: ["байтов"]});
// "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 = https://www.it610.com/article/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 (
<>
);
};
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 qrcodejs2getBlob(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 = https://www.it610.com/article/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,
width: 500,
height: 500,
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==功能==：css js 压缩工具
https://www.npmjs.com/package/js-beautify
cors node
https://www.npmjs.com/package/cors==功能==：CORS是一个node.js软件包，用于提供可用于通过各种选项启用CORS的Connect / Express中间件。
npm install corsvar 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.jsinterface 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-base64require=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
vue-meta-info
https://www.npmjs.com/package/vue-meta-info==功能==：基于Vue 2.0 的单页面 meta info 管理.
...
vue-smooth-scroll
https://www.npmjs.com/package/vue-smooth-scroll==功能==：Scroll
npm install --save vue-smooth-scrollimport vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll)
prismjs
https://www.npmjs.com/package/prismjs==功能==：Prism是一个轻量，健壮，优雅的语法高亮库。这是Dabblet的衍生项目。
vuex-persistedstate
https://www.npmjs.com/package/vuex-persistedstate==功能==：
npm install --save vuex-persistedstateimport createPersistedState from 'vuex-persistedstate';
import * as Cookies from 'js-cookie';
import cookie from 'cookie';
export default ({ store, req }) => {
createPersistedState({
paths: [...],
storage: {
getItem: (key) => {
// See https://nuxtjs.org/guide/plugins/###using-process-flags
if (process.server) {
const parsedCookies = cookie.parse(req.headers.cookie);
return parsedCookies[key];
} else {
return Cookies.get(key);
}
},
// Please see https://github.com/js-cookie/js-cookie###json, on how to handle JSON.
setItem: (key, value) =>
Cookies.set(key, value, { expires: 365, secure: false }),
removeItem: key => Cookies.remove(key)
}
})(store);
};
vue-slider-component
https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md==功能==：一个高度定制化的滑块组件
$ yarn add vue-slider-component
### npm install vue-slider-component --save
CodeMirror
https://www.npmjs.com/package/codemirror==功能==：CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。
vue-codemirror
https://www.npmjs.com/package/vue-codemirror==功能==：
import { codemirror } from 'vue-codemirror';
import { getEthdb } from '@/api';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/idea.css';
// import 'codemirror/theme/base16-dark.css';
import 'codemirror/theme/panda-syntax.css';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/lib/codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
export default {
data(){
retrun {
query: {
sql: 'SELECT * FROM ethblock LIMIT 200',
},
cmOptions: {
scroll: false,
tabSize: 4,
lineNumbers: false,
line: false,
indentWithTabs: true,
smartIndent: true,
autofocus: false,
mode: 'text/x-mariadb',
theme: 'idea',
hintOptions: {
completeSingle: false,
},
},
}
},
methods:{
onCodemirrorReady(cm) {
cm.on('keypress', () => {
cm.showHint();
});
},
onCodemirrorInput(newQuery) {
this.query.sql = newQuery;
},
}}portfinder || get-port node
https://www.npmjs.com/package/portfinder==功能==：端口查看器
https://www.npmjs.com/package/get-port
[sudo] npm install portfinderportfinder.getPort({
port: 3000,// minimum port
stopPort: 3333 // maximum port
}, callback);
regedit node
https://www.npmjs.com/package/regedit==功能==：使用node.js和Windows脚本宿主对Windows注册表进行读取，写入，列出和处理各种时髦的事情。
lowdb
https://www.npmjs.com/package/lowdb==功能==：适用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动。??
npm install lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json')
const db = low(adapter)
// Set some defaults
db.defaults({ posts: [], user: {} })
.write()
// Add a post
db.get('posts')
.push({ id: 1, title: 'lowdb is awesome'})
.write()
// Set a user using Lodash shorthand syntax
db.set('user.name', 'typicode')
.write()
cheerio node
https://github.com/cheeriojs/cheerio/wiki/Chinese-README==功能==：为服务器特别定制的，快速、灵活、实施的jQuery核心实现. 爬虫
npm install cheerio
const cheerio = require('cheerio');
const $ = cheerio.load('Hello world');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> Hello there!
libxmljs
https://github.com/libxmljs/libxmljs/wiki==功能==：解析xml
node-fetch、 got node
https://github.com/node-fetch/node-fetch==功能==：node-ajax
https://github.com/sindresorhus/got###readme
ora node
https://www.npmjs.com/package/ora==功能==：优雅的终端旋转器
const ora = require('ora');
const spinner = ora('Loading unicorns').start();
setTimeout(() => {
spinner.color = 'yellow';
spinner.text = 'Loading rainbows';
}, 1000);
node-mkdirp 、rimraf node
https://github.com/substack/node-mkdirp==功能==：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建创建文件
https://www.npmjs.com/package/rimraf
var mkdirp = require('mkdirp');
mkdirp('/tmp/foo/bar/baz', function (err) {
if (err) console.error(err)
else console.log('pow!')
});
shelljs
https://www.npmjs.com/package/shelljs==功能==：hellJS是在Node.js API之上的Unix shell命令的可移植（Windows / Linux / OS X）实现。您可以使用它消除shell脚本对Unix的依赖，同时仍然保留其熟悉而强大的命令。您还可以全局安装它，以便可以从Node项目外部运行它-告别那些讨厌的Bash脚本！
var shell = require('shelljs');
if (!shell.which('git')) {
shell.echo('Sorry, this script requires git');
shell.exit(1);
}
// Copy files to release dir
shell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');
// Replace macros in each .js file
shell.cd('lib');
shell.ls('*.js').forEach(function (file) {
shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
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/").
npm install shx --save-devpackage.json:
{
"scripts": {
"clean": "shx rm -rf build dist && shx echo Done"
}
}
node-ssh
https://github.com/steelbrain/node-ssh###readme==功能==：Node-SSH 是 ssh2的一个非常轻量级的 Promise 包装器。
chalk
https://github.com/chalk/chalk==功能==：给终端嵌套您想要的样式。
const chalk = require('chalk');
const log = console.log;
// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));
// Pass in multiple arguments
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
// Nest styles
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
// Nest styles of the same type even (color, underline, background)
log(chalk.green(
'I am a green line ' +
chalk.blue.underline.bold('with a blue substring') +
' that becomes green again!'
));
Nzh
https://blog.whyoop.com/nzh/docs/###/==功能==：适用于需要转换阿拉伯数字与中文数字的场景。特点如下:
- 以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)
- 支持科学记数法字符串的转换
- 支持口语化
- 支持自定义转换(不论是兆,京还是厘都可以用)
- 对超大数支持用争议教少的万万亿代替亿亿
- 当然,你还可以把中文数字再转回阿拉伯数字
npm install nzh --save
var Nzh = require("nzh");
var nzhcn = require("nzh/cn");
//直接使用简体中文
var nzhhk = require("nzh/hk");
//繁体中文
var nzhcn = Nzh.cn;
// 使用简体中文,另外有 Nzh.hk -- 繁体中文nzhcn.encodeS(100111);
// 转中文小写 >> 十万零一百一十一
nzhcn.encodeB(100111);
// 转中文大写 >> 壹拾万零壹佰壹拾壹
nzhcn.encodeS("1.23456789e+21");
// 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
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 /内存密集型任务时。
const {default: PQueue} = require('p-queue');
const got = require('got');
const queue = new PQueue({concurrency: 1});
(async () => {
await queue.add(() => got('https://sindresorhus.com'));
console.log('Done: sindresorhus.com');
})();
(async () => {
await queue.add(() => got('https://avajs.dev'));
console.log('Done: avajs.dev');
})();
(async () => {
const task = await getUnicornTask();
await queue.add(task);
console.log('Done: Unicorn task');
})();
sleep
https://www.npmjs.com/package/sleep==功能==：sleep
npm i sleepvar sleep = require('sleep');
function msleep(n) {
Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, n);
}
function sleep(n) {
msleep(n*1000);
}
delay
https://github.com/sindresorhus/delay###readme==功能==：将承诺推迟一定的时间
npm install delay
const delay = require('delay');
(async () => {
bar();
await delay(100);
// Executed 100 milliseconds later
baz();
})();
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==功能==：一个轻量、可拓展、针对手机网页的前端开发者调试面板。
源自：https://segmentfault.com/a/1190000038589634
声明：文章著作权归作者所有，如有侵权，请联系小编删除。
The End
欢迎自荐投稿到《前端技术江湖》，如果你觉得这篇内容对你挺有启发，记得点个 「在看」哦
【ddk|50 个让你高效编程的前端轮子】点个『在看』支持下
文章图片
推荐阅读
- DOM
- Sublime|Sublime Text3编译运行C++/Java/Python程序语言出现中文乱码【已解决】
- JavaScript|JavaScript知识——DOM增删改、操作内联样式
- sublime text3如何使用（添加插件）
- Sublime Text 全局搜索Ctrl+Shift+F快捷键不能用
- Sublime 添加∕删除右键菜单.bat
- Sublime快捷键设置
- HTML DOM console.time()方法用法示例介绍
- 正确的Realm Migration Android方式