9
50 个让你高效编程的前端轮子
source link: https://zhuanlan.zhihu.com/p/364457901
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
50 个让你高效编程的前端轮子
关注微信公众号:web前端学习圈，领取85G前端全套系统教程
总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题下都是超链接，可点击自行查阅） 希望能对您有用！如有意思的 轮子 可以在评论列出一起讨论下
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
==功能==：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
==功能==：文件上传下载拖拽文件 及文件夹等
var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);
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
==功能==：一个用于格式化和处理数字的javascript库。
var value = myNumeral.value();
// 1000
var myNumeral2 = numeral('1,000');
var value2 = myNumeral2.value();
// 1000
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
==功能==：一个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
==~~~~功能==：用于将时间转换为毫秒。
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
==功能==：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"
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
==功能==：使用备注的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<any> = () => {
const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url: '', content: '' });
const [treeNavs, setTreeNavs] = useState<any[]>([])
// 初始为开发文档
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
==功能==：Cytoscape.js是功能齐全的图论库。您是否需要对关系数据进行建模和/或可视化，例如生物数据或社交网络？如果是这样，Cytoscape.js就是您所需要的。Cytoscape.js包含一个图形理论模型和一个用于显示交互式图形的可选渲染器。该库旨在使程序员和科学家尽可能轻松地在其应用程序中使用图论，无论是用于Node.js应用程序中的服务器端分析还是用于丰富的用户界面。
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
==功能==：npm yran 补丁,用于改node_modules
cross-env node
==功能==：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
==功能==：一个用于任意精度十进制和非十进制算术的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,
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
https://www.npmjs.com/package/js-beautify
==功能==：css js 压缩工具
cors node
==功能==：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
==功能==：数字滚动插件使用方法详解
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
==功能==：另一个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
==功能==：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
==功能==：
npm install vuejs-datetimepicker
<template>
<datetime format="MM/DD/YYYY" width="300px" v-model="val"></datetime>
</template>
<script>
import datetime from 'vuejs-datetimepicker';
export default {
components: { datetime }
};
</script>
vue-meta-info
==功能==：基于Vue 2.0 的单页面 meta info 管理.
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
vue-smooth-scroll
==功能==：Scroll
npm install --save vue-smooth-scroll
import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll)
prismjs
==功能==：Prism是一个轻量，健壮，优雅的语法高亮库。这是Dabblet的衍生项目。
vuex-persistedstate
==功能==：
npm install --save vuex-persistedstate
import 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
<template>
<vue-slider v-model="value" />
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
export default {
components: {
VueSlider
},
data () {
return {
value: 0
}
}
}
</script>
CodeMirror
==功能==：CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。
vue-codemirror
==功能==：
<codemirror
ref="editQuerySQL"
@ready="onCodemirrorReady"
@input="onCodemirrorInput"
v-model="query.sql"
:options="cmOptions"
></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 portfinder
portfinder.getPort({
port: 3000, // minimum port
stopPort: 3333 // maximum port
}, callback);
regedit node
==功能==：使用node.js和Windows脚本宿主对Windows注册表进行读取，写入，列出和处理各种时髦的事情。
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
==功能==：为服务器特别定制的，快速、灵活、实施的jQuery核心实现. 爬虫
npm install cheerio
const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>
libxmljs
==功能==：解析xml
node-fetch、 got node
https://github.com/node-fetch/node-fetch
https://github.com/sindresorhus/got###readme
==功能==：node-ajax
ora node
==功能==：优雅的终端旋转器
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
https://www.npmjs.com/package/rimraf
==功能==：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建创建文件
var mkdirp = require('mkdirp');
mkdirp('/tmp/foo/bar/baz', function (err) {
if (err) console.error(err)
else console.log('pow!')
});
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
==功能==：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-dev
package.json:
{
"scripts": {
"clean": "shx rm -rf build dist && shx echo Done"
}
}
node-ssh
==功能==：Node-SSH 是 ssh2的一个非常轻量级的 Promise 包装器。
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
==功能==：适用于需要转换阿拉伯数字与中文数字的场景。特点如下:
- 以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)
- 支持科学记数法字符串的转换
- 支持口语化
- 支持自定义转换(不论是兆,京还是厘都可以用)
- 对超大数支持用争议教少的万万亿代替亿亿
- 当然,你还可以把中文数字再转回阿拉伯数字
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://blog.csdn.net/qq_2955...==功能==：三个最有用的装饰器的简洁实现：
- @bind：this在方法内使常量的值
- @debounce：限制对方法的调用
- @memoize：根据参数缓存返回值
npm i -S decko
p-queue
==功能==：对限制速率的异步（或同步）操作很有用。例如，在与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
==功能==：sleep
npm i sleep
var sleep = require('sleep');
function msleep(n) {
Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, n);
}
function sleep(n) {
msleep(n*1000);
}
delay
==功能==：将承诺推迟一定的时间
npm install delay
const delay = require('delay');
(async () => {
bar();
await delay(100);
// Executed 100 milliseconds later
baz();
})();
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
==功能==：使用JavaScrip在浏览器中动态生成CSS关键帧动画（不维护了）
vconsole
==功能==：一个轻量、可拓展、针对手机网页的前端开发者调试面板。
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
原作者姓名：ZHUIMEN
原出处：segmentfault
原文链接：几个常用js库，别再重复造轮子了 - SegmentFault 思否
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK